Start generating

Darkest Forest to Hello Winter color palette

242C05Darkest Forest17502DMoor-Monster217F3FLush Paradise009891Green DynastyA3BD7CAround the Gills8EFFEBHello Winter
Open in generator Export PNG, PDF, ASE…

About this palette

Darkest Forest to Hello Winter is a 6-color cool, earthy, gradient palette: #242C05 (Darkest Forest), #17502D (Moor-Monster), #217F3F (Lush Paradise), #009891 (Green Dynasty), #A3BD7C (Around the Gills), #8EFFEB (Hello Winter). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #242C05 on #8EFFEB with a contrast ratio of 12.28:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Darkest Forestrgb(36, 44, 5)hsl(72, 80%, 10%)
Moor-Monsterrgb(23, 80, 45)hsl(143, 55%, 20%)
Lush Paradisergb(33, 127, 63)hsl(139, 59%, 31%)
Green Dynastyrgb(0, 152, 145)hsl(177, 100%, 30%)
Around the Gillsrgb(163, 189, 124)hsl(84, 33%, 61%)
Hello Winterrgb(142, 255, 235)hsl(169, 100%, 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.

  • Aa12.28:1 Super#242C05 on #8EFFEB
  • Aa12.28:1 Super#8EFFEB on #242C05
  • Aa7.95:1 Very good#17502D on #8EFFEB
  • Aa7.95:1 Very good#8EFFEB on #17502D
  • Aa7.05:1 Very good#242C05 on #A3BD7C
  • Aa7.05:1 Very good#A3BD7C on #242C05
  • Aa4.56:1 Good#17502D on #A3BD7C
  • Aa4.56:1 Good#A3BD7C on #17502D

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Darkest Forest to Hello Winter — https://swatchly.xyz/palette/242c05-17502d-217f3f-009891-a3bd7c-8effeb */
:root {
  --darkest-forest: #242c05;
  --moor-monster: #17502d;
  --lush-paradise: #217f3f;
  --green-dynasty: #009891;
  --around-the-gills: #a3bd7c;
  --hello-winter: #8effeb;
}

Tailwind CSS v4

/* Darkest Forest to Hello Winter — https://swatchly.xyz/palette/242c05-17502d-217f3f-009891-a3bd7c-8effeb */
@theme {
  --color-darkest-forest: #242c05;
  --color-darkest-forest-50: #f2f9e1;
  --color-darkest-forest-100: #e7efd4;
  --color-darkest-forest-200: #d3dcbc;
  --color-darkest-forest-300: #bcc6a2;
  --color-darkest-forest-400: #9ca77f;
  --color-darkest-forest-500: #838e65;
  --color-darkest-forest-600: #6a754e;
  --color-darkest-forest-700: #565f3b;
  --color-darkest-forest-800: #454d2c;
  --color-darkest-forest-900: #373e22;
  --color-darkest-forest-950: #242c05;
  --color-moor-monster: #17502d;
  --color-moor-monster-50: #dfffe7;
  --color-moor-monster-100: #d2f6db;
  --color-moor-monster-200: #b9e4c4;
  --color-moor-monster-300: #9fcfab;
  --color-moor-monster-400: #7bb18a;
  --color-moor-monster-500: #5e966f;
  --color-moor-monster-600: #457b55;
  --color-moor-monster-700: #316341;
  --color-moor-monster-800: #17502d;
  --color-moor-monster-900: #163d24;
  --color-moor-monster-950: #0a2614;
  --color-lush-paradise: #217f3f;
  --color-lush-paradise-50: #dfffe4;
  --color-lush-paradise-100: #c6fbcf;
  --color-lush-paradise-200: #aaeab5;
  --color-lush-paradise-300: #8bd59a;
  --color-lush-paradise-400: #63b776;
  --color-lush-paradise-500: #429b59;
  --color-lush-paradise-600: #217f3f;
  --color-lush-paradise-700: #09662d;
  --color-lush-paradise-800: #005020;
  --color-lush-paradise-900: #003e17;
  --color-lush-paradise-950: #00270c;
  --color-green-dynasty: #009891;
  --color-green-dynasty-50: #d4fffb;
  --color-green-dynasty-100: #b7f9f3;
  --color-green-dynasty-200: #97e8e1;
  --color-green-dynasty-300: #73d3cb;
  --color-green-dynasty-400: #41b4ad;
  --color-green-dynasty-500: #009891;
  --color-green-dynasty-600: #007b75;
  --color-green-dynasty-700: #00615d;
  --color-green-dynasty-800: #004c48;
  --color-green-dynasty-900: #003b38;
  --color-green-dynasty-950: #002523;
  --color-around-the-gills: #a3bd7c;
  --color-around-the-gills-50: #e4f5cd;
  --color-around-the-gills-100: #d6e9bc;
  --color-around-the-gills-200: #bed49f;
  --color-around-the-gills-300: #a3bd7c;
  --color-around-the-gills-400: #87a061;
  --color-around-the-gills-500: #6f8748;
  --color-around-the-gills-600: #586e32;
  --color-around-the-gills-700: #455922;
  --color-around-the-gills-800: #364716;
  --color-around-the-gills-900: #2a390d;
  --color-around-the-gills-950: #192405;
  --color-hello-winter: #8effeb;
  --color-hello-winter-50: #c8fff4;
  --color-hello-winter-100: #8effeb;
  --color-hello-winter-200: #95e6d7;
  --color-hello-winter-300: #74d2c2;
  --color-hello-winter-400: #45b5a3;
  --color-hello-winter-500: #119a89;
  --color-hello-winter-600: #007d6e;
  --color-hello-winter-700: #006458;
  --color-hello-winter-800: #004e44;
  --color-hello-winter-900: #003c34;
  --color-hello-winter-950: #002620;
}

Similar palettes