Start generating

Zen Garden Olive to Cherry Picking color palette

444F28Zen Garden Olive56693EUnder the Radar3F3600Wasabi Nori200700Dwarf Fortress2E1800Shadow Play57131FCherry Picking
Open in generator Export PNG, PDF, ASE…

About this palette

Zen Garden Olive to Cherry Picking is a 6-color dark, warm, earthy palette: #444F28 (Zen Garden Olive), #56693E (Under the Radar), #3F3600 (Wasabi Nori), #200700 (Dwarf Fortress), #2E1800 (Shadow Play), #57131F (Cherry Picking). It mixes green, brown, black tones and feels warm overall. The strongest text pairing is #56693E on #200700 with a contrast ratio of 3.19:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Zen Garden Olivergb(68, 79, 40)hsl(77, 33%, 23%)
Under the Radarrgb(86, 105, 62)hsl(87, 26%, 33%)
Wasabi Norirgb(63, 54, 0)hsl(51, 100%, 12%)
Dwarf Fortressrgb(32, 7, 0)hsl(13, 100%, 6%)
Shadow Playrgb(46, 24, 0)hsl(31, 100%, 9%)
Cherry Pickingrgb(87, 19, 31)hsl(349, 64%, 21%)

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.

  • Aa3.19:1 Poor#56693E on #200700
  • Aa3.19:1 Poor#200700 on #56693E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Zen Garden Olive to Cherry Picking — https://swatchly.xyz/palette/444f28-56693e-3f3600-200700-2e1800-57131f */
:root {
  --zen-garden-olive: #444f28;
  --under-the-radar: #56693e;
  --wasabi-nori: #3f3600;
  --dwarf-fortress: #200700;
  --shadow-play: #2e1800;
  --cherry-picking: #57131f;
}

Tailwind CSS v4

/* Zen Garden Olive to Cherry Picking — https://swatchly.xyz/palette/444f28-56693e-3f3600-200700-2e1800-57131f */
@theme {
  --color-zen-garden-olive: #444f28;
  --color-zen-garden-olive-50: #f1f9e1;
  --color-zen-garden-olive-100: #e7f0d4;
  --color-zen-garden-olive-200: #d2ddbc;
  --color-zen-garden-olive-300: #bcc8a3;
  --color-zen-garden-olive-400: #9eab82;
  --color-zen-garden-olive-500: #849167;
  --color-zen-garden-olive-600: #6b774f;
  --color-zen-garden-olive-700: #56613c;
  --color-zen-garden-olive-800: #444f28;
  --color-zen-garden-olive-900: #343d20;
  --color-zen-garden-olive-950: #202711;
  --color-under-the-radar: #56693e;
  --color-under-the-radar-50: #eefae0;
  --color-under-the-radar-100: #e1efd1;
  --color-under-the-radar-200: #cadbb6;
  --color-under-the-radar-300: #b0c39a;
  --color-under-the-radar-400: #8ea276;
  --color-under-the-radar-500: #718559;
  --color-under-the-radar-600: #56693e;
  --color-under-the-radar-700: #43532e;
  --color-under-the-radar-800: #344221;
  --color-under-the-radar-900: #273318;
  --color-under-the-radar-950: #17200c;
  --color-wasabi-nori: #3f3600;
  --color-wasabi-nori-50: #fbf6da;
  --color-wasabi-nori-100: #f2eccc;
  --color-wasabi-nori-200: #e0d9b3;
  --color-wasabi-nori-300: #cac297;
  --color-wasabi-nori-400: #aca373;
  --color-wasabi-nori-500: #928857;
  --color-wasabi-nori-600: #776e3e;
  --color-wasabi-nori-700: #60582c;
  --color-wasabi-nori-800: #4d461e;
  --color-wasabi-nori-900: #3f3600;
  --color-wasabi-nori-950: #272208;
  --color-dwarf-fortress: #200700;
  --color-dwarf-fortress-50: #fff2ec;
  --color-dwarf-fortress-100: #fee5db;
  --color-dwarf-fortress-200: #edd1c4;
  --color-dwarf-fortress-300: #d9b9ab;
  --color-dwarf-fortress-400: #bb998a;
  --color-dwarf-fortress-500: #9c7a6b;
  --color-dwarf-fortress-600: #7d5d4f;
  --color-dwarf-fortress-700: #604538;
  --color-dwarf-fortress-800: #473026;
  --color-dwarf-fortress-900: #312018;
  --color-dwarf-fortress-950: #200700;
  --color-shadow-play: #2e1800;
  --color-shadow-play-50: #fff3e7;
  --color-shadow-play-100: #fbe8d5;
  --color-shadow-play-200: #ead3bd;
  --color-shadow-play-300: #d5bca3;
  --color-shadow-play-400: #b79c81;
  --color-shadow-play-500: #9c8065;
  --color-shadow-play-600: #80664b;
  --color-shadow-play-700: #674f38;
  --color-shadow-play-800: #513d28;
  --color-shadow-play-900: #3f2e1c;
  --color-shadow-play-950: #2e1800;
  --color-cherry-picking: #57131f;
  --color-cherry-picking-50: #fff1f2;
  --color-cherry-picking-100: #ffe3e4;
  --color-cherry-picking-200: #ffc7ca;
  --color-cherry-picking-300: #f2abaf;
  --color-cherry-picking-400: #d5888d;
  --color-cherry-picking-500: #b86b71;
  --color-cherry-picking-600: #9a5158;
  --color-cherry-picking-700: #7d3c43;
  --color-cherry-picking-800: #642b31;
  --color-cherry-picking-900: #57131f;
  --color-cherry-picking-950: #321114;
}

Similar palettes