Olive Bark to Underworld Color Palette

About this palette

Olive Bark to Underworld is a 4-color muted, warm, earthy, vintage palette: #575233 (Olive Bark), #A2A47E (Forester), #CFD1B4 (Bitter Melon), #232313 (Underworld). It mixes brown, yellow, gray tones and feels warm overall. The strongest text pairing is #CFD1B4 on #232313 with a contrast ratio of 10.17:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Olive Bark	rgb(87, 82, 51)	hsl(52, 26%, 27%)
Forester	rgb(162, 164, 126)	hsl(63, 17%, 57%)
Bitter Melon	rgb(207, 209, 180)	hsl(64, 24%, 76%)
Underworld	rgb(35, 35, 19)	hsl(60, 30%, 11%)

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.

Aa10.17:1 Very good#CFD1B4 on #232313
Aa10.17:1 Very good#232313 on #CFD1B4
Aa6.17:1 Good#A2A47E on #232313
Aa6.17:1 Good#232313 on #A2A47E
Aa5.05:1 Good#575233 on #CFD1B4
Aa5.05:1 Good#CFD1B4 on #575233
Aa3.06:1 Poor#575233 on #A2A47E
Aa3.06:1 Poor#A2A47E on #575233

Color blindness preview

CSS variables

/* Olive Bark to Underworld — https://swatchly.xyz/palette/575233-a2a47e-cfd1b4-232313 */
:root {
  --olive-bark: #575233;
  --forester: #a2a47e;
  --bitter-melon: #cfd1b4;
  --underworld: #232313;
}

Tailwind CSS v4

/* Olive Bark to Underworld — https://swatchly.xyz/palette/575233-a2a47e-cfd1b4-232313 */
@theme {
  --color-olive-bark: #575233;
  --color-olive-bark-50: #f9f6e2;
  --color-olive-bark-100: #efecd6;
  --color-olive-bark-200: #dcd8be;
  --color-olive-bark-300: #c5c0a3;
  --color-olive-bark-400: #a5a080;
  --color-olive-bark-500: #898464;
  --color-olive-bark-600: #6e694a;
  --color-olive-bark-700: #575233;
  --color-olive-bark-800: #444027;
  --color-olive-bark-900: #34311c;
  --color-olive-bark-950: #201e0f;
  --color-forester: #a2a47e;
  --color-forester-50: #f5f7e1;
  --color-forester-100: #ebedd4;
  --color-forester-200: #d8dabc;
  --color-forester-300: #c1c3a2;
  --color-forester-400: #a2a47e;
  --color-forester-500: #878964;
  --color-forester-600: #6d6e4b;
  --color-forester-700: #565737;
  --color-forester-800: #434428;
  --color-forester-900: #34351d;
  --color-forester-950: #20210f;
  --color-bitter-melon: #cfd1b4;
  --color-bitter-melon-50: #eff1df;
  --color-bitter-melon-100: #e4e5d2;
  --color-bitter-melon-200: #cfd1b4;
  --color-bitter-melon-300: #babca3;
  --color-bitter-melon-400: #9c9e83;
  --color-bitter-melon-500: #838469;
  --color-bitter-melon-600: #6a6b52;
  --color-bitter-melon-700: #55563f;
  --color-bitter-melon-800: #434430;
  --color-bitter-melon-900: #333423;
  --color-bitter-melon-950: #202014;
  --color-underworld: #232313;
  --color-underworld-50: #f6f6eb;
  --color-underworld-100: #ececdf;
  --color-underworld-200: #d8d9c9;
  --color-underworld-300: #c2c2b1;
  --color-underworld-400: #a3a390;
  --color-underworld-500: #888875;
  --color-underworld-600: #6e6e5c;
  --color-underworld-700: #585848;
  --color-underworld-800: #454537;
  --color-underworld-900: #36362a;
  --color-underworld-950: #232313;
}