Enoki to Darkest Forest Color Palette

About this palette

Enoki to Darkest Forest is a 5-color muted, cool, earthy, monochromatic, gradient palette: #F4FBEF (Enoki), #B7D1AB (Morris Leaf), #758C6B (Toad), #536446 (Cypress), #27341D (Darkest Forest). It mixes white, green tones and feels cool overall. The strongest text pairing is #F4FBEF on #27341D with a contrast ratio of 12.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Enoki	rgb(244, 251, 239)	hsl(95, 60%, 96%)
Morris Leaf	rgb(183, 209, 171)	hsl(101, 29%, 75%)
Toad	rgb(117, 140, 107)	hsl(102, 13%, 48%)
Cypress	rgb(83, 100, 70)	hsl(94, 18%, 33%)
Darkest Forest	rgb(39, 52, 29)	hsl(94, 28%, 16%)

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.47:1 Super#F4FBEF on #27341D
Aa12.47:1 Super#27341D on #F4FBEF
Aa7.97:1 Very good#B7D1AB on #27341D
Aa7.97:1 Very good#27341D on #B7D1AB
Aa6.07:1 Good#F4FBEF on #536446
Aa6.07:1 Good#536446 on #F4FBEF
Aa3.88:1 Poor#B7D1AB on #536446
Aa3.88:1 Poor#536446 on #B7D1AB

Color blindness preview

CSS variables

/* Enoki to Darkest Forest — https://swatchly.xyz/palette/f4fbef-b7d1ab-758c6b-536446-27341d */
:root {
  --enoki: #f4fbef;
  --morris-leaf: #b7d1ab;
  --toad: #758c6b;
  --cypress: #536446;
  --darkest-forest: #27341d;
}

Tailwind CSS v4

/* Enoki to Darkest Forest — https://swatchly.xyz/palette/f4fbef-b7d1ab-758c6b-536446-27341d */
@theme {
  --color-enoki: #f4fbef;
  --color-enoki-50: #f4fbef;
  --color-enoki-100: #ebefe8;
  --color-enoki-200: #d6dbd3;
  --color-enoki-300: #bfc5bb;
  --color-enoki-400: #9fa59a;
  --color-enoki-500: #83897e;
  --color-enoki-600: #686e64;
  --color-enoki-700: #52574e;
  --color-enoki-800: #3f443c;
  --color-enoki-900: #30342e;
  --color-enoki-950: #1d201b;
  --color-morris-leaf: #b7d1ab;
  --color-morris-leaf-50: #f0fee9;
  --color-morris-leaf-100: #e6f6df;
  --color-morris-leaf-200: #d1e4c9;
  --color-morris-leaf-300: #b7d1ab;
  --color-morris-leaf-400: #98af8d;
  --color-morris-leaf-500: #7b936f;
  --color-morris-leaf-600: #607755;
  --color-morris-leaf-700: #495e3f;
  --color-morris-leaf-800: #37492e;
  --color-morris-leaf-900: #293821;
  --color-morris-leaf-950: #182313;
  --color-toad: #758c6b;
  --color-toad-50: #ecfae6;
  --color-toad-100: #e0f0da;
  --color-toad-200: #caddc2;
  --color-toad-300: #b2c7a9;
  --color-toad-400: #91a887;
  --color-toad-500: #758c6b;
  --color-toad-600: #5c7252;
  --color-toad-700: #475b3e;
  --color-toad-800: #36472f;
  --color-toad-900: #293722;
  --color-toad-950: #182213;
  --color-cypress: #536446;
  --color-cypress-50: #eef9e6;
  --color-cypress-100: #e3f0db;
  --color-cypress-200: #d0dfc6;
  --color-cypress-300: #bacaae;
  --color-cypress-400: #9bad8e;
  --color-cypress-500: #819373;
  --color-cypress-600: #687a5b;
  --color-cypress-700: #536446;
  --color-cypress-800: #404e35;
  --color-cypress-900: #303c27;
  --color-cypress-950: #1d2616;
  --color-darkest-forest: #27341d;
  --color-darkest-forest-50: #eff9e9;
  --color-darkest-forest-100: #e5efdd;
  --color-darkest-forest-200: #d0dcc7;
  --color-darkest-forest-300: #b8c6ae;
  --color-darkest-forest-400: #97a78c;
  --color-darkest-forest-500: #7b8b70;
  --color-darkest-forest-600: #616f56;
  --color-darkest-forest-700: #4a5841;
  --color-darkest-forest-800: #384330;
  --color-darkest-forest-900: #27341d;
  --color-darkest-forest-950: #181f14;
}