Manga Pink to Ice Color Palette

About this palette

Manga Pink to Ice is a 5-color pastel, light, cool palette: #F3BDD8 (Manga Pink), #94E8D1 (Sea Glass Teal), #AAE0F5 (Distant Homeworld), #F3DBAE (Vinaigrette), #D6FFF9 (Ice). It mixes pink, turquoise, blue, yellow, white tones and feels cool overall. The strongest text pairing is #F3BDD8 on #D6FFF9 with a contrast ratio of 1.49:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Manga Pink	rgb(243, 189, 216)	hsl(330, 69%, 85%)
Sea Glass Teal	rgb(148, 232, 209)	hsl(164, 65%, 75%)
Distant Homeworld	rgb(170, 224, 245)	hsl(197, 79%, 81%)
Vinaigrette	rgb(243, 219, 174)	hsl(39, 74%, 82%)
Ice	rgb(214, 255, 249)	hsl(171, 100%, 92%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Color blindness preview

CSS variables

/* Manga Pink to Ice — https://swatchly.xyz/palette/f3bdd8-94e8d1-aae0f5-f3dbae-d6fff9 */
:root {
  --manga-pink: #f3bdd8;
  --sea-glass-teal: #94e8d1;
  --distant-homeworld: #aae0f5;
  --vinaigrette: #f3dbae;
  --ice: #d6fff9;
}

Tailwind CSS v4

/* Manga Pink to Ice — https://swatchly.xyz/palette/f3bdd8-94e8d1-aae0f5-f3dbae-d6fff9 */
@theme {
  --color-manga-pink: #f3bdd8;
  --color-manga-pink-50: #ffe8f3;
  --color-manga-pink-100: #fdd8ea;
  --color-manga-pink-200: #f3bdd8;
  --color-manga-pink-300: #d9aac2;
  --color-manga-pink-400: #bd8ba4;
  --color-manga-pink-500: #a2718a;
  --color-manga-pink-600: #875971;
  --color-manga-pink-700: #6f455b;
  --color-manga-pink-800: #593548;
  --color-manga-pink-900: #462738;
  --color-manga-pink-950: #2d1723;
  --color-sea-glass-teal: #94e8d1;
  --color-sea-glass-teal-50: #d1fff1;
  --color-sea-glass-teal-100: #c2f6e6;
  --color-sea-glass-teal-200: #94e8d1;
  --color-sea-glass-teal-300: #89cfbb;
  --color-sea-glass-teal-400: #61b19c;
  --color-sea-glass-teal-500: #419682;
  --color-sea-glass-teal-600: #247b68;
  --color-sea-glass-teal-700: #0a6352;
  --color-sea-glass-teal-800: #004e40;
  --color-sea-glass-teal-900: #003d31;
  --color-sea-glass-teal-950: #00261e;
  --color-distant-homeworld: #aae0f5;
  --color-distant-homeworld-50: #e6f8ff;
  --color-distant-homeworld-100: #cff1fe;
  --color-distant-homeworld-200: #aae0f5;
  --color-distant-homeworld-300: #9bc8da;
  --color-distant-homeworld-400: #77a9bd;
  --color-distant-homeworld-500: #5b8ea2;
  --color-distant-homeworld-600: #417386;
  --color-distant-homeworld-700: #2d5c6d;
  --color-distant-homeworld-800: #1f4857;
  --color-distant-homeworld-900: #143844;
  --color-distant-homeworld-950: #09232c;
  --color-vinaigrette: #f3dbae;
  --color-vinaigrette-50: #fff9ee;
  --color-vinaigrette-100: #fdefd5;
  --color-vinaigrette-200: #f3dbae;
  --color-vinaigrette-300: #d7c49f;
  --color-vinaigrette-400: #b8a37a;
  --color-vinaigrette-500: #9c865c;
  --color-vinaigrette-600: #806b42;
  --color-vinaigrette-700: #66532e;
  --color-vinaigrette-800: #50401e;
  --color-vinaigrette-900: #3f3014;
  --color-vinaigrette-950: #281e09;
  --color-ice: #d6fff9;
  --color-ice-50: #d6fff9;
  --color-ice-100: #d8f1ed;
  --color-ice-200: #c1dfda;
  --color-ice-300: #a7c9c4;
  --color-ice-400: #85aaa5;
  --color-ice-500: #698f8a;
  --color-ice-600: #50746f;
  --color-ice-700: #3b5d58;
  --color-ice-800: #2b4945;
  --color-ice-900: #1f3835;
  --color-ice-950: #112321;
}