Very Coffee to Noir Mystique Color Palette

About this palette

Very Coffee to Noir Mystique is a 5-color dark, warm, earthy palette: #5C4500 (Very Coffee), #814433 (Cacao Nibs), #080B00 (Blackn’t), #493220 (Café Noir), #241800 (Noir Mystique). It mixes brown, red, black tones and feels warm overall. The strongest text pairing is #814433 on #080B00 with a contrast ratio of 2.65:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Very Coffee	rgb(92, 69, 0)	hsl(45, 100%, 18%)
Cacao Nibs	rgb(129, 68, 51)	hsl(13, 43%, 35%)
Blackn’t	rgb(8, 11, 0)	hsl(76, 100%, 2%)
Café Noir	rgb(73, 50, 32)	hsl(26, 39%, 21%)
Noir Mystique	rgb(36, 24, 0)	hsl(40, 100%, 7%)

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.

Color blindness preview

CSS variables

/* Very Coffee to Noir Mystique — https://swatchly.xyz/palette/5c4500-814433-080b00-493220-241800 */
:root {
  --very-coffee: #5c4500;
  --cacao-nibs: #814433;
  --blackn-t: #080b00;
  --caf-noir: #493220;
  --noir-mystique: #241800;
}

Tailwind CSS v4

/* Very Coffee to Noir Mystique — https://swatchly.xyz/palette/5c4500-814433-080b00-493220-241800 */
@theme {
  --color-very-coffee: #5c4500;
  --color-very-coffee-50: #fff4dc;
  --color-very-coffee-100: #faeac5;
  --color-very-coffee-200: #e9d6aa;
  --color-very-coffee-300: #d6c08e;
  --color-very-coffee-400: #b9a16a;
  --color-very-coffee-500: #9f874d;
  --color-very-coffee-600: #856d34;
  --color-very-coffee-700: #6e5820;
  --color-very-coffee-800: #5c4500;
  --color-very-coffee-900: #463507;
  --color-very-coffee-950: #2e2102;
  --color-cacao-nibs: #814433;
  --color-cacao-nibs-50: #fff2ee;
  --color-cacao-nibs-100: #ffe5dd;
  --color-cacao-nibs-200: #ffcabb;
  --color-cacao-nibs-300: #eeb1a0;
  --color-cacao-nibs-400: #d2907e;
  --color-cacao-nibs-500: #b67462;
  --color-cacao-nibs-600: #995b49;
  --color-cacao-nibs-700: #814433;
  --color-cacao-nibs-800: #663426;
  --color-cacao-nibs-900: #51271b;
  --color-cacao-nibs-950: #35160e;
  --color-blackn-t: #080b00;
  --color-blackn-t-50: #f3f7ea;
  --color-blackn-t-100: #e9edde;
  --color-blackn-t-200: #d5dac8;
  --color-blackn-t-300: #bfc4b0;
  --color-blackn-t-400: #9fa58f;
  --color-blackn-t-500: #7f846e;
  --color-blackn-t-600: #606551;
  --color-blackn-t-700: #464a39;
  --color-blackn-t-800: #303325;
  --color-blackn-t-900: #1e2016;
  --color-blackn-t-950: #080b00;
  --color-caf-noir: #493220;
  --color-caf-noir-50: #fff3e9;
  --color-caf-noir-100: #fae7da;
  --color-caf-noir-200: #e9d3c3;
  --color-caf-noir-300: #d4bca9;
  --color-caf-noir-400: #b79d89;
  --color-caf-noir-500: #9d826e;
  --color-caf-noir-600: #826955;
  --color-caf-noir-700: #6b5342;
  --color-caf-noir-800: #564232;
  --color-caf-noir-900: #493220;
  --color-caf-noir-950: #2d2016;
  --color-noir-mystique: #241800;
  --color-noir-mystique-50: #fdf4e3;
  --color-noir-mystique-100: #f4ead7;
  --color-noir-mystique-200: #e2d6bf;
  --color-noir-mystique-300: #cdbfa5;
  --color-noir-mystique-400: #aea083;
  --color-noir-mystique-500: #928367;
  --color-noir-mystique-600: #76684d;
  --color-noir-mystique-700: #5d5138;
  --color-noir-mystique-800: #483d28;
  --color-noir-mystique-900: #362d1c;
  --color-noir-mystique-950: #241800;
}