Zen Garden Olive to Balsamico Color Palette

About this palette

Zen Garden Olive to Balsamico is a 5-color dark, warm palette: #4B4E1E (Zen Garden Olive), #705950 (Kabul), #421010 (English Breakfast), #4C1339 (Blackberry), #190C00 (Balsamico). It mixes green, gray, brown, red, black tones and feels warm overall. The strongest text pairing is #705950 on #190C00 with a contrast ratio of 2.96:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zen Garden Olive	rgb(75, 78, 30)	hsl(64, 44%, 21%)
Kabul	rgb(112, 89, 80)	hsl(17, 17%, 38%)
English Breakfast	rgb(66, 16, 16)	hsl(0, 61%, 16%)
Blackberry	rgb(76, 19, 57)	hsl(320, 60%, 19%)
Balsamico	rgb(25, 12, 0)	hsl(29, 100%, 5%)

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.

Color blindness preview

CSS variables

/* Zen Garden Olive to Balsamico — https://swatchly.xyz/palette/4b4e1e-705950-421010-4c1339-190c00 */
:root {
  --zen-garden-olive: #4b4e1e;
  --kabul: #705950;
  --english-breakfast: #421010;
  --blackberry: #4c1339;
  --balsamico: #190c00;
}

Tailwind CSS v4

/* Zen Garden Olive to Balsamico — https://swatchly.xyz/palette/4b4e1e-705950-421010-4c1339-190c00 */
@theme {
  --color-zen-garden-olive: #4b4e1e;
  --color-zen-garden-olive-50: #f5f8dc;
  --color-zen-garden-olive-100: #ebefce;
  --color-zen-garden-olive-200: #d7dcb5;
  --color-zen-garden-olive-300: #c3c79c;
  --color-zen-garden-olive-400: #a5a979;
  --color-zen-garden-olive-500: #8b8f5e;
  --color-zen-garden-olive-600: #727646;
  --color-zen-garden-olive-700: #5d6033;
  --color-zen-garden-olive-800: #4b4e1e;
  --color-zen-garden-olive-900: #3a3c19;
  --color-zen-garden-olive-950: #24260c;
  --color-kabul: #705950;
  --color-kabul-50: #fff2ed;
  --color-kabul-100: #f8e7e0;
  --color-kabul-200: #e8d5cd;
  --color-kabul-300: #d5bfb7;
  --color-kabul-400: #b9a197;
  --color-kabul-500: #a0877d;
  --color-kabul-600: #866e65;
  --color-kabul-700: #705950;
  --color-kabul-800: #58453d;
  --color-kabul-900: #45342e;
  --color-kabul-950: #2c201c;
  --color-english-breakfast: #421010;
  --color-english-breakfast-50: #fff2f0;
  --color-english-breakfast-100: #ffe4e1;
  --color-english-breakfast-200: #fbcac5;
  --color-english-breakfast-300: #e9b1ac;
  --color-english-breakfast-400: #cc908b;
  --color-english-breakfast-500: #b17570;
  --color-english-breakfast-600: #955c58;
  --color-english-breakfast-700: #7c4744;
  --color-english-breakfast-800: #653734;
  --color-english-breakfast-900: #522a27;
  --color-english-breakfast-950: #421010;
  --color-blackberry: #4c1339;
  --color-blackberry-50: #fff0f8;
  --color-blackberry-100: #ffe2f2;
  --color-blackberry-200: #fbc5e3;
  --color-blackberry-300: #e8acce;
  --color-blackberry-400: #ca89af;
  --color-blackberry-500: #ad6c92;
  --color-blackberry-600: #8e5176;
  --color-blackberry-700: #723c5d;
  --color-blackberry-800: #592b48;
  --color-blackberry-900: #4c1339;
  --color-blackberry-950: #2b1021;
  --color-balsamico: #190c00;
  --color-balsamico-50: #fef3e7;
  --color-balsamico-100: #f5e9db;
  --color-balsamico-200: #e3d5c5;
  --color-balsamico-300: #cebeac;
  --color-balsamico-400: #b09e8a;
  --color-balsamico-500: #917f6b;
  --color-balsamico-600: #72624f;
  --color-balsamico-700: #574938;
  --color-balsamico-800: #3f3426;
  --color-balsamico-900: #2b2318;
  --color-balsamico-950: #190c00;
}