Everglade to Gum Leaf Color Palette

About this palette

Everglade to Gum Leaf is a 5-color muted, vintage palette: #344130 (Everglade), #FFDBDA (Strawberry Blonde), #87A4C4 (High Tide), #7F5852 (Wild West), #B1CDAC (Gum Leaf). It mixes gray, pink, blue, red, green tones and feels balanced overall. The strongest text pairing is #344130 on #FFDBDA with a contrast ratio of 8.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Everglade	rgb(52, 65, 48)	hsl(106, 15%, 22%)
Strawberry Blonde	rgb(255, 219, 218)	hsl(2, 100%, 93%)
High Tide	rgb(135, 164, 196)	hsl(211, 34%, 65%)
Wild West	rgb(127, 88, 82)	hsl(8, 22%, 41%)
Gum Leaf	rgb(177, 205, 172)	hsl(111, 25%, 74%)

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.43:1 Very good#344130 on #FFDBDA
Aa8.43:1 Very good#FFDBDA on #344130
Aa6.27:1 Good#344130 on #B1CDAC
Aa6.27:1 Good#B1CDAC on #344130
Aa4.79:1 Good#FFDBDA on #7F5852
Aa4.79:1 Good#7F5852 on #FFDBDA
Aa4.18:1 Poor#344130 on #87A4C4
Aa4.18:1 Poor#87A4C4 on #344130

Color blindness preview

CSS variables

/* Everglade to Gum Leaf — https://swatchly.xyz/palette/344130-ffdbda-87a4c4-7f5852-b1cdac */
:root {
  --everglade: #344130;
  --strawberry-blonde: #ffdbda;
  --high-tide: #87a4c4;
  --wild-west: #7f5852;
  --gum-leaf: #b1cdac;
}

Tailwind CSS v4

/* Everglade to Gum Leaf — https://swatchly.xyz/palette/344130-ffdbda-87a4c4-7f5852-b1cdac */
@theme {
  --color-everglade: #344130;
  --color-everglade-50: #eff8ed;
  --color-everglade-100: #e5efe2;
  --color-everglade-200: #d0dccc;
  --color-everglade-300: #b7c4b3;
  --color-everglade-400: #96a491;
  --color-everglade-500: #798875;
  --color-everglade-600: #5f6c5a;
  --color-everglade-700: #485444;
  --color-everglade-800: #344130;
  --color-everglade-900: #283126;
  --color-everglade-950: #181e16;
  --color-strawberry-blonde: #ffdbda;
  --color-strawberry-blonde-50: #ffeaea;
  --color-strawberry-blonde-100: #ffdbda;
  --color-strawberry-blonde-200: #e6cbca;
  --color-strawberry-blonde-300: #d3b5b4;
  --color-strawberry-blonde-400: #b69595;
  --color-strawberry-blonde-500: #9b7b7a;
  --color-strawberry-blonde-600: #806261;
  --color-strawberry-blonde-700: #694d4d;
  --color-strawberry-blonde-800: #533b3b;
  --color-strawberry-blonde-900: #412d2d;
  --color-strawberry-blonde-950: #291b1b;
  --color-high-tide: #87a4c4;
  --color-high-tide-50: #eef6ff;
  --color-high-tide-100: #ddedff;
  --color-high-tide-200: #c3daf3;
  --color-high-tide-300: #aac3e0;
  --color-high-tide-400: #87a4c4;
  --color-high-tide-500: #6c89a7;
  --color-high-tide-600: #536e8b;
  --color-high-tide-700: #3f5772;
  --color-high-tide-800: #2f445b;
  --color-high-tide-900: #223448;
  --color-high-tide-950: #13202e;
  --color-wild-west: #7f5852;
  --color-wild-west-50: #fff2ef;
  --color-wild-west-100: #ffe2dd;
  --color-wild-west-200: #eecbc5;
  --color-wild-west-300: #d9b2ab;
  --color-wild-west-400: #b99089;
  --color-wild-west-500: #9c736d;
  --color-wild-west-600: #7f5852;
  --color-wild-west-700: #664540;
  --color-wild-west-800: #523530;
  --color-wild-west-900: #402824;
  --color-wild-west-950: #291815;
  --color-gum-leaf: #b1cdac;
  --color-gum-leaf-50: #ecfce9;
  --color-gum-leaf-100: #e2f3de;
  --color-gum-leaf-200: #cce1c8;
  --color-gum-leaf-300: #b1cdac;
  --color-gum-leaf-400: #92ac8e;
  --color-gum-leaf-500: #769072;
  --color-gum-leaf-600: #5c7558;
  --color-gum-leaf-700: #475d43;
  --color-gum-leaf-800: #354932;
  --color-gum-leaf-900: #273824;
  --color-gum-leaf-950: #172315;
}