Pitch-Black Forests to Frozen Forest color palette

003721Pitch-Black Forests 425600Deep Forestial Escapade 009E8FGreen Dynasty 52C794Vegetation CFE3AAFrozen Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Pitch-Black Forests to Frozen Forest is a 5-color cool, earthy, gradient palette: #003721 (Pitch-Black Forests), #425600 (Deep Forestial Escapade), #009E8F (Green Dynasty), #52C794 (Vegetation), #CFE3AA (Frozen Forest). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #003721 on #CFE3AA with a contrast ratio of 9.70:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pitch-Black Forests	rgb(0, 55, 33)	hsl(156, 100%, 11%)
Deep Forestial Escapade	rgb(66, 86, 0)	hsl(74, 100%, 17%)
Green Dynasty	rgb(0, 158, 143)	hsl(174, 100%, 31%)
Vegetation	rgb(82, 199, 148)	hsl(154, 51%, 55%)
Frozen Forest	rgb(207, 227, 170)	hsl(81, 50%, 78%)

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.70:1 Very good#003721 on #CFE3AA
Aa9.70:1 Very good#CFE3AA on #003721
Aa6.35:1 Good#003721 on #52C794
Aa6.35:1 Good#52C794 on #003721
Aa5.94:1 Good#425600 on #CFE3AA
Aa5.94:1 Good#CFE3AA on #425600
Aa4.01:1 Poor#003721 on #009E8F
Aa4.01:1 Poor#009E8F on #003721

Color blindness preview

CSS variables

/* Pitch-Black Forests to Frozen Forest — https://swatchly.xyz/palette/003721-425600-009e8f-52c794-cfe3aa */
:root {
  --pitch-black-forests: #003721;
  --deep-forestial-escapade: #425600;
  --green-dynasty: #009e8f;
  --vegetation: #52c794;
  --frozen-forest: #cfe3aa;
}

Tailwind CSS v4

/* Pitch-Black Forests to Frozen Forest — https://swatchly.xyz/palette/003721-425600-009e8f-52c794-cfe3aa */
@theme {
  --color-pitch-black-forests: #003721;
  --color-pitch-black-forests-50: #e1fded;
  --color-pitch-black-forests-100: #d4f4e2;
  --color-pitch-black-forests-200: #bce2cc;
  --color-pitch-black-forests-300: #a1cdb4;
  --color-pitch-black-forests-400: #7dad92;
  --color-pitch-black-forests-500: #5f9176;
  --color-pitch-black-forests-600: #45745b;
  --color-pitch-black-forests-700: #305c45;
  --color-pitch-black-forests-800: #214633;
  --color-pitch-black-forests-900: #003721;
  --color-pitch-black-forests-950: #0a2015;
  --color-deep-forestial-escapade: #425600;
  --color-deep-forestial-escapade-50: #edfcd2;
  --color-deep-forestial-escapade-100: #e2f3c4;
  --color-deep-forestial-escapade-200: #cbdfa6;
  --color-deep-forestial-escapade-300: #b2c887;
  --color-deep-forestial-escapade-400: #90a85f;
  --color-deep-forestial-escapade-500: #748b40;
  --color-deep-forestial-escapade-600: #596e26;
  --color-deep-forestial-escapade-700: #425600;
  --color-deep-forestial-escapade-800: #334305;
  --color-deep-forestial-escapade-900: #273401;
  --color-deep-forestial-escapade-950: #172000;
  --color-green-dynasty: #009e8f;
  --color-green-dynasty-50: #d9fff8;
  --color-green-dynasty-100: #b9fcf0;
  --color-green-dynasty-200: #99ebde;
  --color-green-dynasty-300: #76d7c8;
  --color-green-dynasty-400: #44b9aa;
  --color-green-dynasty-500: #009e8f;
  --color-green-dynasty-600: #007f73;
  --color-green-dynasty-700: #00655b;
  --color-green-dynasty-800: #004f47;
  --color-green-dynasty-900: #003d36;
  --color-green-dynasty-950: #002622;
  --color-vegetation: #52c794;
  --color-vegetation-50: #ecfff4;
  --color-vegetation-100: #cfffe5;
  --color-vegetation-200: #a9f3ce;
  --color-vegetation-300: #89e1b6;
  --color-vegetation-400: #52c794;
  --color-vegetation-500: #2da877;
  --color-vegetation-600: #00895d;
  --color-vegetation-700: #006c48;
  --color-vegetation-800: #005437;
  --color-vegetation-900: #004029;
  --color-vegetation-950: #002717;
  --color-frozen-forest: #cfe3aa;
  --color-frozen-forest-50: #f1fcdd;
  --color-frozen-forest-100: #e6f3d0;
  --color-frozen-forest-200: #cfe3aa;
  --color-frozen-forest-300: #baca9b;
  --color-frozen-forest-400: #99ab77;
  --color-frozen-forest-500: #7e8f5a;
  --color-frozen-forest-600: #637441;
  --color-frozen-forest-700: #4d5c2d;
  --color-frozen-forest-800: #3b481e;
  --color-frozen-forest-900: #2d3814;
  --color-frozen-forest-950: #1b2309;
}