Femme Fatale to Underworld color palette

A1828FFemme Fatale 203D4BDepths of the Nile C6CBB5Tropical Fog 4D6E86Shipyard 22231BUnderworld

About this palette

Femme Fatale to Underworld is a 5-color muted palette: #A1828F (Femme Fatale), #203D4B (Depths of the Nile), #C6CBB5 (Tropical Fog), #4D6E86 (Shipyard), #22231B (Underworld). It mixes pink, blue, gray tones and feels cool overall. The strongest text pairing is #C6CBB5 on #22231B with a contrast ratio of 9.52:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Femme Fatale	rgb(161, 130, 143)	hsl(335, 14%, 57%)
Depths of the Nile	rgb(32, 61, 75)	hsl(200, 40%, 21%)
Tropical Fog	rgb(198, 203, 181)	hsl(74, 17%, 75%)
Shipyard	rgb(77, 110, 134)	hsl(205, 27%, 41%)
Underworld	rgb(34, 35, 27)	hsl(68, 13%, 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.

Aa9.52:1 Very good#C6CBB5 on #22231B
Aa9.52:1 Very good#22231B on #C6CBB5
Aa6.89:1 Good#203D4B on #C6CBB5
Aa6.89:1 Good#C6CBB5 on #203D4B
Aa4.61:1 Good#A1828F on #22231B
Aa4.61:1 Good#22231B on #A1828F
Aa3.34:1 Poor#A1828F on #203D4B
Aa3.34:1 Poor#203D4B on #A1828F

Color blindness preview

CSS variables

/* Femme Fatale to Underworld — https://swatchly.xyz/palette/a1828f-203d4b-c6cbb5-4d6e86-22231b */
:root {
  --femme-fatale: #a1828f;
  --depths-of-the-nile: #203d4b;
  --tropical-fog: #c6cbb5;
  --shipyard: #4d6e86;
  --underworld: #22231b;
}

Tailwind CSS v4

/* Femme Fatale to Underworld — https://swatchly.xyz/palette/a1828f-203d4b-c6cbb5-4d6e86-22231b */
@theme {
  --color-femme-fatale: #a1828f;
  --color-femme-fatale-50: #fff2f7;
  --color-femme-fatale-100: #fce7ef;
  --color-femme-fatale-200: #ecd3dd;
  --color-femme-fatale-300: #d8bcc8;
  --color-femme-fatale-400: #bb9da9;
  --color-femme-fatale-500: #a1828f;
  --color-femme-fatale-600: #846773;
  --color-femme-fatale-700: #6b505b;
  --color-femme-fatale-800: #543d47;
  --color-femme-fatale-900: #412e36;
  --color-femme-fatale-950: #291b21;
  --color-depths-of-the-nile: #203d4b;
  --color-depths-of-the-nile-50: #eaf8ff;
  --color-depths-of-the-nile-100: #daeffa;
  --color-depths-of-the-nile-200: #c3dce9;
  --color-depths-of-the-nile-300: #aac6d4;
  --color-depths-of-the-nile-400: #89a8b8;
  --color-depths-of-the-nile-500: #6f8e9e;
  --color-depths-of-the-nile-600: #567483;
  --color-depths-of-the-nile-700: #425e6c;
  --color-depths-of-the-nile-800: #334c58;
  --color-depths-of-the-nile-900: #203d4b;
  --color-depths-of-the-nile-950: #16262e;
  --color-tropical-fog: #c6cbb5;
  --color-tropical-fog-50: #f8faef;
  --color-tropical-fog-100: #eff2e5;
  --color-tropical-fog-200: #dce0d0;
  --color-tropical-fog-300: #c6cbb5;
  --color-tropical-fog-400: #a5aa96;
  --color-tropical-fog-500: #898d79;
  --color-tropical-fog-600: #6d725e;
  --color-tropical-fog-700: #565a48;
  --color-tropical-fog-800: #424536;
  --color-tropical-fog-900: #323427;
  --color-tropical-fog-950: #1e2017;
  --color-shipyard: #4d6e86;
  --color-shipyard-50: #ecf7ff;
  --color-shipyard-100: #d8eeff;
  --color-shipyard-200: #c0dbef;
  --color-shipyard-300: #a6c4db;
  --color-shipyard-400: #83a5be;
  --color-shipyard-500: #6789a2;
  --color-shipyard-600: #4d6e86;
  --color-shipyard-700: #3a576d;
  --color-shipyard-800: #2b4457;
  --color-shipyard-900: #1f3544;
  --color-shipyard-950: #11212c;
  --color-underworld: #22231b;
  --color-underworld-50: #f5f6f0;
  --color-underworld-100: #ebece5;
  --color-underworld-200: #d7d8d0;
  --color-underworld-300: #c1c2b9;
  --color-underworld-400: #a1a399;
  --color-underworld-500: #86887e;
  --color-underworld-600: #6d6e65;
  --color-underworld-700: #57584f;
  --color-underworld-800: #44453e;
  --color-underworld-900: #353630;
  --color-underworld-950: #22231b;
}