Race the Sun to Eternal Darkness Color Palette

About this palette

Race the Sun to Eternal Darkness is a 5-color cool, vintage palette: #EFF1C8 (Race the Sun), #C8C275 (Soda Pop), #9279A3 (Aster), #104F81 (Sea Paint), #182740 (Eternal Darkness). It mixes white, yellow, purple, blue tones and feels cool overall. The strongest text pairing is #EFF1C8 on #182740 with a contrast ratio of 12.89:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Race the Sun	rgb(239, 241, 200)	hsl(63, 59%, 86%)
Soda Pop	rgb(200, 194, 117)	hsl(56, 43%, 62%)
Aster	rgb(146, 121, 163)	hsl(276, 19%, 56%)
Sea Paint	rgb(16, 79, 129)	hsl(207, 78%, 28%)
Eternal Darkness	rgb(24, 39, 64)	hsl(218, 45%, 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.

Aa12.89:1 Super#EFF1C8 on #182740
Aa12.89:1 Super#182740 on #EFF1C8
Aa8.15:1 Very good#C8C275 on #182740
Aa8.15:1 Very good#182740 on #C8C275
Aa7.36:1 Very good#EFF1C8 on #104F81
Aa7.36:1 Very good#104F81 on #EFF1C8
Aa4.65:1 Good#C8C275 on #104F81
Aa4.65:1 Good#104F81 on #C8C275

Color blindness preview

CSS variables

/* Race the Sun to Eternal Darkness — https://swatchly.xyz/palette/eff1c8-c8c275-9279a3-104f81-182740 */
:root {
  --race-the-sun: #eff1c8;
  --soda-pop: #c8c275;
  --aster: #9279a3;
  --sea-paint: #104f81;
  --eternal-darkness: #182740;
}

Tailwind CSS v4

/* Race the Sun to Eternal Darkness — https://swatchly.xyz/palette/eff1c8-c8c275-9279a3-104f81-182740 */
@theme {
  --color-race-the-sun: #eff1c8;
  --color-race-the-sun-50: #f8f9e3;
  --color-race-the-sun-100: #eff1c8;
  --color-race-the-sun-200: #dadcbf;
  --color-race-the-sun-300: #c4c5a4;
  --color-race-the-sun-400: #a4a681;
  --color-race-the-sun-500: #898a64;
  --color-race-the-sun-600: #6e6f4b;
  --color-race-the-sun-700: #575837;
  --color-race-the-sun-800: #444528;
  --color-race-the-sun-900: #34351c;
  --color-race-the-sun-950: #20210f;
  --color-soda-pop: #c8c275;
  --color-soda-pop-50: #f9f6cc;
  --color-soda-pop-100: #efecbc;
  --color-soda-pop-200: #dcd99f;
  --color-soda-pop-300: #c8c275;
  --color-soda-pop-400: #a9a35a;
  --color-soda-pop-500: #8e873b;
  --color-soda-pop-600: #746d1f;
  --color-soda-pop-700: #5d5708;
  --color-soda-pop-800: #494400;
  --color-soda-pop-900: #393400;
  --color-soda-pop-950: #232000;
  --color-aster: #9279a3;
  --color-aster-50: #f9f1ff;
  --color-aster-100: #f3e3ff;
  --color-aster-200: #e2cef0;
  --color-aster-300: #ccb6dc;
  --color-aster-400: #ae95bf;
  --color-aster-500: #9279a3;
  --color-aster-600: #775f87;
  --color-aster-700: #604a6e;
  --color-aster-800: #4c3958;
  --color-aster-900: #3b2b45;
  --color-aster-950: #251a2d;
  --color-sea-paint: #104f81;
  --color-sea-paint-50: #eef6ff;
  --color-sea-paint-100: #dceeff;
  --color-sea-paint-200: #b5daff;
  --color-sea-paint-300: #8fc3f5;
  --color-sea-paint-400: #69a2d8;
  --color-sea-paint-500: #4a84ba;
  --color-sea-paint-600: #30689a;
  --color-sea-paint-700: #104f81;
  --color-sea-paint-800: #103d64;
  --color-sea-paint-900: #082f4f;
  --color-sea-paint-950: #031d33;
  --color-eternal-darkness: #182740;
  --color-eternal-darkness-50: #f0f6ff;
  --color-eternal-darkness-100: #e0ecff;
  --color-eternal-darkness-200: #c9d8f1;
  --color-eternal-darkness-300: #b1c2de;
  --color-eternal-darkness-400: #90a3c1;
  --color-eternal-darkness-500: #7689a7;
  --color-eternal-darkness-600: #5e708d;
  --color-eternal-darkness-700: #4a5a75;
  --color-eternal-darkness-800: #3a4960;
  --color-eternal-darkness-900: #2e3a4f;
  --color-eternal-darkness-950: #182740;
}