Bat Wing to Khaki Color Palette

About this palette

Bat Wing to Khaki is a 5-color muted, warm, earthy palette: #86716B (Bat Wing), #594236 (Espresso Bar), #332B1E (Go to Hell Black), #E4DCBC (Silver Fern), #C6B28C (Khaki). It mixes gray, brown, yellow tones and feels warm overall. The strongest text pairing is #332B1E on #E4DCBC with a contrast ratio of 10.14:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bat Wing	rgb(134, 113, 107)	hsl(13, 11%, 47%)
Espresso Bar	rgb(89, 66, 54)	hsl(21, 24%, 28%)
Go to Hell Black	rgb(51, 43, 30)	hsl(37, 26%, 16%)
Silver Fern	rgb(228, 220, 188)	hsl(48, 43%, 82%)
Khaki	rgb(198, 178, 140)	hsl(39, 34%, 66%)

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.

Aa10.14:1 Very good#332B1E on #E4DCBC
Aa10.14:1 Very good#E4DCBC on #332B1E
Aa6.76:1 Good#594236 on #E4DCBC
Aa6.76:1 Good#E4DCBC on #594236
Aa6.74:1 Good#332B1E on #C6B28C
Aa6.74:1 Good#C6B28C on #332B1E
Aa4.50:1 Poor#594236 on #C6B28C
Aa4.50:1 Poor#C6B28C on #594236

Color blindness preview

CSS variables

/* Bat Wing to Khaki — https://swatchly.xyz/palette/86716b-594236-332b1e-e4dcbc-c6b28c */
:root {
  --bat-wing: #86716b;
  --espresso-bar: #594236;
  --go-to-hell-black: #332b1e;
  --silver-fern: #e4dcbc;
  --khaki: #c6b28c;
}

Tailwind CSS v4

/* Bat Wing to Khaki — https://swatchly.xyz/palette/86716b-594236-332b1e-e4dcbc-c6b28c */
@theme {
  --color-bat-wing: #86716b;
  --color-bat-wing-50: #fff2ee;
  --color-bat-wing-100: #f8eae5;
  --color-bat-wing-200: #e8d7d2;
  --color-bat-wing-300: #d5c2bc;
  --color-bat-wing-400: #b9a49e;
  --color-bat-wing-500: #9f8a84;
  --color-bat-wing-600: #86716b;
  --color-bat-wing-700: #6c5953;
  --color-bat-wing-800: #554440;
  --color-bat-wing-900: #423430;
  --color-bat-wing-950: #2a1f1d;
  --color-espresso-bar: #594236;
  --color-espresso-bar-50: #fff2ec;
  --color-espresso-bar-100: #f9e7de;
  --color-espresso-bar-200: #e8d3c8;
  --color-espresso-bar-300: #d4bcb0;
  --color-espresso-bar-400: #b79e90;
  --color-espresso-bar-500: #9d8376;
  --color-espresso-bar-600: #826a5d;
  --color-espresso-bar-700: #6b5449;
  --color-espresso-bar-800: #594236;
  --color-espresso-bar-900: #44332a;
  --color-espresso-bar-950: #2c1f19;
  --color-go-to-hell-black: #332b1e;
  --color-go-to-hell-black-50: #faf4eb;
  --color-go-to-hell-black-100: #f1eae0;
  --color-go-to-hell-black-200: #ded6ca;
  --color-go-to-hell-black-300: #c8c0b2;
  --color-go-to-hell-black-400: #a89f90;
  --color-go-to-hell-black-500: #8c8273;
  --color-go-to-hell-black-600: #706758;
  --color-go-to-hell-black-700: #574f43;
  --color-go-to-hell-black-800: #423c31;
  --color-go-to-hell-black-900: #332b1e;
  --color-go-to-hell-black-950: #1d1a13;
  --color-silver-fern: #e4dcbc;
  --color-silver-fern-50: #fcf8e7;
  --color-silver-fern-100: #f4efdc;
  --color-silver-fern-200: #e4dcbc;
  --color-silver-fern-300: #cbc5aa;
  --color-silver-fern-400: #aca487;
  --color-silver-fern-500: #90886b;
  --color-silver-fern-600: #746d51;
  --color-silver-fern-700: #5d563c;
  --color-silver-fern-800: #48422c;
  --color-silver-fern-900: #383320;
  --color-silver-fern-950: #231f12;
  --color-khaki: #c6b28c;
  --color-khaki-50: #faedd6;
  --color-khaki-100: #efe1c7;
  --color-khaki-200: #dbcbac;
  --color-khaki-300: #c6b28c;
  --color-khaki-400: #a89571;
  --color-khaki-500: #8f7c58;
  --color-khaki-600: #756441;
  --color-khaki-700: #5f4f30;
  --color-khaki-800: #4d3e23;
  --color-khaki-900: #3d3119;
  --color-khaki-950: #271e0c;
}