Icy Plains to Race the Sun Color Palette

About this palette

Icy Plains to Race the Sun is a 5-color pastel, light, cool palette: #DBDBFF (Icy Plains), #A8E2B7 (Celadon), #C3C286 (Kiss a Frog), #F4D0A9 (Soufflé), #E3F6D3 (Race the Sun). It mixes purple, green, yellow, orange, white tones and feels cool overall. The strongest text pairing is #C3C286 on #E3F6D3 with a contrast ratio of 1.62:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(219, 219, 255)	hsl(240, 100%, 93%)
Celadon	rgb(168, 226, 183)	hsl(136, 50%, 77%)
Kiss a Frog	rgb(195, 194, 134)	hsl(59, 34%, 65%)
Soufflé	rgb(244, 208, 169)	hsl(31, 77%, 81%)
Race the Sun	rgb(227, 246, 211)	hsl(93, 66%, 90%)

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

/* Icy Plains to Race the Sun — https://swatchly.xyz/palette/dbdbff-a8e2b7-c3c286-f4d0a9-e3f6d3 */
:root {
  --icy-plains: #dbdbff;
  --celadon: #a8e2b7;
  --kiss-a-frog: #c3c286;
  --souffl: #f4d0a9;
  --race-the-sun: #e3f6d3;
}

Tailwind CSS v4

/* Icy Plains to Race the Sun — https://swatchly.xyz/palette/dbdbff-a8e2b7-c3c286-f4d0a9-e3f6d3 */
@theme {
  --color-icy-plains: #dbdbff;
  --color-icy-plains-50: #f9faff;
  --color-icy-plains-100: #f0f0ff;
  --color-icy-plains-200: #dbdbff;
  --color-icy-plains-300: #c4c4e1;
  --color-icy-plains-400: #a3a3c3;
  --color-icy-plains-500: #8686a7;
  --color-icy-plains-600: #6b6a89;
  --color-icy-plains-700: #53536f;
  --color-icy-plains-800: #403f58;
  --color-icy-plains-900: #313045;
  --color-icy-plains-950: #1e1d2c;
  --color-celadon: #a8e2b7;
  --color-celadon-50: #dafbe2;
  --color-celadon-100: #ccf1d5;
  --color-celadon-200: #a8e2b7;
  --color-celadon-300: #99caa5;
  --color-celadon-400: #77ad85;
  --color-celadon-500: #5b926b;
  --color-celadon-600: #427852;
  --color-celadon-700: #2f613f;
  --color-celadon-800: #214d2f;
  --color-celadon-900: #163c23;
  --color-celadon-950: #0a2614;
  --color-kiss-a-frog: #c3c286;
  --color-kiss-a-frog-50: #f6f6d4;
  --color-kiss-a-frog-100: #ececc6;
  --color-kiss-a-frog-200: #d9d8ab;
  --color-kiss-a-frog-300: #c3c286;
  --color-kiss-a-frog-400: #a4a36a;
  --color-kiss-a-frog-500: #89884e;
  --color-kiss-a-frog-600: #6f6e35;
  --color-kiss-a-frog-700: #595723;
  --color-kiss-a-frog-800: #464415;
  --color-kiss-a-frog-900: #36350c;
  --color-kiss-a-frog-950: #222104;
  --color-souffl: #f4d0a9;
  --color-souffl-50: #fff3e5;
  --color-souffl-100: #fde7ce;
  --color-souffl-200: #f4d0a9;
  --color-souffl-300: #d9bb9a;
  --color-souffl-400: #bb9b77;
  --color-souffl-500: #a07f5b;
  --color-souffl-600: #846542;
  --color-souffl-700: #6b4f2f;
  --color-souffl-800: #553d20;
  --color-souffl-900: #432e16;
  --color-souffl-950: #2b1c0a;
  --color-race-the-sun: #e3f6d3;
  --color-race-the-sun-50: #f2fce9;
  --color-race-the-sun-100: #e3f6d3;
  --color-race-the-sun-200: #d2e0c7;
  --color-race-the-sun-300: #bac9ad;
  --color-race-the-sun-400: #99aa8a;
  --color-race-the-sun-500: #7d8e6e;
  --color-race-the-sun-600: #627254;
  --color-race-the-sun-700: #4c5b3f;
  --color-race-the-sun-800: #3b472f;
  --color-race-the-sun-900: #2c3723;
  --color-race-the-sun-950: #1b2214;
}