Start generating

Water Leaf to Darkest Forest color palette

BCE9E2Water LeafAFCBA8Limestoned58AA7BJubilant Jade437B72Turquoise Tortoise25573DEvergreen263820Darkest Forest
Open in generator Export PNG, PDF, ASE…

About this palette

Water Leaf to Darkest Forest is a 6-color cool, earthy, gradient palette: #BCE9E2 (Water Leaf), #AFCBA8 (Limestoned), #58AA7B (Jubilant Jade), #437B72 (Turquoise Tortoise), #25573D (Evergreen), #263820 (Darkest Forest). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #BCE9E2 on #263820 with a contrast ratio of 9.52:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Water Leafrgb(188, 233, 226)hsl(171, 51%, 83%)
Limestonedrgb(175, 203, 168)hsl(108, 25%, 73%)
Jubilant Jadergb(88, 170, 123)hsl(146, 33%, 51%)
Turquoise Tortoisergb(67, 123, 114)hsl(170, 29%, 37%)
Evergreenrgb(37, 87, 61)hsl(149, 40%, 24%)
Darkest Forestrgb(38, 56, 32)hsl(105, 27%, 17%)

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.52:1 Very good#BCE9E2 on #263820
  • Aa9.52:1 Very good#263820 on #BCE9E2
  • Aa7.15:1 Very good#AFCBA8 on #263820
  • Aa7.15:1 Very good#263820 on #AFCBA8
  • Aa6.33:1 Good#BCE9E2 on #25573D
  • Aa6.33:1 Good#25573D on #BCE9E2
  • Aa4.75:1 Good#AFCBA8 on #25573D
  • Aa4.75:1 Good#25573D on #AFCBA8

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Water Leaf to Darkest Forest — https://swatchly.xyz/palette/bce9e2-afcba8-58aa7b-437b72-25573d-263820 */
:root {
  --water-leaf: #bce9e2;
  --limestoned: #afcba8;
  --jubilant-jade: #58aa7b;
  --turquoise-tortoise: #437b72;
  --evergreen: #25573d;
  --darkest-forest: #263820;
}

Tailwind CSS v4

/* Water Leaf to Darkest Forest — https://swatchly.xyz/palette/bce9e2-afcba8-58aa7b-437b72-25573d-263820 */
@theme {
  --color-water-leaf: #bce9e2;
  --color-water-leaf-50: #eafffb;
  --color-water-leaf-100: #def7f3;
  --color-water-leaf-200: #bce9e2;
  --color-water-leaf-300: #abcfc9;
  --color-water-leaf-400: #86afa9;
  --color-water-leaf-500: #69938d;
  --color-water-leaf-600: #4e7771;
  --color-water-leaf-700: #395e59;
  --color-water-leaf-800: #284945;
  --color-water-leaf-900: #1c3935;
  --color-water-leaf-950: #0f2321;
  --color-limestoned: #afcba8;
  --color-limestoned-50: #ebfbe7;
  --color-limestoned-100: #e0f2dc;
  --color-limestoned-200: #cadfc5;
  --color-limestoned-300: #afcba8;
  --color-limestoned-400: #91ab8a;
  --color-limestoned-500: #758f6e;
  --color-limestoned-600: #5b7455;
  --color-limestoned-700: #465d40;
  --color-limestoned-800: #354930;
  --color-limestoned-900: #273823;
  --color-limestoned-950: #172314;
  --color-jubilant-jade: #58aa7b;
  --color-jubilant-jade-50: #d0fee0;
  --color-jubilant-jade-100: #bff4d2;
  --color-jubilant-jade-200: #a2e1b9;
  --color-jubilant-jade-300: #82ca9e;
  --color-jubilant-jade-400: #58aa7b;
  --color-jubilant-jade-500: #3d9063;
  --color-jubilant-jade-600: #23764c;
  --color-jubilant-jade-700: #0e6039;
  --color-jubilant-jade-800: #004c2b;
  --color-jubilant-jade-900: #003c21;
  --color-jubilant-jade-950: #002713;
  --color-turquoise-tortoise: #437b72;
  --color-turquoise-tortoise-50: #defdf7;
  --color-turquoise-tortoise-100: #d1f5ee;
  --color-turquoise-tortoise-200: #b9e3db;
  --color-turquoise-tortoise-300: #9ecec5;
  --color-turquoise-tortoise-400: #7ab0a7;
  --color-turquoise-tortoise-500: #5d958c;
  --color-turquoise-tortoise-600: #437b72;
  --color-turquoise-tortoise-700: #2f625b;
  --color-turquoise-tortoise-800: #1f4e47;
  --color-turquoise-tortoise-900: #143c36;
  --color-turquoise-tortoise-950: #082622;
  --color-evergreen: #25573d;
  --color-evergreen-50: #e1feec;
  --color-evergreen-100: #d4f5e1;
  --color-evergreen-200: #bce3cb;
  --color-evergreen-300: #a3cfb5;
  --color-evergreen-400: #81b296;
  --color-evergreen-500: #66997c;
  --color-evergreen-600: #4d7f63;
  --color-evergreen-700: #3a694f;
  --color-evergreen-800: #25573d;
  --color-evergreen-900: #1e432f;
  --color-evergreen-950: #0f2b1d;
  --color-darkest-forest: #263820;
  --color-darkest-forest-50: #edfae9;
  --color-darkest-forest-100: #e2f0dd;
  --color-darkest-forest-200: #cdddc7;
  --color-darkest-forest-300: #b5c8ae;
  --color-darkest-forest-400: #94a98d;
  --color-darkest-forest-500: #788d71;
  --color-darkest-forest-600: #5e7258;
  --color-darkest-forest-700: #495b43;
  --color-darkest-forest-800: #374732;
  --color-darkest-forest-900: #263820;
  --color-darkest-forest-950: #182215;
}

Similar palettes