Pitch-Black Forests to Frosted Fir color palette

052F1EPitch-Black Forests 005E3FEvergreen 358058Amazon 5DB582Bleached Olive B2D7BCFrosted Fir

About this palette

Pitch-Black Forests to Frosted Fir is a 5-color cool, earthy, monochromatic, gradient palette: #052F1E (Pitch-Black Forests), #005E3F (Evergreen), #358058 (Amazon), #5DB582 (Bleached Olive), #B2D7BC (Frosted Fir). It mixes green tones and feels cool overall. The strongest text pairing is #052F1E on #B2D7BC with a contrast ratio of 9.32:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pitch-Black Forests	rgb(5, 47, 30)	hsl(156, 81%, 10%)
Evergreen	rgb(0, 94, 63)	hsl(160, 100%, 18%)
Amazon	rgb(53, 128, 88)	hsl(148, 41%, 35%)
Bleached Olive	rgb(93, 181, 130)	hsl(145, 37%, 54%)
Frosted Fir	rgb(178, 215, 188)	hsl(136, 32%, 77%)

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.32:1 Very good#052F1E on #B2D7BC
Aa9.32:1 Very good#B2D7BC on #052F1E
Aa5.86:1 Good#052F1E on #5DB582
Aa5.86:1 Good#5DB582 on #052F1E
Aa4.99:1 Good#005E3F on #B2D7BC
Aa4.99:1 Good#B2D7BC on #005E3F
Aa3.14:1 Poor#005E3F on #5DB582
Aa3.14:1 Poor#5DB582 on #005E3F

Color blindness preview

CSS variables

/* Pitch-Black Forests to Frosted Fir — https://swatchly.xyz/palette/052f1e-005e3f-358058-5db582-b2d7bc */
:root {
  --pitch-black-forests: #052f1e;
  --evergreen: #005e3f;
  --amazon: #358058;
  --bleached-olive: #5db582;
  --frosted-fir: #b2d7bc;
}

Tailwind CSS v4

/* Pitch-Black Forests to Frosted Fir — https://swatchly.xyz/palette/052f1e-005e3f-358058-5db582-b2d7bc */
@theme {
  --color-pitch-black-forests: #052f1e;
  --color-pitch-black-forests-50: #e4fcef;
  --color-pitch-black-forests-100: #d8f3e4;
  --color-pitch-black-forests-200: #c1e0cf;
  --color-pitch-black-forests-300: #a7cbb7;
  --color-pitch-black-forests-400: #84ac97;
  --color-pitch-black-forests-500: #6a937d;
  --color-pitch-black-forests-600: #527965;
  --color-pitch-black-forests-700: #3e6350;
  --color-pitch-black-forests-800: #2f5040;
  --color-pitch-black-forests-900: #244132;
  --color-pitch-black-forests-950: #052f1e;
  --color-evergreen: #005e3f;
  --color-evergreen-50: #dcffec;
  --color-evergreen-100: #caf8e0;
  --color-evergreen-200: #ade5c9;
  --color-evergreen-300: #8ecfaf;
  --color-evergreen-400: #67b08d;
  --color-evergreen-500: #479371;
  --color-evergreen-600: #2b7656;
  --color-evergreen-700: #005e3f;
  --color-evergreen-800: #064931;
  --color-evergreen-900: #003925;
  --color-evergreen-950: #002315;
  --color-amazon: #358058;
  --color-amazon-50: #ddffe9;
  --color-amazon-100: #ccf9dc;
  --color-amazon-200: #b2e8c6;
  --color-amazon-300: #95d3ae;
  --color-amazon-400: #70b68d;
  --color-amazon-500: #519b71;
  --color-amazon-600: #358058;
  --color-amazon-700: #206743;
  --color-amazon-800: #105132;
  --color-amazon-900: #053f25;
  --color-amazon-950: #012815;
  --color-bleached-olive: #5db582;
  --color-bleached-olive-50: #dbffe7;
  --color-bleached-olive-100: #c4f9d7;
  --color-bleached-olive-200: #a8e8bf;
  --color-bleached-olive-300: #89d3a5;
  --color-bleached-olive-400: #5db582;
  --color-bleached-olive-500: #409968;
  --color-bleached-olive-600: #227d4f;
  --color-bleached-olive-700: #06653b;
  --color-bleached-olive-800: #00502d;
  --color-bleached-olive-900: #003e21;
  --color-bleached-olive-950: #002713;
  --color-frosted-fir: #b2d7bc;
  --color-frosted-fir-50: #f2fff5;
  --color-frosted-fir-100: #e4f9ea;
  --color-frosted-fir-200: #cfe9d6;
  --color-frosted-fir-300: #b2d7bc;
  --color-frosted-fir-400: #93b49c;
  --color-frosted-fir-500: #74977e;
  --color-frosted-fir-600: #597a62;
  --color-frosted-fir-700: #42614b;
  --color-frosted-fir-800: #304b38;
  --color-frosted-fir-900: #223929;
  --color-frosted-fir-950: #132418;
}