Khaki to Ivy Topiary Color Palette

About this palette

Khaki to Ivy Topiary is a 5-color muted, warm, earthy palette: #C1B090 (Khaki), #423B2D (Batch Brew), #98846A (Tahini Brown), #E9DAC1 (Clam Up), #695E4B (Ivy Topiary). It mixes yellow, gray, orange tones and feels warm overall. The strongest text pairing is #423B2D on #E9DAC1 with a contrast ratio of 8.05:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Khaki	rgb(193, 176, 144)	hsl(39, 28%, 66%)
Batch Brew	rgb(66, 59, 45)	hsl(40, 19%, 22%)
Tahini Brown	rgb(152, 132, 106)	hsl(34, 18%, 51%)
Clam Up	rgb(233, 218, 193)	hsl(37, 48%, 84%)
Ivy Topiary	rgb(105, 94, 75)	hsl(38, 17%, 35%)

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.05:1 Very good#423B2D on #E9DAC1
Aa8.05:1 Very good#E9DAC1 on #423B2D
Aa5.21:1 Good#C1B090 on #423B2D
Aa5.21:1 Good#423B2D on #C1B090
Aa4.62:1 Good#E9DAC1 on #695E4B
Aa4.62:1 Good#695E4B on #E9DAC1
Aa3.08:1 Poor#423B2D on #98846A
Aa3.08:1 Poor#98846A on #423B2D

Color blindness preview

CSS variables

/* Khaki to Ivy Topiary — https://swatchly.xyz/palette/c1b090-423b2d-98846a-e9dac1-695e4b */
:root {
  --khaki: #c1b090;
  --batch-brew: #423b2d;
  --tahini-brown: #98846a;
  --clam-up: #e9dac1;
  --ivy-topiary: #695e4b;
}

Tailwind CSS v4

/* Khaki to Ivy Topiary — https://swatchly.xyz/palette/c1b090-423b2d-98846a-e9dac1-695e4b */
@theme {
  --color-khaki: #c1b090;
  --color-khaki-50: #f7ecd8;
  --color-khaki-100: #ece0c9;
  --color-khaki-200: #d7c9af;
  --color-khaki-300: #c1b090;
  --color-khaki-400: #a49375;
  --color-khaki-500: #8b7b5c;
  --color-khaki-600: #726346;
  --color-khaki-700: #5d4f35;
  --color-khaki-800: #4b3f28;
  --color-khaki-900: #3c311d;
  --color-khaki-950: #261e10;
  --color-batch-brew: #423b2d;
  --color-batch-brew-50: #f9f5eb;
  --color-batch-brew-100: #f0ebe0;
  --color-batch-brew-200: #ddd7ca;
  --color-batch-brew-300: #c6bfb0;
  --color-batch-brew-400: #a69e8e;
  --color-batch-brew-500: #898272;
  --color-batch-brew-600: #6e6657;
  --color-batch-brew-700: #554f42;
  --color-batch-brew-800: #423b2d;
  --color-batch-brew-900: #322d24;
  --color-batch-brew-950: #1e1b14;
  --color-tahini-brown: #98846a;
  --color-tahini-brown-50: #fff4e5;
  --color-tahini-brown-100: #f7e9d8;
  --color-tahini-brown-200: #e6d6c1;
  --color-tahini-brown-300: #d1bfa8;
  --color-tahini-brown-400: #b39f86;
  --color-tahini-brown-500: #98846a;
  --color-tahini-brown-600: #7c6951;
  --color-tahini-brown-700: #64533c;
  --color-tahini-brown-800: #4f402c;
  --color-tahini-brown-900: #3d3120;
  --color-tahini-brown-950: #271e12;
  --color-clam-up: #e9dac1;
  --color-clam-up-50: #fff7ea;
  --color-clam-up-100: #f7eedf;
  --color-clam-up-200: #e9dac1;
  --color-clam-up-300: #cfc3ae;
  --color-clam-up-400: #b0a28c;
  --color-clam-up-500: #94866f;
  --color-clam-up-600: #786b55;
  --color-clam-up-700: #605440;
  --color-clam-up-800: #4b412f;
  --color-clam-up-900: #3a3123;
  --color-clam-up-950: #251e14;
  --color-ivy-topiary: #695e4b;
  --color-ivy-topiary-50: #fbf4e8;
  --color-ivy-topiary-100: #f2eadd;
  --color-ivy-topiary-200: #e1d8c9;
  --color-ivy-topiary-300: #cec3b2;
  --color-ivy-topiary-400: #b1a692;
  --color-ivy-topiary-500: #988c78;
  --color-ivy-topiary-600: #7e7360;
  --color-ivy-topiary-700: #695e4b;
  --color-ivy-topiary-800: #534939;
  --color-ivy-topiary-900: #40382a;
  --color-ivy-topiary-950: #292319;
}