Underworld to Infinity and Beyond color palette

1E2013Underworld EAEFFAFirst Snow B5B3A1Ashes to Ashes 5B435CNightly Walk 6D7992Infinity and Beyond

About this palette

Underworld to Infinity and Beyond is a 5-color muted palette: #1E2013 (Underworld), #EAEFFA (First Snow), #B5B3A1 (Ashes to Ashes), #5B435C (Nightly Walk), #6D7992 (Infinity and Beyond). It mixes gray, white, purple, blue tones and feels cool overall. The strongest text pairing is #1E2013 on #EAEFFA with a contrast ratio of 14.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Underworld	rgb(30, 32, 19)	hsl(69, 25%, 10%)
First Snow	rgb(234, 239, 250)	hsl(221, 62%, 95%)
Ashes to Ashes	rgb(181, 179, 161)	hsl(54, 12%, 67%)
Nightly Walk	rgb(91, 67, 92)	hsl(298, 16%, 31%)
Infinity and Beyond	rgb(109, 121, 146)	hsl(221, 15%, 50%)

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.

Aa14.34:1 Super#1E2013 on #EAEFFA
Aa14.34:1 Super#EAEFFA on #1E2013
Aa7.81:1 Very good#1E2013 on #B5B3A1
Aa7.81:1 Very good#B5B3A1 on #1E2013
Aa7.59:1 Very good#EAEFFA on #5B435C
Aa7.59:1 Very good#5B435C on #EAEFFA
Aa4.13:1 Poor#B5B3A1 on #5B435C
Aa4.13:1 Poor#5B435C on #B5B3A1

Color blindness preview

CSS variables

/* Underworld to Infinity and Beyond — https://swatchly.xyz/palette/1e2013-eaeffa-b5b3a1-5b435c-6d7992 */
:root {
  --underworld: #1e2013;
  --first-snow: #eaeffa;
  --ashes-to-ashes: #b5b3a1;
  --nightly-walk: #5b435c;
  --infinity-and-beyond: #6d7992;
}

Tailwind CSS v4

/* Underworld to Infinity and Beyond — https://swatchly.xyz/palette/1e2013-eaeffa-b5b3a1-5b435c-6d7992 */
@theme {
  --color-underworld: #1e2013;
  --color-underworld-50: #f4f6ed;
  --color-underworld-100: #eaece2;
  --color-underworld-200: #d7d9cc;
  --color-underworld-300: #c0c3b4;
  --color-underworld-400: #a1a394;
  --color-underworld-500: #858878;
  --color-underworld-600: #6b6d5e;
  --color-underworld-700: #545749;
  --color-underworld-800: #414337;
  --color-underworld-900: #323329;
  --color-underworld-950: #1e2013;
  --color-first-snow: #eaeffa;
  --color-first-snow-50: #f6f8fe;
  --color-first-snow-100: #eaeffa;
  --color-first-snow-200: #d7dbe2;
  --color-first-snow-300: #bfc3cc;
  --color-first-snow-400: #9fa3ad;
  --color-first-snow-500: #838791;
  --color-first-snow-600: #686c76;
  --color-first-snow-700: #51555e;
  --color-first-snow-800: #3f424a;
  --color-first-snow-900: #303339;
  --color-first-snow-950: #1d1f24;
  --color-ashes-to-ashes: #b5b3a1;
  --color-ashes-to-ashes-50: #efeee3;
  --color-ashes-to-ashes-100: #e3e2d5;
  --color-ashes-to-ashes-200: #cdccbd;
  --color-ashes-to-ashes-300: #b5b3a1;
  --color-ashes-to-ashes-400: #989685;
  --color-ashes-to-ashes-500: #807e6d;
  --color-ashes-to-ashes-600: #686656;
  --color-ashes-to-ashes-700: #535243;
  --color-ashes-to-ashes-800: #424134;
  --color-ashes-to-ashes-900: #353328;
  --color-ashes-to-ashes-950: #212018;
  --color-nightly-walk: #5b435c;
  --color-nightly-walk-50: #ffefff;
  --color-nightly-walk-100: #f7e4f7;
  --color-nightly-walk-200: #e3cee4;
  --color-nightly-walk-300: #cdb4cd;
  --color-nightly-walk-400: #ad92ae;
  --color-nightly-walk-500: #907691;
  --color-nightly-walk-600: #735b74;
  --color-nightly-walk-700: #5b435c;
  --color-nightly-walk-800: #473447;
  --color-nightly-walk-900: #372737;
  --color-nightly-walk-950: #221723;
  --color-infinity-and-beyond: #6d7992;
  --color-infinity-and-beyond-50: #edf3ff;
  --color-infinity-and-beyond-100: #dee6f9;
  --color-infinity-and-beyond-200: #c6d0e6;
  --color-infinity-and-beyond-300: #acb8d0;
  --color-infinity-and-beyond-400: #8a96b0;
  --color-infinity-and-beyond-500: #6d7992;
  --color-infinity-and-beyond-600: #566178;
  --color-infinity-and-beyond-700: #434d62;
  --color-infinity-and-beyond-800: #343c4e;
  --color-infinity-and-beyond-900: #282f3e;
  --color-infinity-and-beyond-950: #181d28;
}