Iridescent to Underworld color palette

3E5B53Iridescent D6B7C6Mauvelous BB91A4Classy Mauve 477B70Turquoise Tortoise 182320Underworld

About this palette

Iridescent to Underworld is a 5-color muted, vintage palette: #3E5B53 (Iridescent), #D6B7C6 (Mauvelous), #BB91A4 (Classy Mauve), #477B70 (Turquoise Tortoise), #182320 (Underworld). It mixes turquoise, pink, gray tones and feels balanced overall. The strongest text pairing is #D6B7C6 on #182320 with a contrast ratio of 8.81:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Iridescent	rgb(62, 91, 83)	hsl(163, 19%, 30%)
Mauvelous	rgb(214, 183, 198)	hsl(331, 27%, 78%)
Classy Mauve	rgb(187, 145, 164)	hsl(333, 24%, 65%)
Turquoise Tortoise	rgb(71, 123, 112)	hsl(167, 27%, 38%)
Underworld	rgb(24, 35, 32)	hsl(164, 19%, 12%)

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.

Aa8.81:1 Very good#D6B7C6 on #182320
Aa8.81:1 Very good#182320 on #D6B7C6
Aa5.92:1 Good#BB91A4 on #182320
Aa5.92:1 Good#182320 on #BB91A4
Aa4.05:1 Poor#3E5B53 on #D6B7C6
Aa4.05:1 Poor#D6B7C6 on #3E5B53
Aa3.33:1 Poor#477B70 on #182320
Aa3.33:1 Poor#182320 on #477B70

Color blindness preview

CSS variables

/* Iridescent to Underworld — https://swatchly.xyz/palette/3e5b53-d6b7c6-bb91a4-477b70-182320 */
:root {
  --iridescent: #3e5b53;
  --mauvelous: #d6b7c6;
  --classy-mauve: #bb91a4;
  --turquoise-tortoise: #477b70;
  --underworld: #182320;
}

Tailwind CSS v4

/* Iridescent to Underworld — https://swatchly.xyz/palette/3e5b53-d6b7c6-bb91a4-477b70-182320 */
@theme {
  --color-iridescent: #3e5b53;
  --color-iridescent-50: #e8faf4;
  --color-iridescent-100: #dcf0ea;
  --color-iridescent-200: #c5ded6;
  --color-iridescent-300: #acc8bf;
  --color-iridescent-400: #8aa8a0;
  --color-iridescent-500: #6e8d84;
  --color-iridescent-600: #55726a;
  --color-iridescent-700: #3e5b53;
  --color-iridescent-800: #304741;
  --color-iridescent-900: #233731;
  --color-iridescent-950: #14221e;
  --color-mauvelous: #d6b7c6;
  --color-mauvelous-50: #fff1f7;
  --color-mauvelous-100: #f9e5ee;
  --color-mauvelous-200: #e8d0db;
  --color-mauvelous-300: #d6b7c6;
  --color-mauvelous-400: #b598a6;
  --color-mauvelous-500: #9a7d8b;
  --color-mauvelous-600: #7e6370;
  --color-mauvelous-700: #664d59;
  --color-mauvelous-800: #503b46;
  --color-mauvelous-900: #3f2d36;
  --color-mauvelous-950: #281b21;
  --color-classy-mauve: #bb91a4;
  --color-classy-mauve-50: #ffeff6;
  --color-classy-mauve-100: #fde1ed;
  --color-classy-mauve-200: #edcbda;
  --color-classy-mauve-300: #d8b2c3;
  --color-classy-mauve-400: #bb91a4;
  --color-classy-mauve-500: #9f7689;
  --color-classy-mauve-600: #835d6f;
  --color-classy-mauve-700: #6a4858;
  --color-classy-mauve-800: #553745;
  --color-classy-mauve-900: #432a36;
  --color-classy-mauve-950: #2b1921;
  --color-turquoise-tortoise: #477b70;
  --color-turquoise-tortoise-50: #dffdf5;
  --color-turquoise-tortoise-100: #d3f4ec;
  --color-turquoise-tortoise-200: #bbe3d9;
  --color-turquoise-tortoise-300: #a1cec3;
  --color-turquoise-tortoise-400: #7eb0a5;
  --color-turquoise-tortoise-500: #61958a;
  --color-turquoise-tortoise-600: #477b70;
  --color-turquoise-tortoise-700: #336259;
  --color-turquoise-tortoise-800: #234e45;
  --color-turquoise-tortoise-900: #173c35;
  --color-turquoise-tortoise-950: #0b2620;
  --color-underworld: #182320;
  --color-underworld-50: #eff7f5;
  --color-underworld-100: #e4edeb;
  --color-underworld-200: #d0dad7;
  --color-underworld-300: #b8c4c0;
  --color-underworld-400: #98a5a1;
  --color-underworld-500: #7d8a86;
  --color-underworld-600: #636f6c;
  --color-underworld-700: #4d5955;
  --color-underworld-800: #3c4643;
  --color-underworld-900: #2d3633;
  --color-underworld-950: #182320;
}