Verdant Leaf to Everglade color palette

847D49Verdant Leaf EEDEBCCameo B285A1Voila!9DBFA9Meadow Morn 464D67Into the Stratosphere 2A3D32Everglade

Open in generator Export PNG, PDF, ASE…

About this palette

Verdant Leaf to Everglade is a 6-color muted, vintage palette: #847D49 (Verdant Leaf), #EEDEBC (Cameo), #B285A1 (Voila!), #9DBFA9 (Meadow Morn), #464D67 (Into the Stratosphere), #2A3D32 (Everglade). It mixes yellow, pink, green, blue, gray tones and feels warm overall. The strongest text pairing is #EEDEBC on #2A3D32 with a contrast ratio of 8.73:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Verdant Leaf	rgb(132, 125, 73)	hsl(53, 29%, 40%)
Cameo	rgb(238, 222, 188)	hsl(41, 60%, 84%)
Voila!	rgb(178, 133, 161)	hsl(323, 23%, 61%)
Meadow Morn	rgb(157, 191, 169)	hsl(141, 21%, 68%)
Into the Stratosphere	rgb(70, 77, 103)	hsl(227, 19%, 34%)
Everglade	rgb(42, 61, 50)	hsl(145, 18%, 20%)

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.

Aa8.73:1 Very good#EEDEBC on #2A3D32
Aa8.73:1 Very good#2A3D32 on #EEDEBC
Aa6.28:1 Good#EEDEBC on #464D67
Aa6.28:1 Good#464D67 on #EEDEBC
Aa5.77:1 Good#9DBFA9 on #2A3D32
Aa5.77:1 Good#2A3D32 on #9DBFA9
Aa4.15:1 Poor#9DBFA9 on #464D67
Aa4.15:1 Poor#464D67 on #9DBFA9

Color blindness preview

CSS variables

/* Verdant Leaf to Everglade — https://swatchly.xyz/palette/847d49-eedebc-b285a1-9dbfa9-464d67-2a3d32 */
:root {
  --verdant-leaf: #847d49;
  --cameo: #eedebc;
  --voila: #b285a1;
  --meadow-morn: #9dbfa9;
  --into-the-stratosphere: #464d67;
  --everglade: #2a3d32;
}

Tailwind CSS v4

/* Verdant Leaf to Everglade — https://swatchly.xyz/palette/847d49-eedebc-b285a1-9dbfa9-464d67-2a3d32 */
@theme {
  --color-verdant-leaf: #847d49;
  --color-verdant-leaf-50: #f8f5d6;
  --color-verdant-leaf-100: #ede9c6;
  --color-verdant-leaf-200: #d9d3a9;
  --color-verdant-leaf-300: #c1bb8c;
  --color-verdant-leaf-400: #a19a66;
  --color-verdant-leaf-500: #847d49;
  --color-verdant-leaf-600: #6b6533;
  --color-verdant-leaf-700: #565022;
  --color-verdant-leaf-800: #443e16;
  --color-verdant-leaf-900: #35310e;
  --color-verdant-leaf-950: #221e06;
  --color-cameo: #eedebc;
  --color-cameo-50: #fffaf0;
  --color-cameo-100: #faf1de;
  --color-cameo-200: #eedebc;
  --color-cameo-300: #d3c6ab;
  --color-cameo-400: #b4a586;
  --color-cameo-500: #978869;
  --color-cameo-600: #7b6d4e;
  --color-cameo-700: #625539;
  --color-cameo-800: #4c4129;
  --color-cameo-900: #3b321d;
  --color-cameo-950: #251e10;
  --color-voila: #b285a1;
  --color-voila-50: #ffe9f6;
  --color-voila-100: #fad9ed;
  --color-voila-200: #e8c2d9;
  --color-voila-300: #d2a8c1;
  --color-voila-400: #b285a1;
  --color-voila-500: #986c88;
  --color-voila-600: #7e556f;
  --color-voila-700: #664259;
  --color-voila-800: #523347;
  --color-voila-900: #422738;
  --color-voila-950: #2c1825;
  --color-meadow-morn: #9dbfa9;
  --color-meadow-morn-50: #e0f5e7;
  --color-meadow-morn-100: #d3eadb;
  --color-meadow-morn-200: #bad6c4;
  --color-meadow-morn-300: #9dbfa9;
  --color-meadow-morn-400: #81a18c;
  --color-meadow-morn-500: #688873;
  --color-meadow-morn-600: #506f5c;
  --color-meadow-morn-700: #3e5948;
  --color-meadow-morn-800: #2f4738;
  --color-meadow-morn-900: #23382b;
  --color-meadow-morn-950: #14231a;
  --color-into-the-stratosphere: #464d67;
  --color-into-the-stratosphere-50: #f2f5ff;
  --color-into-the-stratosphere-100: #e5eafe;
  --color-into-the-stratosphere-200: #ced5ed;
  --color-into-the-stratosphere-300: #b6bdd8;
  --color-into-the-stratosphere-400: #949cb9;
  --color-into-the-stratosphere-500: #78809c;
  --color-into-the-stratosphere-600: #5d657f;
  --color-into-the-stratosphere-700: #464d67;
  --color-into-the-stratosphere-800: #363c50;
  --color-into-the-stratosphere-900: #292e3f;
  --color-into-the-stratosphere-950: #181c28;
  --color-everglade: #2a3d32;
  --color-everglade-50: #ecf9f1;
  --color-everglade-100: #e1efe6;
  --color-everglade-200: #cbdcd2;
  --color-everglade-300: #b3c6bb;
  --color-everglade-400: #94a99c;
  --color-everglade-500: #798e81;
  --color-everglade-600: #607468;
  --color-everglade-700: #4b5e53;
  --color-everglade-800: #3b4b41;
  --color-everglade-900: #2a3d32;
  --color-everglade-950: #1b2620;
}