Garden Goddess to Darkest Forest Color Palette

About this palette

Garden Goddess to Darkest Forest is a 5-color cool, earthy palette: #8ECE98 (Garden Goddess), #DD88BE (Pink Punk), #B17000 (Caramel), #045996 (Blue Chip), #143720 (Darkest Forest). It mixes green, pink, orange, blue tones and feels cool overall. The strongest text pairing is #8ECE98 on #143720 with a contrast ratio of 7.16:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Garden Goddess	rgb(142, 206, 152)	hsl(129, 40%, 68%)
Pink Punk	rgb(221, 136, 190)	hsl(322, 56%, 70%)
Caramel	rgb(177, 112, 0)	hsl(38, 100%, 35%)
Blue Chip	rgb(4, 89, 150)	hsl(205, 95%, 30%)
Darkest Forest	rgb(20, 55, 32)	hsl(141, 47%, 15%)

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.

Aa7.16:1 Very good#8ECE98 on #143720
Aa7.16:1 Very good#143720 on #8ECE98
Aa5.22:1 Good#DD88BE on #143720
Aa5.22:1 Good#143720 on #DD88BE
Aa3.98:1 Poor#8ECE98 on #045996
Aa3.98:1 Poor#045996 on #8ECE98
Aa3.25:1 Poor#B17000 on #143720
Aa3.25:1 Poor#143720 on #B17000

Color blindness preview

CSS variables

/* Garden Goddess to Darkest Forest — https://swatchly.xyz/palette/8ece98-dd88be-b17000-045996-143720 */
:root {
  --garden-goddess: #8ece98;
  --pink-punk: #dd88be;
  --caramel: #b17000;
  --blue-chip: #045996;
  --darkest-forest: #143720;
}

Tailwind CSS v4

/* Garden Goddess to Darkest Forest — https://swatchly.xyz/palette/8ece98-dd88be-b17000-045996-143720 */
@theme {
  --color-garden-goddess: #8ece98;
  --color-garden-goddess-50: #d9fede;
  --color-garden-goddess-100: #cbf4d0;
  --color-garden-goddess-200: #b1e2b8;
  --color-garden-goddess-300: #8ece98;
  --color-garden-goddess-400: #72ae7c;
  --color-garden-goddess-500: #569461;
  --color-garden-goddess-600: #3d7949;
  --color-garden-goddess-700: #2a6236;
  --color-garden-goddess-800: #1b4e27;
  --color-garden-goddess-900: #113d1c;
  --color-garden-goddess-950: #07260f;
  --color-pink-punk: #dd88be;
  --color-pink-punk-50: #fff4fa;
  --color-pink-punk-100: #ffe7f5;
  --color-pink-punk-200: #ffcaea;
  --color-pink-punk-300: #f5acd9;
  --color-pink-punk-400: #dd88be;
  --color-pink-punk-500: #be6ca0;
  --color-pink-punk-600: #9f5084;
  --color-pink-punk-700: #823a6a;
  --color-pink-punk-800: #682a54;
  --color-pink-punk-900: #521d41;
  --color-pink-punk-950: #340f28;
  --color-caramel: #b17000;
  --color-caramel-50: #fff2e3;
  --color-caramel-100: #ffe4c6;
  --color-caramel-200: #ffc98c;
  --color-caramel-300: #ecb068;
  --color-caramel-400: #ce8d38;
  --color-caramel-500: #b17000;
  --color-caramel-600: #8f5a00;
  --color-caramel-700: #724700;
  --color-caramel-800: #5a3700;
  --color-caramel-900: #472a00;
  --color-caramel-950: #2e1900;
  --color-blue-chip: #045996;
  --color-blue-chip-50: #eef6ff;
  --color-blue-chip-100: #dcedff;
  --color-blue-chip-200: #b9dcff;
  --color-blue-chip-300: #8ec7ff;
  --color-blue-chip-400: #64a8e8;
  --color-blue-chip-500: #458ccc;
  --color-blue-chip-600: #2971ae;
  --color-blue-chip-700: #045996;
  --color-blue-chip-800: #024577;
  --color-blue-chip-900: #00355e;
  --color-blue-chip-950: #00213d;
  --color-darkest-forest: #143720;
  --color-darkest-forest-50: #e6fceb;
  --color-darkest-forest-100: #daf3e0;
  --color-darkest-forest-200: #c3e0ca;
  --color-darkest-forest-300: #aacbb2;
  --color-darkest-forest-400: #87ab90;
  --color-darkest-forest-500: #6a8f74;
  --color-darkest-forest-600: #50735a;
  --color-darkest-forest-700: #3b5b44;
  --color-darkest-forest-800: #2b4633;
  --color-darkest-forest-900: #143720;
  --color-darkest-forest-950: #102015;
}