Darkest Forest to Race the Sun Color Palette

About this palette

Darkest Forest to Race the Sun is a 4-color cool, earthy, monochromatic, gradient palette: #253409 (Darkest Forest), #556A40 (Under the Radar), #99AA5D (Springtide Melodies), #E8F2CE (Race the Sun). It mixes green, white tones and feels cool overall. The strongest text pairing is #253409 on #E8F2CE with a contrast ratio of 11.45:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darkest Forest	rgb(37, 52, 9)	hsl(81, 70%, 12%)
Under the Radar	rgb(85, 106, 64)	hsl(90, 25%, 33%)
Springtide Melodies	rgb(153, 170, 93)	hsl(73, 31%, 52%)
Race the Sun	rgb(232, 242, 206)	hsl(77, 58%, 88%)

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.

Aa11.45:1 Very good#253409 on #E8F2CE
Aa11.45:1 Very good#E8F2CE on #253409
Aa5.25:1 Good#253409 on #99AA5D
Aa5.25:1 Good#99AA5D on #253409
Aa5.12:1 Good#556A40 on #E8F2CE
Aa5.12:1 Good#E8F2CE on #556A40

Color blindness preview

CSS variables

/* Darkest Forest to Race the Sun — https://swatchly.xyz/palette/253409-556a40-99aa5d-e8f2ce */
:root {
  --darkest-forest: #253409;
  --under-the-radar: #556a40;
  --springtide-melodies: #99aa5d;
  --race-the-sun: #e8f2ce;
}

Tailwind CSS v4

/* Darkest Forest to Race the Sun — https://swatchly.xyz/palette/253409-556a40-99aa5d-e8f2ce */
@theme {
  --color-darkest-forest: #253409;
  --color-darkest-forest-50: #eefae0;
  --color-darkest-forest-100: #e4f1d3;
  --color-darkest-forest-200: #cfdebb;
  --color-darkest-forest-300: #b7c8a0;
  --color-darkest-forest-400: #96a87d;
  --color-darkest-forest-500: #798c60;
  --color-darkest-forest-600: #5f7046;
  --color-darkest-forest-700: #495832;
  --color-darkest-forest-800: #364423;
  --color-darkest-forest-900: #253409;
  --color-darkest-forest-950: #171f0c;
  --color-under-the-radar: #556a40;
  --color-under-the-radar-50: #edfbe1;
  --color-under-the-radar-100: #e0f0d2;
  --color-under-the-radar-200: #c8dbb8;
  --color-under-the-radar-300: #afc49c;
  --color-under-the-radar-400: #8da378;
  --color-under-the-radar-500: #70865b;
  --color-under-the-radar-600: #556a40;
  --color-under-the-radar-700: #425430;
  --color-under-the-radar-800: #334223;
  --color-under-the-radar-900: #263319;
  --color-under-the-radar-950: #17200d;
  --color-springtide-melodies: #99aa5d;
  --color-springtide-melodies-50: #f0fbd0;
  --color-springtide-melodies-100: #e5f2c1;
  --color-springtide-melodies-200: #d1dfa5;
  --color-springtide-melodies-300: #b9c987;
  --color-springtide-melodies-400: #99aa5d;
  --color-springtide-melodies-500: #7e8e42;
  --color-springtide-melodies-600: #657327;
  --color-springtide-melodies-700: #4f5c12;
  --color-springtide-melodies-800: #3d4803;
  --color-springtide-melodies-900: #2f3800;
  --color-springtide-melodies-950: #1c2300;
  --color-race-the-sun: #e8f2ce;
  --color-race-the-sun-50: #f4f9e6;
  --color-race-the-sun-100: #e8f2ce;
  --color-race-the-sun-200: #d5ddc3;
  --color-race-the-sun-300: #bec6a9;
  --color-race-the-sun-400: #9ea787;
  --color-race-the-sun-500: #838b6a;
  --color-race-the-sun-600: #687051;
  --color-race-the-sun-700: #52593d;
  --color-race-the-sun-800: #3f462d;
  --color-race-the-sun-900: #303621;
  --color-race-the-sun-950: #1d2112;
}