Olive Bark to Cavolo Nero color palette

5D573FOlive Bark 43271EEthereal Espresso CE9B8BSavoury Salmon E9E8F9Holographic Lavender 6A95A0Cavolo Nero

Open in generator Export PNG, PDF, ASE…

About this palette

Olive Bark to Cavolo Nero is a 5-color muted, warm, vintage palette: #5D573F (Olive Bark), #43271E (Ethereal Espresso), #CE9B8B (Savoury Salmon), #E9E8F9 (Holographic Lavender), #6A95A0 (Cavolo Nero). It mixes brown, red, white, blue tones and feels warm overall. The strongest text pairing is #43271E on #E9E8F9 with a contrast ratio of 11.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Olive Bark	rgb(93, 87, 63)	hsl(48, 19%, 31%)
Ethereal Espresso	rgb(67, 39, 30)	hsl(15, 38%, 19%)
Savoury Salmon	rgb(206, 155, 139)	hsl(14, 41%, 68%)
Holographic Lavender	rgb(233, 232, 249)	hsl(244, 59%, 94%)
Cavolo Nero	rgb(106, 149, 160)	hsl(192, 22%, 52%)

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.23:1 Very good#43271E on #E9E8F9
Aa11.23:1 Very good#E9E8F9 on #43271E
Aa5.99:1 Good#5D573F on #E9E8F9
Aa5.99:1 Good#E9E8F9 on #5D573F
Aa5.61:1 Good#43271E on #CE9B8B
Aa5.61:1 Good#CE9B8B on #43271E
Aa4.15:1 Poor#43271E on #6A95A0
Aa4.15:1 Poor#6A95A0 on #43271E

Color blindness preview

CSS variables

/* Olive Bark to Cavolo Nero — https://swatchly.xyz/palette/5d573f-43271e-ce9b8b-e9e8f9-6a95a0 */
:root {
  --olive-bark: #5d573f;
  --ethereal-espresso: #43271e;
  --savoury-salmon: #ce9b8b;
  --holographic-lavender: #e9e8f9;
  --cavolo-nero: #6a95a0;
}

Tailwind CSS v4

/* Olive Bark to Cavolo Nero — https://swatchly.xyz/palette/5d573f-43271e-ce9b8b-e9e8f9-6a95a0 */
@theme {
  --color-olive-bark: #5d573f;
  --color-olive-bark-50: #f9f5e6;
  --color-olive-bark-100: #f0ebda;
  --color-olive-bark-200: #ddd8c4;
  --color-olive-bark-300: #c7c2ab;
  --color-olive-bark-400: #a9a38a;
  --color-olive-bark-500: #8e886e;
  --color-olive-bark-600: #736d55;
  --color-olive-bark-700: #5d573f;
  --color-olive-bark-800: #494430;
  --color-olive-bark-900: #383423;
  --color-olive-bark-950: #232014;
  --color-ethereal-espresso: #43271e;
  --color-ethereal-espresso-50: #fff2ee;
  --color-ethereal-espresso-100: #fde5de;
  --color-ethereal-espresso-200: #ecd1c8;
  --color-ethereal-espresso-300: #d8b9af;
  --color-ethereal-espresso-400: #ba988d;
  --color-ethereal-espresso-500: #9e7c71;
  --color-ethereal-espresso-600: #816157;
  --color-ethereal-espresso-700: #674b42;
  --color-ethereal-espresso-800: #513931;
  --color-ethereal-espresso-900: #43271e;
  --color-ethereal-espresso-950: #271914;
  --color-savoury-salmon: #ce9b8b;
  --color-savoury-salmon-50: #fff5f2;
  --color-savoury-salmon-100: #ffeae3;
  --color-savoury-salmon-200: #f9d3c7;
  --color-savoury-salmon-300: #e8bcae;
  --color-savoury-salmon-400: #ce9b8b;
  --color-savoury-salmon-500: #af7f6f;
  --color-savoury-salmon-600: #926355;
  --color-savoury-salmon-700: #764c3f;
  --color-savoury-salmon-800: #5e3a2e;
  --color-savoury-salmon-900: #492b21;
  --color-savoury-salmon-950: #2e1912;
  --color-holographic-lavender: #e9e8f9;
  --color-holographic-lavender-50: #f4f3fd;
  --color-holographic-lavender-100: #e9e8f9;
  --color-holographic-lavender-200: #d6d5e1;
  --color-holographic-lavender-300: #bfbecc;
  --color-holographic-lavender-400: #a09fae;
  --color-holographic-lavender-500: #858493;
  --color-holographic-lavender-600: #6b6a78;
  --color-holographic-lavender-700: #545461;
  --color-holographic-lavender-800: #42414c;
  --color-holographic-lavender-900: #32323b;
  --color-holographic-lavender-950: #1f1e25;
  --color-cavolo-nero: #6a95a0;
  --color-cavolo-nero-50: #e8faff;
  --color-cavolo-nero-100: #d8f3fa;
  --color-cavolo-nero-200: #c2e2ea;
  --color-cavolo-nero-300: #a8cdd7;
  --color-cavolo-nero-400: #86afba;
  --color-cavolo-nero-500: #6a95a0;
  --color-cavolo-nero-600: #4f7983;
  --color-cavolo-nero-700: #39606a;
  --color-cavolo-nero-800: #294b54;
  --color-cavolo-nero-900: #1c3a41;
  --color-cavolo-nero-950: #0e2429;
}