Pitch-Black Forests to Snowy Mint Color Palette

About this palette

Pitch-Black Forests to Snowy Mint is a 5-color cool, earthy, monochromatic, gradient palette: #182D1B (Pitch-Black Forests), #2E4927 (Forestry), #5F7C5A (Emerald City), #92BF99 (Norway), #D2F6D1 (Snowy Mint). It mixes green tones and feels cool overall. The strongest text pairing is #182D1B on #D2F6D1 with a contrast ratio of 12.48:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pitch-Black Forests	rgb(24, 45, 27)	hsl(129, 30%, 14%)
Forestry	rgb(46, 73, 39)	hsl(108, 30%, 22%)
Emerald City	rgb(95, 124, 90)	hsl(111, 16%, 42%)
Norway	rgb(146, 191, 153)	hsl(129, 26%, 66%)
Snowy Mint	rgb(210, 246, 209)	hsl(118, 67%, 89%)

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.48:1 Super#182D1B on #D2F6D1
Aa12.48:1 Super#D2F6D1 on #182D1B
Aa8.50:1 Very good#2E4927 on #D2F6D1
Aa8.50:1 Very good#D2F6D1 on #2E4927
Aa7.09:1 Very good#182D1B on #92BF99
Aa7.09:1 Very good#92BF99 on #182D1B
Aa4.83:1 Good#2E4927 on #92BF99
Aa4.83:1 Good#92BF99 on #2E4927

Color blindness preview

CSS variables

/* Pitch-Black Forests to Snowy Mint — https://swatchly.xyz/palette/182d1b-2e4927-5f7c5a-92bf99-d2f6d1 */
:root {
  --pitch-black-forests: #182d1b;
  --forestry: #2e4927;
  --emerald-city: #5f7c5a;
  --norway: #92bf99;
  --snowy-mint: #d2f6d1;
}

Tailwind CSS v4

/* Pitch-Black Forests to Snowy Mint — https://swatchly.xyz/palette/182d1b-2e4927-5f7c5a-92bf99-d2f6d1 */
@theme {
  --color-pitch-black-forests: #182d1b;
  --color-pitch-black-forests-50: #ebfaec;
  --color-pitch-black-forests-100: #e0f0e1;
  --color-pitch-black-forests-200: #cadecc;
  --color-pitch-black-forests-300: #b2c8b4;
  --color-pitch-black-forests-400: #91a993;
  --color-pitch-black-forests-500: #778f79;
  --color-pitch-black-forests-600: #5f7661;
  --color-pitch-black-forests-700: #4b604d;
  --color-pitch-black-forests-800: #3b4e3d;
  --color-pitch-black-forests-900: #2e3f30;
  --color-pitch-black-forests-950: #182d1b;
  --color-forestry: #2e4927;
  --color-forestry-50: #e9fbe5;
  --color-forestry-100: #def2d9;
  --color-forestry-200: #c8e0c2;
  --color-forestry-300: #afcaa8;
  --color-forestry-400: #8dab86;
  --color-forestry-500: #718f6a;
  --color-forestry-600: #577450;
  --color-forestry-700: #425c3c;
  --color-forestry-800: #2e4927;
  --color-forestry-900: #253720;
  --color-forestry-950: #152212;
  --color-emerald-city: #5f7c5a;
  --color-emerald-city-50: #e9fbe6;
  --color-emerald-city-100: #dff3dc;
  --color-emerald-city-200: #cbe2c7;
  --color-emerald-city-300: #b3ceae;
  --color-emerald-city-400: #93b08e;
  --color-emerald-city-500: #789673;
  --color-emerald-city-600: #5f7c5a;
  --color-emerald-city-700: #496344;
  --color-emerald-city-800: #374e33;
  --color-emerald-city-900: #283c25;
  --color-emerald-city-950: #172515;
  --color-norway: #92bf99;
  --color-norway-50: #daf6de;
  --color-norway-100: #cbeacf;
  --color-norway-200: #b1d6b6;
  --color-norway-300: #92bf99;
  --color-norway-400: #77a27e;
  --color-norway-500: #5e8965;
  --color-norway-600: #47704f;
  --color-norway-700: #365b3d;
  --color-norway-800: #28492f;
  --color-norway-900: #1e3a24;
  --color-norway-950: #102514;
  --color-snowy-mint: #d2f6d1;
  --color-snowy-mint-50: #e7fbe6;
  --color-snowy-mint-100: #d2f6d1;
  --color-snowy-mint-200: #c5dfc4;
  --color-snowy-mint-300: #accaab;
  --color-snowy-mint-400: #8bab8a;
  --color-snowy-mint-500: #6f906f;
  --color-snowy-mint-600: #567555;
  --color-snowy-mint-700: #415e41;
  --color-snowy-mint-800: #314a31;
  --color-snowy-mint-900: #243924;
  --color-snowy-mint-950: #142414;
}