Very Coffee to Hot Butter Color Palette

About this palette

Very Coffee to Hot Butter is a 5-color warm, earthy, vintage, monochromatic palette: #694900 (Very Coffee), #A57500 (Falafel), #FFDCB2 (Pandora’s Box), #2B1C07 (Burnt Coffee), #DFA000 (Hot Butter). It mixes brown, yellow, orange tones and feels warm overall. The strongest text pairing is #FFDCB2 on #2B1C07 with a contrast ratio of 12.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Very Coffee	rgb(105, 73, 0)	hsl(42, 100%, 21%)
Falafel	rgb(165, 117, 0)	hsl(43, 100%, 32%)
Pandora’s Box	rgb(255, 220, 178)	hsl(33, 100%, 85%)
Burnt Coffee	rgb(43, 28, 7)	hsl(35, 72%, 10%)
Hot Butter	rgb(223, 160, 0)	hsl(43, 100%, 44%)

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.

Aa12.68:1 Super#FFDCB2 on #2B1C07
Aa12.68:1 Super#2B1C07 on #FFDCB2
Aa7.21:1 Very good#2B1C07 on #DFA000
Aa7.21:1 Very good#DFA000 on #2B1C07
Aa6.32:1 Good#694900 on #FFDCB2
Aa6.32:1 Good#FFDCB2 on #694900
Aa4.04:1 Poor#A57500 on #2B1C07
Aa4.04:1 Poor#2B1C07 on #A57500

Color blindness preview

CSS variables

/* Very Coffee to Hot Butter — https://swatchly.xyz/palette/694900-a57500-ffdcb2-2b1c07-dfa000 */
:root {
  --very-coffee: #694900;
  --falafel: #a57500;
  --pandora-s-box: #ffdcb2;
  --burnt-coffee: #2b1c07;
  --hot-butter: #dfa000;
}

Tailwind CSS v4

/* Very Coffee to Hot Butter — https://swatchly.xyz/palette/694900-a57500-ffdcb2-2b1c07-dfa000 */
@theme {
  --color-very-coffee: #694900;
  --color-very-coffee-50: #fff4e1;
  --color-very-coffee-100: #ffe8c2;
  --color-very-coffee-200: #eed2a5;
  --color-very-coffee-300: #d9ba86;
  --color-very-coffee-400: #bb995f;
  --color-very-coffee-500: #9e7c40;
  --color-very-coffee-600: #816125;
  --color-very-coffee-700: #694900;
  --color-very-coffee-800: #523904;
  --color-very-coffee-900: #402b00;
  --color-very-coffee-950: #291a00;
  --color-falafel: #a57500;
  --color-falafel-50: #fff2dd;
  --color-falafel-100: #ffe5ba;
  --color-falafel-200: #f4cd8b;
  --color-falafel-300: #e0b467;
  --color-falafel-400: #c29238;
  --color-falafel-500: #a57500;
  --color-falafel-600: #855e00;
  --color-falafel-700: #6a4a00;
  --color-falafel-800: #543a00;
  --color-falafel-900: #422c00;
  --color-falafel-950: #2a1b00;
  --color-pandora-s-box: #ffdcb2;
  --color-pandora-s-box-50: #ffead2;
  --color-pandora-s-box-100: #ffdcb2;
  --color-pandora-s-box-200: #e6cbab;
  --color-pandora-s-box-300: #d3b692;
  --color-pandora-s-box-400: #b79771;
  --color-pandora-s-box-500: #9d7d56;
  --color-pandora-s-box-600: #82643f;
  --color-pandora-s-box-700: #6b4f2d;
  --color-pandora-s-box-800: #553d1e;
  --color-pandora-s-box-900: #422e14;
  --color-pandora-s-box-950: #2a1c09;
  --color-burnt-coffee: #2b1c07;
  --color-burnt-coffee-50: #fff3e5;
  --color-burnt-coffee-100: #f6e9d9;
  --color-burnt-coffee-200: #e4d5c2;
  --color-burnt-coffee-300: #cfbea9;
  --color-burnt-coffee-400: #b19e87;
  --color-burnt-coffee-500: #96836b;
  --color-burnt-coffee-600: #7a6952;
  --color-burnt-coffee-700: #62523e;
  --color-burnt-coffee-800: #4e402e;
  --color-burnt-coffee-900: #3c3122;
  --color-burnt-coffee-950: #2b1c07;
  --color-hot-butter: #dfa000;
  --color-hot-butter-50: #fff8ed;
  --color-hot-butter-100: #ffefd5;
  --color-hot-butter-200: #ffda9a;
  --color-hot-butter-300: #f5c165;
  --color-hot-butter-400: #dfa000;
  --color-hot-butter-500: #ba8400;
  --color-hot-butter-600: #956a00;
  --color-hot-butter-700: #765300;
  --color-hot-butter-800: #5c4000;
  --color-hot-butter-900: #463000;
  --color-hot-butter-950: #2b1c00;
}