Pastel Brown to Zen Garden Color Palette

About this palette

Pastel Brown to Zen Garden is a 4-color muted, warm, earthy, vintage, monochromatic palette: #806851 (Pastel Brown), #403414 (Café Noir), #BC9F84 (French Oak), #D0DCC2 (Zen Garden). It mixes brown, orange, green tones and feels warm overall. The strongest text pairing is #403414 on #D0DCC2 with a contrast ratio of 8.55:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Brown	rgb(128, 104, 81)	hsl(29, 22%, 41%)
Café Noir	rgb(64, 52, 20)	hsl(44, 52%, 16%)
French Oak	rgb(188, 159, 132)	hsl(29, 29%, 63%)
Zen Garden	rgb(208, 220, 194)	hsl(88, 27%, 81%)

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.55:1 Very good#403414 on #D0DCC2
Aa8.55:1 Very good#D0DCC2 on #403414
Aa4.90:1 Good#403414 on #BC9F84
Aa4.90:1 Good#BC9F84 on #403414
Aa3.66:1 Poor#806851 on #D0DCC2
Aa3.66:1 Poor#D0DCC2 on #806851

Color blindness preview

CSS variables

/* Pastel Brown to Zen Garden — https://swatchly.xyz/palette/806851-403414-bc9f84-d0dcc2 */
:root {
  --pastel-brown: #806851;
  --caf-noir: #403414;
  --french-oak: #bc9f84;
  --zen-garden: #d0dcc2;
}

Tailwind CSS v4

/* Pastel Brown to Zen Garden — https://swatchly.xyz/palette/806851-403414-bc9f84-d0dcc2 */
@theme {
  --color-pastel-brown: #806851;
  --color-pastel-brown-50: #fff3e7;
  --color-pastel-brown-100: #f9e8d8;
  --color-pastel-brown-200: #e8d4c1;
  --color-pastel-brown-300: #d4bda8;
  --color-pastel-brown-400: #b69d86;
  --color-pastel-brown-500: #9b826a;
  --color-pastel-brown-600: #806851;
  --color-pastel-brown-700: #67523d;
  --color-pastel-brown-800: #523f2d;
  --color-pastel-brown-900: #403021;
  --color-pastel-brown-950: #281d12;
  --color-caf-noir: #403414;
  --color-caf-noir-50: #fdf5e1;
  --color-caf-noir-100: #f4ebd4;
  --color-caf-noir-200: #e1d7bc;
  --color-caf-noir-300: #ccc0a2;
  --color-caf-noir-400: #aea180;
  --color-caf-noir-500: #948664;
  --color-caf-noir-600: #796c4c;
  --color-caf-noir-700: #625638;
  --color-caf-noir-800: #4e4429;
  --color-caf-noir-900: #403414;
  --color-caf-noir-950: #272110;
  --color-french-oak: #bc9f84;
  --color-french-oak-50: #fff4eb;
  --color-french-oak-100: #fce9d8;
  --color-french-oak-200: #ecd6c1;
  --color-french-oak-300: #d8bfa8;
  --color-french-oak-400: #bc9f84;
  --color-french-oak-500: #9f8369;
  --color-french-oak-600: #83684f;
  --color-french-oak-700: #6a523b;
  --color-french-oak-800: #543f2b;
  --color-french-oak-900: #412f1e;
  --color-french-oak-950: #291c10;
  --color-zen-garden: #d0dcc2;
  --color-zen-garden-50: #f1f8e9;
  --color-zen-garden-100: #e6eede;
  --color-zen-garden-200: #d0dcc2;
  --color-zen-garden-300: #bbc5af;
  --color-zen-garden-400: #9ba68e;
  --color-zen-garden-500: #808a73;
  --color-zen-garden-600: #667059;
  --color-zen-garden-700: #505944;
  --color-zen-garden-800: #3e4634;
  --color-zen-garden-900: #2f3626;
  --color-zen-garden-950: #1c2116;
}