Start generating

Darkest Forest to Love Fumes color palette

23380EDarkest Forest233D60Nautilus617A4BGhoulCB6370Fuzzy Wuzzy98A8D0Old WorldFFCECFLove Fumes
Open in generator Export PNG, PDF, ASE…

About this palette

Darkest Forest to Love Fumes is a 6-color cool palette: #23380E (Darkest Forest), #233D60 (Nautilus), #617A4B (Ghoul), #CB6370 (Fuzzy Wuzzy), #98A8D0 (Old World), #FFCECF (Love Fumes). It mixes green, blue, red, pink tones and feels cool overall. The strongest text pairing is #23380E on #FFCECF with a contrast ratio of 9.12:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Darkest Forestrgb(35, 56, 14)hsl(90, 60%, 14%)
Nautilusrgb(35, 61, 96)hsl(214, 47%, 26%)
Ghoulrgb(97, 122, 75)hsl(92, 24%, 39%)
Fuzzy Wuzzyrgb(203, 99, 112)hsl(352, 50%, 59%)
Old Worldrgb(152, 168, 208)hsl(223, 37%, 71%)
Love Fumesrgb(255, 206, 207)hsl(359, 100%, 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.

  • Aa9.12:1 Very good#23380E on #FFCECF
  • Aa9.12:1 Very good#FFCECF on #23380E
  • Aa7.85:1 Very good#233D60 on #FFCECF
  • Aa7.85:1 Very good#FFCECF on #233D60
  • Aa5.38:1 Good#23380E on #98A8D0
  • Aa5.38:1 Good#98A8D0 on #23380E
  • Aa4.64:1 Good#233D60 on #98A8D0
  • Aa4.64:1 Good#98A8D0 on #233D60

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Darkest Forest to Love Fumes — https://swatchly.xyz/palette/23380e-233d60-617a4b-cb6370-98a8d0-ffcecf */
:root {
  --darkest-forest: #23380e;
  --nautilus: #233d60;
  --ghoul: #617a4b;
  --fuzzy-wuzzy: #cb6370;
  --old-world: #98a8d0;
  --love-fumes: #ffcecf;
}

Tailwind CSS v4

/* Darkest Forest to Love Fumes — https://swatchly.xyz/palette/23380e-233d60-617a4b-cb6370-98a8d0-ffcecf */
@theme {
  --color-darkest-forest: #23380e;
  --color-darkest-forest-50: #ecfbe0;
  --color-darkest-forest-100: #e1f2d4;
  --color-darkest-forest-200: #cbdfbc;
  --color-darkest-forest-300: #b3caa2;
  --color-darkest-forest-400: #92aa7e;
  --color-darkest-forest-500: #768f62;
  --color-darkest-forest-600: #5c7349;
  --color-darkest-forest-700: #465b35;
  --color-darkest-forest-800: #354726;
  --color-darkest-forest-900: #23380e;
  --color-darkest-forest-950: #17220d;
  --color-nautilus: #233d60;
  --color-nautilus-50: #eff6ff;
  --color-nautilus-100: #dfecff;
  --color-nautilus-200: #c2dafa;
  --color-nautilus-300: #a7c2e6;
  --color-nautilus-400: #84a1c9;
  --color-nautilus-500: #6885ac;
  --color-nautilus-600: #4e698e;
  --color-nautilus-700: #395172;
  --color-nautilus-800: #233d60;
  --color-nautilus-900: #1d2f46;
  --color-nautilus-950: #101c2d;
  --color-ghoul: #617a4b;
  --color-ghoul-50: #ebfbdf;
  --color-ghoul-100: #e1f3d3;
  --color-ghoul-200: #cde1bc;
  --color-ghoul-300: #b5cda2;
  --color-ghoul-400: #95af80;
  --color-ghoul-500: #7a9464;
  --color-ghoul-600: #617a4b;
  --color-ghoul-700: #4b6137;
  --color-ghoul-800: #394d27;
  --color-ghoul-900: #2a3b1b;
  --color-ghoul-950: #19250e;
  --color-fuzzy-wuzzy: #cb6370;
  --color-fuzzy-wuzzy-50: #fff2f3;
  --color-fuzzy-wuzzy-100: #ffe5e6;
  --color-fuzzy-wuzzy-200: #ffc9cc;
  --color-fuzzy-wuzzy-300: #ffa6ae;
  --color-fuzzy-wuzzy-400: #e7808b;
  --color-fuzzy-wuzzy-500: #cb6370;
  --color-fuzzy-wuzzy-600: #ab4856;
  --color-fuzzy-wuzzy-700: #8e3342;
  --color-fuzzy-wuzzy-800: #732331;
  --color-fuzzy-wuzzy-900: #5b1724;
  --color-fuzzy-wuzzy-950: #3c0b14;
  --color-old-world: #98a8d0;
  --color-old-world-50: #f5f8ff;
  --color-old-world-100: #e8efff;
  --color-old-world-200: #d0dcfa;
  --color-old-world-300: #b9c7e9;
  --color-old-world-400: #98a8d0;
  --color-old-world-500: #7c8bb2;
  --color-old-world-600: #616f94;
  --color-old-world-700: #4b5779;
  --color-old-world-800: #384361;
  --color-old-world-900: #2a334b;
  --color-old-world-950: #181f30;
  --color-love-fumes: #ffcecf;
  --color-love-fumes-50: #fff6f6;
  --color-love-fumes-100: #ffe9e9;
  --color-love-fumes-200: #ffcecf;
  --color-love-fumes-300: #e1b9ba;
  --color-love-fumes-400: #c49899;
  --color-love-fumes-500: #a77b7c;
  --color-love-fumes-600: #8a6062;
  --color-love-fumes-700: #704a4c;
  --color-love-fumes-800: #593839;
  --color-love-fumes-900: #462a2b;
  --color-love-fumes-950: #2d191a;
}

Similar palettes