Olive Leaf to Camo Clay color palette

544C3BOlive Leaf E1D5BCBread Crumb 1D211AUnderworld A1BEA2Meadow Morn 767E69Camo Clay

About this palette

Olive Leaf to Camo Clay is a 5-color muted palette: #544C3B (Olive Leaf), #E1D5BC (Bread Crumb), #1D211A (Underworld), #A1BEA2 (Meadow Morn), #767E69 (Camo Clay). It mixes gray, yellow, green tones and feels balanced overall. The strongest text pairing is #E1D5BC on #1D211A with a contrast ratio of 11.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Olive Leaf	rgb(84, 76, 59)	hsl(41, 17%, 28%)
Bread Crumb	rgb(225, 213, 188)	hsl(41, 38%, 81%)
Underworld	rgb(29, 33, 26)	hsl(94, 12%, 12%)
Meadow Morn	rgb(161, 190, 162)	hsl(122, 18%, 69%)
Camo Clay	rgb(118, 126, 105)	hsl(83, 9%, 45%)

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.

Aa11.24:1 Very good#E1D5BC on #1D211A
Aa11.24:1 Very good#1D211A on #E1D5BC
Aa8.10:1 Very good#1D211A on #A1BEA2
Aa8.10:1 Very good#A1BEA2 on #1D211A
Aa5.84:1 Good#544C3B on #E1D5BC
Aa5.84:1 Good#E1D5BC on #544C3B
Aa4.20:1 Poor#544C3B on #A1BEA2
Aa4.20:1 Poor#A1BEA2 on #544C3B

Color blindness preview

CSS variables

/* Olive Leaf to Camo Clay — https://swatchly.xyz/palette/544c3b-e1d5bc-1d211a-a1bea2-767e69 */
:root {
  --olive-leaf: #544c3b;
  --bread-crumb: #e1d5bc;
  --underworld: #1d211a;
  --meadow-morn: #a1bea2;
  --camo-clay: #767e69;
}

Tailwind CSS v4

/* Olive Leaf to Camo Clay — https://swatchly.xyz/palette/544c3b-e1d5bc-1d211a-a1bea2-767e69 */
@theme {
  --color-olive-leaf: #544c3b;
  --color-olive-leaf-50: #faf5e9;
  --color-olive-leaf-100: #f0ebde;
  --color-olive-leaf-200: #dcd5c6;
  --color-olive-leaf-300: #c5bdac;
  --color-olive-leaf-400: #a59c8a;
  --color-olive-leaf-500: #887f6d;
  --color-olive-leaf-600: #6c6453;
  --color-olive-leaf-700: #544c3b;
  --color-olive-leaf-800: #413b2e;
  --color-olive-leaf-900: #322d22;
  --color-olive-leaf-950: #1f1b13;
  --color-bread-crumb: #e1d5bc;
  --color-bread-crumb-50: #faf4e6;
  --color-bread-crumb-100: #f1e9da;
  --color-bread-crumb-200: #e1d5bc;
  --color-bread-crumb-300: #c9bfaa;
  --color-bread-crumb-400: #aba089;
  --color-bread-crumb-500: #8f846d;
  --color-bread-crumb-600: #756a54;
  --color-bread-crumb-700: #5e5440;
  --color-bread-crumb-800: #4a4130;
  --color-bread-crumb-900: #393223;
  --color-bread-crumb-950: #241f14;
  --color-underworld: #1d211a;
  --color-underworld-50: #f3f6f1;
  --color-underworld-100: #e9ece6;
  --color-underworld-200: #d5d9d2;
  --color-underworld-300: #bec3bb;
  --color-underworld-400: #9ea39b;
  --color-underworld-500: #83887f;
  --color-underworld-600: #696e65;
  --color-underworld-700: #535750;
  --color-underworld-800: #40443d;
  --color-underworld-900: #31342f;
  --color-underworld-950: #1d211a;
  --color-meadow-morn: #a1bea2;
  --color-meadow-morn-50: #e3f5e3;
  --color-meadow-morn-100: #d5e9d6;
  --color-meadow-morn-200: #bdd5be;
  --color-meadow-morn-300: #a1bea2;
  --color-meadow-morn-400: #85a086;
  --color-meadow-morn-500: #6c876d;
  --color-meadow-morn-600: #546e56;
  --color-meadow-morn-700: #415943;
  --color-meadow-morn-800: #324733;
  --color-meadow-morn-900: #263827;
  --color-meadow-morn-950: #162317;
  --color-camo-clay: #767e69;
  --color-camo-clay-50: #f0f5e8;
  --color-camo-clay-100: #e4e9da;
  --color-camo-clay-200: #cdd4c2;
  --color-camo-clay-300: #b4bca8;
  --color-camo-clay-400: #939b86;
  --color-camo-clay-500: #767e69;
  --color-camo-clay-600: #5e6652;
  --color-camo-clay-700: #4a513f;
  --color-camo-clay-800: #3a4030;
  --color-camo-clay-900: #2d3225;
  --color-camo-clay-950: #1c1f16;
}