Haunted Forest to Snow White color palette

002C1BHaunted Forest 006439Ficus Elastica 008460Shadows of Time 00B382Slime Girl 7FDDA9Jovial Jade E9FFF0Snow White

Open in generator Export PNG, PDF, ASE…

About this palette

Haunted Forest to Snow White is a 6-color cool, monochromatic, gradient palette: #002C1B (Haunted Forest), #006439 (Ficus Elastica), #008460 (Shadows of Time), #00B382 (Slime Girl), #7FDDA9 (Jovial Jade), #E9FFF0 (Snow White). It mixes green, turquoise, white tones and feels cool overall. The strongest text pairing is #002C1B on #E9FFF0 with a contrast ratio of 14.55:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haunted Forest	rgb(0, 44, 27)	hsl(157, 100%, 9%)
Ficus Elastica	rgb(0, 100, 57)	hsl(154, 100%, 20%)
Shadows of Time	rgb(0, 132, 96)	hsl(164, 100%, 26%)
Slime Girl	rgb(0, 179, 130)	hsl(164, 100%, 35%)
Jovial Jade	rgb(127, 221, 169)	hsl(147, 58%, 68%)
Snow White	rgb(233, 255, 240)	hsl(139, 100%, 96%)

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.

Aa14.55:1 Super#002C1B on #E9FFF0
Aa14.55:1 Super#E9FFF0 on #002C1B
Aa9.31:1 Very good#002C1B on #7FDDA9
Aa9.31:1 Very good#7FDDA9 on #002C1B
Aa6.95:1 Good#006439 on #E9FFF0
Aa6.95:1 Good#E9FFF0 on #006439
Aa5.65:1 Good#002C1B on #00B382
Aa5.65:1 Good#00B382 on #002C1B

Color blindness preview

CSS variables

/* Haunted Forest to Snow White — https://swatchly.xyz/palette/002c1b-006439-008460-00b382-7fdda9-e9fff0 */
:root {
  --haunted-forest: #002c1b;
  --ficus-elastica: #006439;
  --shadows-of-time: #008460;
  --slime-girl: #00b382;
  --jovial-jade: #7fdda9;
  --snow-white: #e9fff0;
}

Tailwind CSS v4

/* Haunted Forest to Snow White — https://swatchly.xyz/palette/002c1b-006439-008460-00b382-7fdda9-e9fff0 */
@theme {
  --color-haunted-forest: #002c1b;
  --color-haunted-forest-50: #e4fcef;
  --color-haunted-forest-100: #d7f3e4;
  --color-haunted-forest-200: #c0e1cf;
  --color-haunted-forest-300: #a6cbb7;
  --color-haunted-forest-400: #83ad97;
  --color-haunted-forest-500: #68927d;
  --color-haunted-forest-600: #4f7864;
  --color-haunted-forest-700: #3c614f;
  --color-haunted-forest-800: #2c4e3e;
  --color-haunted-forest-900: #213e30;
  --color-haunted-forest-950: #002c1b;
  --color-ficus-elastica: #006439;
  --color-ficus-elastica-50: #ddffe8;
  --color-ficus-elastica-100: #c8f9d9;
  --color-ficus-elastica-200: #ade7c1;
  --color-ficus-elastica-300: #8ed2a7;
  --color-ficus-elastica-400: #67b485;
  --color-ficus-elastica-500: #479869;
  --color-ficus-elastica-600: #2a7c50;
  --color-ficus-elastica-700: #006439;
  --color-ficus-elastica-800: #034e2c;
  --color-ficus-elastica-900: #003d20;
  --color-ficus-elastica-950: #002612;
  --color-shadows-of-time: #008460;
  --color-shadows-of-time-50: #dbffee;
  --color-shadows-of-time-100: #c1fbe1;
  --color-shadows-of-time-200: #a4ebcc;
  --color-shadows-of-time-300: #84d7b5;
  --color-shadows-of-time-400: #59ba94;
  --color-shadows-of-time-500: #349f79;
  --color-shadows-of-time-600: #008460;
  --color-shadows-of-time-700: #00694c;
  --color-shadows-of-time-800: #00523a;
  --color-shadows-of-time-900: #003f2c;
  --color-shadows-of-time-950: #00281a;
  --color-slime-girl: #00b382;
  --color-slime-girl-50: #ceffe8;
  --color-slime-girl-100: #aafad7;
  --color-slime-girl-200: #86e8bf;
  --color-slime-girl-300: #5cd2a5;
  --color-slime-girl-400: #00b382;
  --color-slime-girl-500: #00956c;
  --color-slime-girl-600: #007956;
  --color-slime-girl-700: #006044;
  --color-slime-girl-800: #004c35;
  --color-slime-girl-900: #003c29;
  --color-slime-girl-950: #002719;
  --color-jovial-jade: #7fdda9;
  --color-jovial-jade-50: #e6ffef;
  --color-jovial-jade-100: #c8fddd;
  --color-jovial-jade-200: #acedc7;
  --color-jovial-jade-300: #7fdda9;
  --color-jovial-jade-400: #62bb8b;
  --color-jovial-jade-500: #3f9e6e;
  --color-jovial-jade-600: #1c8254;
  --color-jovial-jade-700: #00683f;
  --color-jovial-jade-800: #005130;
  --color-jovial-jade-900: #003e24;
  --color-jovial-jade-950: #002715;
  --color-snow-white: #e9fff0;
  --color-snow-white-50: #e9fff0;
  --color-snow-white-100: #e5f2e9;
  --color-snow-white-200: #cfded4;
  --color-snow-white-300: #b6c8bc;
  --color-snow-white-400: #95a89b;
  --color-snow-white-500: #798c7f;
  --color-snow-white-600: #5e7165;
  --color-snow-white-700: #495a4f;
  --color-snow-white-800: #38473d;
  --color-snow-white-900: #2a362e;
  --color-snow-white-950: #19221c;
}