Khaki to Home Brew Color Palette

About this palette

Khaki to Home Brew is a 5-color muted, warm, earthy palette: #BAB396 (Khaki), #2A261E (Wood Bark), #544F3F (Kelp), #E9DEC4 (Heavy Cream), #87795B (Home Brew). It mixes yellow, gray tones and feels warm overall. The strongest text pairing is #2A261E on #E9DEC4 with a contrast ratio of 11.27:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Khaki	rgb(186, 179, 150)	hsl(48, 21%, 66%)
Wood Bark	rgb(42, 38, 30)	hsl(40, 17%, 14%)
Kelp	rgb(84, 79, 63)	hsl(46, 14%, 29%)
Heavy Cream	rgb(233, 222, 196)	hsl(42, 46%, 84%)
Home Brew	rgb(135, 121, 91)	hsl(41, 19%, 44%)

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.27:1 Very good#2A261E on #E9DEC4
Aa11.27:1 Very good#E9DEC4 on #2A261E
Aa7.15:1 Very good#BAB396 on #2A261E
Aa7.15:1 Very good#2A261E on #BAB396
Aa6.12:1 Good#544F3F on #E9DEC4
Aa6.12:1 Good#E9DEC4 on #544F3F
Aa3.89:1 Poor#BAB396 on #544F3F
Aa3.89:1 Poor#544F3F on #BAB396

Color blindness preview

CSS variables

/* Khaki to Home Brew — https://swatchly.xyz/palette/bab396-2a261e-544f3f-e9dec4-87795b */
:root {
  --khaki: #bab396;
  --wood-bark: #2a261e;
  --kelp: #544f3f;
  --heavy-cream: #e9dec4;
  --home-brew: #87795b;
}

Tailwind CSS v4

/* Khaki to Home Brew — https://swatchly.xyz/palette/bab396-2a261e-544f3f-e9dec4-87795b */
@theme {
  --color-khaki: #bab396;
  --color-khaki-50: #f2eedc;
  --color-khaki-100: #e6e2cd;
  --color-khaki-200: #d1ccb4;
  --color-khaki-300: #bab396;
  --color-khaki-400: #9d967b;
  --color-khaki-500: #847e62;
  --color-khaki-600: #6c664c;
  --color-khaki-700: #57513a;
  --color-khaki-800: #46402c;
  --color-khaki-900: #373321;
  --color-khaki-950: #221f12;
  --color-wood-bark: #2a261e;
  --color-wood-bark-50: #f8f5ef;
  --color-wood-bark-100: #eeebe4;
  --color-wood-bark-200: #dbd7cf;
  --color-wood-bark-300: #c5c0b8;
  --color-wood-bark-400: #a6a197;
  --color-wood-bark-500: #8c877d;
  --color-wood-bark-600: #736e65;
  --color-wood-bark-700: #5d5950;
  --color-wood-bark-800: #4b4740;
  --color-wood-bark-900: #3c3932;
  --color-wood-bark-950: #2a261e;
  --color-kelp: #544f3f;
  --color-kelp-50: #f8f5eb;
  --color-kelp-100: #efebdf;
  --color-kelp-200: #dbd6c8;
  --color-kelp-300: #c3beaf;
  --color-kelp-400: #a39e8d;
  --color-kelp-500: #878270;
  --color-kelp-600: #6b6656;
  --color-kelp-700: #544f3f;
  --color-kelp-800: #413d31;
  --color-kelp-900: #322f24;
  --color-kelp-950: #1f1d15;
  --color-heavy-cream: #e9dec4;
  --color-heavy-cream-50: #fffaed;
  --color-heavy-cream-100: #f7f1e2;
  --color-heavy-cream-200: #e9dec4;
  --color-heavy-cream-300: #cfc6b1;
  --color-heavy-cream-400: #afa58e;
  --color-heavy-cream-500: #938971;
  --color-heavy-cream-600: #776d56;
  --color-heavy-cream-700: #5e5541;
  --color-heavy-cream-800: #494230;
  --color-heavy-cream-900: #393223;
  --color-heavy-cream-950: #231f14;
  --color-home-brew: #87795b;
  --color-home-brew-50: #fbf2e0;
  --color-home-brew-100: #f0e6d1;
  --color-home-brew-200: #dcd0b7;
  --color-home-brew-300: #c5b79b;
  --color-home-brew-400: #a49678;
  --color-home-brew-500: #87795b;
  --color-home-brew-600: #6e6145;
  --color-home-brew-700: #584d33;
  --color-home-brew-800: #463c26;
  --color-home-brew-900: #372e1c;
  --color-home-brew-950: #231d0f;
}