Race the Sun to Sea of Stars Color Palette

About this palette

Race the Sun to Sea of Stars is a 5-color cool palette: #EEF6D4 (Race the Sun), #F29CC4 (Pastel Magenta), #8D9B4E (Totally Broccoli), #18688F (Hydra), #113247 (Sea of Stars). It mixes white, pink, green, blue tones and feels cool overall. The strongest text pairing is #EEF6D4 on #113247 with a contrast ratio of 11.95:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Race the Sun	rgb(238, 246, 212)	hsl(74, 65%, 90%)
Pastel Magenta	rgb(242, 156, 196)	hsl(332, 77%, 78%)
Totally Broccoli	rgb(141, 155, 78)	hsl(71, 33%, 46%)
Hydra	rgb(24, 104, 143)	hsl(200, 71%, 33%)
Sea of Stars	rgb(17, 50, 71)	hsl(203, 61%, 17%)

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.

Aa11.95:1 Very good#EEF6D4 on #113247
Aa11.95:1 Very good#113247 on #EEF6D4
Aa6.57:1 Good#F29CC4 on #113247
Aa6.57:1 Good#113247 on #F29CC4
Aa5.49:1 Good#EEF6D4 on #18688F
Aa5.49:1 Good#18688F on #EEF6D4
Aa4.41:1 Poor#8D9B4E on #113247
Aa4.41:1 Poor#113247 on #8D9B4E

Color blindness preview

CSS variables

/* Race the Sun to Sea of Stars — https://swatchly.xyz/palette/eef6d4-f29cc4-8d9b4e-18688f-113247 */
:root {
  --race-the-sun: #eef6d4;
  --pastel-magenta: #f29cc4;
  --totally-broccoli: #8d9b4e;
  --hydra: #18688f;
  --sea-of-stars: #113247;
}

Tailwind CSS v4

/* Race the Sun to Sea of Stars — https://swatchly.xyz/palette/eef6d4-f29cc4-8d9b4e-18688f-113247 */
@theme {
  --color-race-the-sun: #eef6d4;
  --color-race-the-sun-50: #eef6d4;
  --color-race-the-sun-100: #e6ebd6;
  --color-race-the-sun-200: #d2d8bf;
  --color-race-the-sun-300: #bcc3a7;
  --color-race-the-sun-400: #9da486;
  --color-race-the-sun-500: #838a6b;
  --color-race-the-sun-600: #697052;
  --color-race-the-sun-700: #53593e;
  --color-race-the-sun-800: #40452e;
  --color-race-the-sun-900: #313522;
  --color-race-the-sun-950: #1e2113;
  --color-pastel-magenta: #f29cc4;
  --color-pastel-magenta-50: #ffecf4;
  --color-pastel-magenta-100: #ffdceb;
  --color-pastel-magenta-200: #ffbbd9;
  --color-pastel-magenta-300: #f29cc4;
  --color-pastel-magenta-400: #d07fa5;
  --color-pastel-magenta-500: #b4648b;
  --color-pastel-magenta-600: #974c71;
  --color-pastel-magenta-700: #7d385b;
  --color-pastel-magenta-800: #652948;
  --color-pastel-magenta-900: #511e38;
  --color-pastel-magenta-950: #351023;
  --color-totally-broccoli: #8d9b4e;
  --color-totally-broccoli-50: #f4fdd4;
  --color-totally-broccoli-100: #ecf6c8;
  --color-totally-broccoli-200: #dae5af;
  --color-totally-broccoli-300: #c5d293;
  --color-totally-broccoli-400: #a7b56d;
  --color-totally-broccoli-500: #8d9b4e;
  --color-totally-broccoli-600: #717e30;
  --color-totally-broccoli-700: #586418;
  --color-totally-broccoli-800: #444e06;
  --color-totally-broccoli-900: #333b00;
  --color-totally-broccoli-950: #1f2400;
  --color-hydra: #18688f;
  --color-hydra-50: #ebf7ff;
  --color-hydra-100: #d2eeff;
  --color-hydra-200: #a5dcfd;
  --color-hydra-300: #84c4ea;
  --color-hydra-400: #5ca2cb;
  --color-hydra-500: #3b85ad;
  --color-hydra-600: #18688f;
  --color-hydra-700: #0a5374;
  --color-hydra-800: #00415d;
  --color-hydra-900: #003249;
  --color-hydra-950: #001f30;
  --color-sea-of-stars: #113247;
  --color-sea-of-stars-50: #ecf7ff;
  --color-sea-of-stars-100: #d9efff;
  --color-sea-of-stars-200: #c1dcf0;
  --color-sea-of-stars-300: #a7c6dc;
  --color-sea-of-stars-400: #84a6be;
  --color-sea-of-stars-500: #6789a2;
  --color-sea-of-stars-600: #4d6e85;
  --color-sea-of-stars-700: #38566b;
  --color-sea-of-stars-800: #284254;
  --color-sea-of-stars-900: #113247;
  --color-sea-of-stars-950: #0f1e28;
}