Polar Wind to Twinkle Pink Color Palette

About this palette

Polar Wind to Twinkle Pink is a 4-color pastel, light palette: #B2DEF1 (Polar Wind), #FFF2E8 (What’s Left), #C9C1F3 (York Plum), #FFD7C8 (Twinkle Pink). It mixes blue, white, purple, orange tones and feels cool overall. The strongest text pairing is #FFF2E8 on #C9C1F3 with a contrast ratio of 1.54:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Polar Wind	rgb(178, 222, 241)	hsl(198, 69%, 82%)
What’s Left	rgb(255, 242, 232)	hsl(26, 100%, 95%)
York Plum	rgb(201, 193, 243)	hsl(250, 68%, 85%)
Twinkle Pink	rgb(255, 215, 200)	hsl(16, 100%, 89%)

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

/* Polar Wind to Twinkle Pink — https://swatchly.xyz/palette/b2def1-fff2e8-c9c1f3-ffd7c8 */
:root {
  --polar-wind: #b2def1;
  --what-s-left: #fff2e8;
  --york-plum: #c9c1f3;
  --twinkle-pink: #ffd7c8;
}

Tailwind CSS v4

/* Polar Wind to Twinkle Pink — https://swatchly.xyz/palette/b2def1-fff2e8-c9c1f3-ffd7c8 */
@theme {
  --color-polar-wind: #b2def1;
  --color-polar-wind-50: #e6f7ff;
  --color-polar-wind-100: #d4effb;
  --color-polar-wind-200: #b2def1;
  --color-polar-wind-300: #a2c6d6;
  --color-polar-wind-400: #7fa8b9;
  --color-polar-wind-500: #638d9e;
  --color-polar-wind-600: #4a7283;
  --color-polar-wind-700: #365b6a;
  --color-polar-wind-800: #274754;
  --color-polar-wind-900: #1b3742;
  --color-polar-wind-950: #0e222a;
  --color-what-s-left: #fff2e8;
  --color-what-s-left-50: #fff2e8;
  --color-what-s-left-100: #f1e9e3;
  --color-what-s-left-200: #dfd5ce;
  --color-what-s-left-300: #c9beb6;
  --color-what-s-left-400: #aa9f96;
  --color-what-s-left-500: #8f847b;
  --color-what-s-left-600: #746961;
  --color-what-s-left-700: #5d534b;
  --color-what-s-left-800: #49413a;
  --color-what-s-left-900: #39312c;
  --color-what-s-left-950: #231e1a;
  --color-york-plum: #c9c1f3;
  --color-york-plum-50: #f9f8ff;
  --color-york-plum-100: #f0eeff;
  --color-york-plum-200: #ded9fd;
  --color-york-plum-300: #c9c1f3;
  --color-york-plum-400: #a8a1ce;
  --color-york-plum-500: #8c84b2;
  --color-york-plum-600: #706894;
  --color-york-plum-700: #585179;
  --color-york-plum-800: #443d60;
  --color-york-plum-900: #332e4b;
  --color-york-plum-950: #201c31;
  --color-twinkle-pink: #ffd7c8;
  --color-twinkle-pink-50: #fffaf9;
  --color-twinkle-pink-100: #ffefea;
  --color-twinkle-pink-200: #ffd7c8;
  --color-twinkle-pink-300: #e1c1b5;
  --color-twinkle-pink-400: #c29e91;
  --color-twinkle-pink-500: #a58174;
  --color-twinkle-pink-600: #886559;
  --color-twinkle-pink-700: #6d4e43;
  --color-twinkle-pink-800: #563b31;
  --color-twinkle-pink-900: #432d24;
  --color-twinkle-pink-950: #2b1b15;
}