Underworld to Mimosa Color Palette

About this palette

Underworld to Mimosa is a 4-color muted, gradient palette: #272119 (Underworld), #4B5874 (Deep Indigo), #90A0C7 (High Tide), #F6E8D4 (Mimosa). It mixes gray, blue, white tones and feels cool overall. The strongest text pairing is #272119 on #F6E8D4 with a contrast ratio of 13.21:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Underworld	rgb(39, 33, 25)	hsl(34, 22%, 13%)
Deep Indigo	rgb(75, 88, 116)	hsl(221, 21%, 37%)
High Tide	rgb(144, 160, 199)	hsl(223, 33%, 67%)
Mimosa	rgb(246, 232, 212)	hsl(35, 65%, 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.

Aa13.21:1 Super#272119 on #F6E8D4
Aa13.21:1 Super#F6E8D4 on #272119
Aa6.10:1 Good#272119 on #90A0C7
Aa6.10:1 Good#90A0C7 on #272119
Aa5.91:1 Good#4B5874 on #F6E8D4
Aa5.91:1 Good#F6E8D4 on #4B5874

Color blindness preview

CSS variables

/* Underworld to Mimosa — https://swatchly.xyz/palette/272119-4b5874-90a0c7-f6e8d4 */
:root {
  --underworld: #272119;
  --deep-indigo: #4b5874;
  --high-tide: #90a0c7;
  --mimosa: #f6e8d4;
}

Tailwind CSS v4

/* Underworld to Mimosa — https://swatchly.xyz/palette/272119-4b5874-90a0c7-f6e8d4 */
@theme {
  --color-underworld: #272119;
  --color-underworld-50: #f9f4ee;
  --color-underworld-100: #efeae4;
  --color-underworld-200: #dcd6cf;
  --color-underworld-300: #c7c0b7;
  --color-underworld-400: #a8a096;
  --color-underworld-500: #8d857c;
  --color-underworld-600: #736c62;
  --color-underworld-700: #5c564d;
  --color-underworld-800: #49433c;
  --color-underworld-900: #39352e;
  --color-underworld-950: #272119;
  --color-deep-indigo: #4b5874;
  --color-deep-indigo-50: #f0f5ff;
  --color-deep-indigo-100: #e2ebff;
  --color-deep-indigo-200: #cdd8f1;
  --color-deep-indigo-300: #b5c2de;
  --color-deep-indigo-400: #95a3c1;
  --color-deep-indigo-500: #7a88a6;
  --color-deep-indigo-600: #616e8b;
  --color-deep-indigo-700: #4b5874;
  --color-deep-indigo-800: #3a455b;
  --color-deep-indigo-900: #2b3448;
  --color-deep-indigo-950: #1a202e;
  --color-high-tide: #90a0c7;
  --color-high-tide-50: #f0f5ff;
  --color-high-tide-100: #e2ebff;
  --color-high-tide-200: #cad7f5;
  --color-high-tide-300: #b1c0e2;
  --color-high-tide-400: #90a0c7;
  --color-high-tide-500: #7585aa;
  --color-high-tide-600: #5c6a8e;
  --color-high-tide-700: #475474;
  --color-high-tide-800: #36415d;
  --color-high-tide-900: #29324a;
  --color-high-tide-950: #181f30;
  --color-mimosa: #f6e8d4;
  --color-mimosa-50: #fbf3e8;
  --color-mimosa-100: #f6e8d4;
  --color-mimosa-200: #dfd5c6;
  --color-mimosa-300: #cabeae;
  --color-mimosa-400: #ac9f8d;
  --color-mimosa-500: #908472;
  --color-mimosa-600: #766a58;
  --color-mimosa-700: #5e5344;
  --color-mimosa-800: #4a4133;
  --color-mimosa-900: #393126;
  --color-mimosa-950: #241e16;
}