Burnt Coffee to Noble Knight Color Palette

About this palette

Burnt Coffee to Noble Knight is a 4-color vintage palette: #281F0B (Burnt Coffee), #E5D19D (Honeycomb Glow), #6E8ABA (Kimono), #3F4D77 (Noble Knight). It mixes brown, yellow, blue tones and feels balanced overall. The strongest text pairing is #281F0B on #E5D19D with a contrast ratio of 10.80:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burnt Coffee	rgb(40, 31, 11)	hsl(41, 57%, 10%)
Honeycomb Glow	rgb(229, 209, 157)	hsl(43, 58%, 76%)
Kimono	rgb(110, 138, 186)	hsl(218, 36%, 58%)
Noble Knight	rgb(63, 77, 119)	hsl(225, 31%, 36%)

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.80:1 Very good#281F0B on #E5D19D
Aa10.80:1 Very good#E5D19D on #281F0B
Aa5.49:1 Good#E5D19D on #3F4D77
Aa5.49:1 Good#3F4D77 on #E5D19D
Aa4.65:1 Good#281F0B on #6E8ABA
Aa4.65:1 Good#6E8ABA on #281F0B

Color blindness preview

CSS variables

/* Burnt Coffee to Noble Knight — https://swatchly.xyz/palette/281f0b-e5d19d-6e8aba-3f4d77 */
:root {
  --burnt-coffee: #281f0b;
  --honeycomb-glow: #e5d19d;
  --kimono: #6e8aba;
  --noble-knight: #3f4d77;
}

Tailwind CSS v4

/* Burnt Coffee to Noble Knight — https://swatchly.xyz/palette/281f0b-e5d19d-6e8aba-3f4d77 */
@theme {
  --color-burnt-coffee: #281f0b;
  --color-burnt-coffee-50: #fbf4e7;
  --color-burnt-coffee-100: #f2eadb;
  --color-burnt-coffee-200: #dfd7c4;
  --color-burnt-coffee-300: #cac0ab;
  --color-burnt-coffee-400: #aba08a;
  --color-burnt-coffee-500: #90856e;
  --color-burnt-coffee-600: #756b55;
  --color-burnt-coffee-700: #5e5541;
  --color-burnt-coffee-800: #4a4231;
  --color-burnt-coffee-900: #3a3324;
  --color-burnt-coffee-950: #281f0b;
  --color-honeycomb-glow: #e5d19d;
  --color-honeycomb-glow-50: #fdf1d3;
  --color-honeycomb-glow-100: #f3e6c5;
  --color-honeycomb-glow-200: #e5d19d;
  --color-honeycomb-glow-300: #cdbc8f;
  --color-honeycomb-glow-400: #af9d6c;
  --color-honeycomb-glow-500: #958251;
  --color-honeycomb-glow-600: #7a6839;
  --color-honeycomb-glow-700: #635326;
  --color-honeycomb-glow-800: #4f4119;
  --color-honeycomb-glow-900: #3d310f;
  --color-honeycomb-glow-950: #271e06;
  --color-kimono: #6e8aba;
  --color-kimono-50: #f1f6ff;
  --color-kimono-100: #e2edff;
  --color-kimono-200: #c5daff;
  --color-kimono-300: #abc4f0;
  --color-kimono-400: #8aa5d4;
  --color-kimono-500: #6e8aba;
  --color-kimono-600: #546f9c;
  --color-kimono-700: #3f5781;
  --color-kimono-800: #2f4468;
  --color-kimono-900: #223352;
  --color-kimono-950: #131f35;
  --color-noble-knight: #3f4d77;
  --color-noble-knight-50: #f1f5ff;
  --color-noble-knight-100: #e3ebff;
  --color-noble-knight-200: #c8d6fb;
  --color-noble-knight-300: #aebee8;
  --color-noble-knight-400: #8c9dca;
  --color-noble-knight-500: #7080ae;
  --color-noble-knight-600: #56658f;
  --color-noble-knight-700: #3f4d77;
  --color-noble-knight-800: #313c5d;
  --color-noble-knight-900: #242e49;
  --color-noble-knight-950: #151c2f;
}