Zen Garden to Professor Plum Color Palette

About this palette

Zen Garden to Professor Plum is a 4-color muted, gradient palette: #C9DCC4 (Zen Garden), #82A289 (Basil), #62535E (Pinot Noir), #3E313B (Professor Plum). It mixes green, gray tones and feels cool overall. The strongest text pairing is #C9DCC4 on #3E313B with a contrast ratio of 8.50:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zen Garden	rgb(201, 220, 196)	hsl(108, 26%, 82%)
Basil	rgb(130, 162, 137)	hsl(133, 15%, 57%)
Pinot Noir	rgb(98, 83, 94)	hsl(316, 8%, 35%)
Professor Plum	rgb(62, 49, 59)	hsl(314, 12%, 22%)

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.

Aa8.50:1 Very good#C9DCC4 on #3E313B
Aa8.50:1 Very good#3E313B on #C9DCC4
Aa4.97:1 Good#C9DCC4 on #62535E
Aa4.97:1 Good#62535E on #C9DCC4
Aa4.38:1 Poor#82A289 on #3E313B
Aa4.38:1 Poor#3E313B on #82A289

Color blindness preview

CSS variables

/* Zen Garden to Professor Plum — https://swatchly.xyz/palette/c9dcc4-82a289-62535e-3e313b */
:root {
  --zen-garden: #c9dcc4;
  --basil: #82a289;
  --pinot-noir: #62535e;
  --professor-plum: #3e313b;
}

Tailwind CSS v4

/* Zen Garden to Professor Plum — https://swatchly.xyz/palette/c9dcc4-82a289-62535e-3e313b */
@theme {
  --color-zen-garden: #c9dcc4;
  --color-zen-garden-50: #edf7ea;
  --color-zen-garden-100: #e2eede;
  --color-zen-garden-200: #c9dcc4;
  --color-zen-garden-300: #b5c5b1;
  --color-zen-garden-400: #95a690;
  --color-zen-garden-500: #7a8b75;
  --color-zen-garden-600: #60715c;
  --color-zen-garden-700: #4b5a47;
  --color-zen-garden-800: #3a4736;
  --color-zen-garden-900: #2b3629;
  --color-zen-garden-950: #1a2218;
  --color-basil: #82a289;
  --color-basil-50: #e4f8e8;
  --color-basil-100: #d7eddc;
  --color-basil-200: #bfd9c4;
  --color-basil-300: #a5c2ab;
  --color-basil-400: #82a289;
  --color-basil-500: #698870;
  --color-basil-600: #516f58;
  --color-basil-700: #3e5944;
  --color-basil-800: #2f4635;
  --color-basil-900: #233728;
  --color-basil-950: #152318;
  --color-pinot-noir: #62535e;
  --color-pinot-noir-50: #fcf2f9;
  --color-pinot-noir-100: #f3e7ef;
  --color-pinot-noir-200: #e1d4dd;
  --color-pinot-noir-300: #ccbdc8;
  --color-pinot-noir-400: #ae9ea9;
  --color-pinot-noir-500: #93838e;
  --color-pinot-noir-600: #786974;
  --color-pinot-noir-700: #62535e;
  --color-pinot-noir-800: #4d4049;
  --color-pinot-noir-900: #3b3139;
  --color-pinot-noir-950: #251e23;
  --color-professor-plum: #3e313b;
  --color-professor-plum-50: #fbf2f9;
  --color-professor-plum-100: #f2e7ef;
  --color-professor-plum-200: #e0d3dc;
  --color-professor-plum-300: #cabcc7;
  --color-professor-plum-400: #ac9da8;
  --color-professor-plum-500: #91828d;
  --color-professor-plum-600: #776873;
  --color-professor-plum-700: #60535d;
  --color-professor-plum-800: #4c414a;
  --color-professor-plum-900: #3e313b;
  --color-professor-plum-950: #261f24;
}