Burnt Coffee to Igniting Color Palette

About this palette

Burnt Coffee to Igniting is a 4-color warm, earthy, vintage, monochromatic, gradient palette: #231E12 (Burnt Coffee), #7B5F19 (Himalaya), #AD9252 (Salted Capers), #EFD59E (Igniting). It mixes gray, brown, yellow tones and feels warm overall. The strongest text pairing is #231E12 on #EFD59E with a contrast ratio of 11.60:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burnt Coffee	rgb(35, 30, 18)	hsl(42, 32%, 10%)
Himalaya	rgb(123, 95, 25)	hsl(43, 66%, 29%)
Salted Capers	rgb(173, 146, 82)	hsl(42, 36%, 50%)
Igniting	rgb(239, 213, 158)	hsl(41, 72%, 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.

Aa11.60:1 Very good#231E12 on #EFD59E
Aa11.60:1 Very good#EFD59E on #231E12
Aa5.54:1 Good#231E12 on #AD9252
Aa5.54:1 Good#AD9252 on #231E12
Aa4.20:1 Poor#7B5F19 on #EFD59E
Aa4.20:1 Poor#EFD59E on #7B5F19

Color blindness preview

CSS variables

/* Burnt Coffee to Igniting — https://swatchly.xyz/palette/231e12-7b5f19-ad9252-efd59e */
:root {
  --burnt-coffee: #231e12;
  --himalaya: #7b5f19;
  --salted-capers: #ad9252;
  --igniting: #efd59e;
}

Tailwind CSS v4

/* Burnt Coffee to Igniting — https://swatchly.xyz/palette/231e12-7b5f19-ad9252-efd59e */
@theme {
  --color-burnt-coffee: #231e12;
  --color-burnt-coffee-50: #f9f5ec;
  --color-burnt-coffee-100: #efebe1;
  --color-burnt-coffee-200: #dcd7cb;
  --color-burnt-coffee-300: #c6c0b3;
  --color-burnt-coffee-400: #a7a192;
  --color-burnt-coffee-500: #8c8577;
  --color-burnt-coffee-600: #716b5d;
  --color-burnt-coffee-700: #5a5448;
  --color-burnt-coffee-800: #464137;
  --color-burnt-coffee-900: #363229;
  --color-burnt-coffee-950: #231e12;
  --color-himalaya: #7b5f19;
  --color-himalaya-50: #fff4dd;
  --color-himalaya-100: #fbe8be;
  --color-himalaya-200: #e9d2a0;
  --color-himalaya-300: #d4b980;
  --color-himalaya-400: #b49858;
  --color-himalaya-500: #987b39;
  --color-himalaya-600: #7b5f19;
  --color-himalaya-700: #634b0a;
  --color-himalaya-800: #4f3a00;
  --color-himalaya-900: #3d2c00;
  --color-himalaya-950: #271b00;
  --color-salted-capers: #ad9252;
  --color-salted-capers-50: #ffefcc;
  --color-salted-capers-100: #f6e3b8;
  --color-salted-capers-200: #e3cd9a;
  --color-salted-capers-300: #ccb47b;
  --color-salted-capers-400: #ad9252;
  --color-salted-capers-500: #937939;
  --color-salted-capers-600: #796121;
  --color-salted-capers-700: #634c0f;
  --color-salted-capers-800: #4f3c03;
  --color-salted-capers-900: #3f2e00;
  --color-salted-capers-950: #291d00;
  --color-igniting: #efd59e;
  --color-igniting-50: #fff5df;
  --color-igniting-100: #faeac9;
  --color-igniting-200: #efd59e;
  --color-igniting-300: #d5bf91;
  --color-igniting-400: #b79f6c;
  --color-igniting-500: #9b834f;
  --color-igniting-600: #806935;
  --color-igniting-700: #675222;
  --color-igniting-800: #523f14;
  --color-igniting-900: #40300b;
  --color-igniting-950: #291d04;
}