Khaki to Anise Biscotti Color Palette

About this palette

Khaki to Anise Biscotti is a 5-color cool, earthy, vintage palette: #BCB091 (Khaki), #586245 (Cypress), #074A38 (Zucchini), #7F985D (Mosslands), #E2D4AD (Anise Biscotti). It mixes yellow, green, turquoise tones and feels cool overall. The strongest text pairing is #074A38 on #E2D4AD with a contrast ratio of 6.97:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Khaki	rgb(188, 176, 145)	hsl(43, 24%, 65%)
Cypress	rgb(88, 98, 69)	hsl(81, 17%, 33%)
Zucchini	rgb(7, 74, 56)	hsl(164, 83%, 16%)
Mosslands	rgb(127, 152, 93)	hsl(85, 24%, 48%)
Anise Biscotti	rgb(226, 212, 173)	hsl(44, 48%, 78%)

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.

Aa6.97:1 Good#074A38 on #E2D4AD
Aa6.97:1 Good#E2D4AD on #074A38
Aa4.77:1 Good#BCB091 on #074A38
Aa4.77:1 Good#074A38 on #BCB091
Aa4.39:1 Poor#586245 on #E2D4AD
Aa4.39:1 Poor#E2D4AD on #586245
Aa3.20:1 Poor#074A38 on #7F985D
Aa3.20:1 Poor#7F985D on #074A38

Color blindness preview

CSS variables

/* Khaki to Anise Biscotti — https://swatchly.xyz/palette/bcb091-586245-074a38-7f985d-e2d4ad */
:root {
  --khaki: #bcb091;
  --cypress: #586245;
  --zucchini: #074a38;
  --mosslands: #7f985d;
  --anise-biscotti: #e2d4ad;
}

Tailwind CSS v4

/* Khaki to Anise Biscotti — https://swatchly.xyz/palette/bcb091-586245-074a38-7f985d-e2d4ad */
@theme {
  --color-khaki: #bcb091;
  --color-khaki-50: #fffaee;
  --color-khaki-100: #faf3e1;
  --color-khaki-200: #eae2cc;
  --color-khaki-300: #d7cdb4;
  --color-khaki-400: #bcb091;
  --color-khaki-500: #9d9274;
  --color-khaki-600: #807457;
  --color-khaki-700: #665b40;
  --color-khaki-800: #4f462e;
  --color-khaki-900: #3c3420;
  --color-khaki-950: #241f11;
  --color-cypress: #586245;
  --color-cypress-50: #f1f8e6;
  --color-cypress-100: #e7efda;
  --color-cypress-200: #d4ddc5;
  --color-cypress-300: #bfc9ad;
  --color-cypress-400: #a0ab8d;
  --color-cypress-500: #869172;
  --color-cypress-600: #6d785a;
  --color-cypress-700: #586245;
  --color-cypress-800: #444d34;
  --color-cypress-900: #343b26;
  --color-cypress-950: #202516;
  --color-zucchini: #074a38;
  --color-zucchini-50: #ddfef1;
  --color-zucchini-100: #d0f5e6;
  --color-zucchini-200: #b7e3d2;
  --color-zucchini-300: #9acdb9;
  --color-zucchini-400: #75ae99;
  --color-zucchini-500: #57927d;
  --color-zucchini-600: #3d7662;
  --color-zucchini-700: #295d4c;
  --color-zucchini-800: #074a38;
  --color-zucchini-900: #10382b;
  --color-zucchini-950: #07231a;
  --color-mosslands: #7f985d;
  --color-mosslands-50: #eefddb;
  --color-mosslands-100: #e4f5d0;
  --color-mosslands-200: #d0e4b8;
  --color-mosslands-300: #b9d09d;
  --color-mosslands-400: #9ab27a;
  --color-mosslands-500: #7f985d;
  --color-mosslands-600: #647b42;
  --color-mosslands-700: #4d622d;
  --color-mosslands-800: #3a4d1e;
  --color-mosslands-900: #2b3b12;
  --color-mosslands-950: #192507;
  --color-anise-biscotti: #e2d4ad;
  --color-anise-biscotti-50: #fbf3dd;
  --color-anise-biscotti-100: #f1e8d0;
  --color-anise-biscotti-200: #e2d4ad;
  --color-anise-biscotti-300: #cabe9d;
  --color-anise-biscotti-400: #ac9f7b;
  --color-anise-biscotti-500: #918460;
  --color-anise-biscotti-600: #776a47;
  --color-anise-biscotti-700: #5f5434;
  --color-anise-biscotti-800: #4b4225;
  --color-anise-biscotti-900: #3b321a;
  --color-anise-biscotti-950: #251f0d;
}