Burnt Coffee to Hint of Red Color Palette

About this palette

Burnt Coffee to Hint of Red is a 5-color muted palette: #231F16 (Burnt Coffee), #674849 (Liver), #537E81 (Submerged), #ACBDD5 (Supremely Cool), #F9DFE1 (Hint of Red). It mixes gray, red, turquoise, blue tones and feels cool overall. The strongest text pairing is #231F16 on #F9DFE1 with a contrast ratio of 13.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burnt Coffee	rgb(35, 31, 22)	hsl(42, 23%, 11%)
Liver	rgb(103, 72, 73)	hsl(358, 18%, 34%)
Submerged	rgb(83, 126, 129)	hsl(184, 22%, 42%)
Supremely Cool	rgb(172, 189, 213)	hsl(215, 33%, 75%)
Hint of Red	rgb(249, 223, 225)	hsl(355, 68%, 93%)

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.

Aa13.03:1 Super#231F16 on #F9DFE1
Aa13.03:1 Super#F9DFE1 on #231F16
Aa8.60:1 Very good#231F16 on #ACBDD5
Aa8.60:1 Very good#ACBDD5 on #231F16
Aa6.41:1 Good#674849 on #F9DFE1
Aa6.41:1 Good#F9DFE1 on #674849
Aa4.23:1 Poor#674849 on #ACBDD5
Aa4.23:1 Poor#ACBDD5 on #674849

Color blindness preview

CSS variables

/* Burnt Coffee to Hint of Red — https://swatchly.xyz/palette/231f16-674849-537e81-acbdd5-f9dfe1 */
:root {
  --burnt-coffee: #231f16;
  --liver: #674849;
  --submerged: #537e81;
  --supremely-cool: #acbdd5;
  --hint-of-red: #f9dfe1;
}

Tailwind CSS v4

/* Burnt Coffee to Hint of Red — https://swatchly.xyz/palette/231f16-674849-537e81-acbdd5-f9dfe1 */
@theme {
  --color-burnt-coffee: #231f16;
  --color-burnt-coffee-50: #f8f5ee;
  --color-burnt-coffee-100: #eeebe3;
  --color-burnt-coffee-200: #dbd7ce;
  --color-burnt-coffee-300: #c5c0b6;
  --color-burnt-coffee-400: #a6a196;
  --color-burnt-coffee-500: #8b867b;
  --color-burnt-coffee-600: #706b61;
  --color-burnt-coffee-700: #59554b;
  --color-burnt-coffee-800: #46423a;
  --color-burnt-coffee-900: #36332c;
  --color-burnt-coffee-950: #231f16;
  --color-liver: #674849;
  --color-liver-50: #fff1f1;
  --color-liver-100: #fde5e5;
  --color-liver-200: #ebcfcf;
  --color-liver-300: #d6b6b7;
  --color-liver-400: #b89696;
  --color-liver-500: #9b797a;
  --color-liver-600: #7f5f60;
  --color-liver-700: #674849;
  --color-liver-800: #503839;
  --color-liver-900: #3f2a2b;
  --color-liver-950: #28191a;
  --color-submerged: #537e81;
  --color-submerged-50: #e2fbfc;
  --color-submerged-100: #d8f3f5;
  --color-submerged-200: #c2e2e4;
  --color-submerged-300: #a9ced1;
  --color-submerged-400: #88b1b4;
  --color-submerged-500: #6c979a;
  --color-submerged-600: #537e81;
  --color-submerged-700: #3d6568;
  --color-submerged-800: #2b4f52;
  --color-submerged-900: #1e3d3f;
  --color-submerged-950: #102628;
  --color-supremely-cool: #acbdd5;
  --color-supremely-cool-50: #ebf3ff;
  --color-supremely-cool-100: #dde8f9;
  --color-supremely-cool-200: #c7d4e7;
  --color-supremely-cool-300: #acbdd5;
  --color-supremely-cool-400: #8f9fb5;
  --color-supremely-cool-500: #74849b;
  --color-supremely-cool-600: #5c6b80;
  --color-supremely-cool-700: #475568;
  --color-supremely-cool-800: #374253;
  --color-supremely-cool-900: #293442;
  --color-supremely-cool-950: #19202a;
  --color-hint-of-red: #f9dfe1;
  --color-hint-of-red-50: #fcedee;
  --color-hint-of-red-100: #f9dfe1;
  --color-hint-of-red-200: #e2cecf;
  --color-hint-of-red-300: #cdb8b9;
  --color-hint-of-red-400: #b0999a;
  --color-hint-of-red-500: #957e80;
  --color-hint-of-red-600: #7b6567;
  --color-hint-of-red-700: #634f51;
  --color-hint-of-red-800: #4e3d3f;
  --color-hint-of-red-900: #3d2f30;
  --color-hint-of-red-950: #271c1d;
}