Underworld to Dark Forest Color Palette

About this palette

Underworld to Dark Forest is a 4-color muted palette: #19251B (Underworld), #DEEBE3 (Pastel Smirk), #79A48B (Vineyard), #546C5C (Dark Forest). It mixes gray, green tones and feels cool overall. The strongest text pairing is #19251B on #DEEBE3 with a contrast ratio of 12.94:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Underworld	rgb(25, 37, 27)	hsl(130, 19%, 12%)
Pastel Smirk	rgb(222, 235, 227)	hsl(143, 25%, 90%)
Vineyard	rgb(121, 164, 139)	hsl(145, 19%, 56%)
Dark Forest	rgb(84, 108, 92)	hsl(140, 12%, 38%)

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.

Aa12.94:1 Super#19251B on #DEEBE3
Aa12.94:1 Super#DEEBE3 on #19251B
Aa5.67:1 Good#19251B on #79A48B
Aa5.67:1 Good#79A48B on #19251B
Aa4.65:1 Good#DEEBE3 on #546C5C
Aa4.65:1 Good#546C5C on #DEEBE3

Color blindness preview

CSS variables

/* Underworld to Dark Forest — https://swatchly.xyz/palette/19251b-deebe3-79a48b-546c5c */
:root {
  --underworld: #19251b;
  --pastel-smirk: #deebe3;
  --vineyard: #79a48b;
  --dark-forest: #546c5c;
}

Tailwind CSS v4

/* Underworld to Dark Forest — https://swatchly.xyz/palette/19251b-deebe3-79a48b-546c5c */
@theme {
  --color-underworld: #19251b;
  --color-underworld-50: #eff8f0;
  --color-underworld-100: #e4eee6;
  --color-underworld-200: #cfdbd1;
  --color-underworld-300: #b8c5ba;
  --color-underworld-400: #98a69a;
  --color-underworld-500: #7d8b7f;
  --color-underworld-600: #637165;
  --color-underworld-700: #4e5a50;
  --color-underworld-800: #3c473e;
  --color-underworld-900: #2e3830;
  --color-underworld-950: #19251b;
  --color-pastel-smirk: #deebe3;
  --color-pastel-smirk-50: #ecf4ef;
  --color-pastel-smirk-100: #deebe3;
  --color-pastel-smirk-200: #cdd7d1;
  --color-pastel-smirk-300: #b7c1bb;
  --color-pastel-smirk-400: #97a39c;
  --color-pastel-smirk-500: #7d8881;
  --color-pastel-smirk-600: #636e68;
  --color-pastel-smirk-700: #4e5852;
  --color-pastel-smirk-800: #3c4540;
  --color-pastel-smirk-900: #2d3530;
  --color-pastel-smirk-950: #1b211e;
  --color-vineyard: #79a48b;
  --color-vineyard-50: #e0f9ea;
  --color-vineyard-100: #d2efdd;
  --color-vineyard-200: #b8dbc6;
  --color-vineyard-300: #9dc4ad;
  --color-vineyard-400: #79a48b;
  --color-vineyard-500: #608a72;
  --color-vineyard-600: #48705a;
  --color-vineyard-700: #365a46;
  --color-vineyard-800: #284836;
  --color-vineyard-900: #1d3829;
  --color-vineyard-950: #102419;
  --color-dark-forest: #546c5c;
  --color-dark-forest-50: #ebfaef;
  --color-dark-forest-100: #deefe3;
  --color-dark-forest-200: #c7dbcd;
  --color-dark-forest-300: #adc4b4;
  --color-dark-forest-400: #8ba493;
  --color-dark-forest-500: #6f8877;
  --color-dark-forest-600: #546c5c;
  --color-dark-forest-700: #415648;
  --color-dark-forest-800: #314337;
  --color-dark-forest-900: #25342a;
  --color-dark-forest-950: #152019;
}