Burnt Coffee to Milk Chocolate Color Palette

About this palette

Burnt Coffee to Milk Chocolate is a 4-color warm, earthy, vintage palette: #29160D (Burnt Coffee), #DA8565 (Canyon Sunset), #F5D692 (Poached Egg), #7F4900 (Milk Chocolate). It mixes brown, orange, yellow tones and feels warm overall. The strongest text pairing is #29160D on #F5D692 with a contrast ratio of 12.28:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burnt Coffee	rgb(41, 22, 13)	hsl(19, 52%, 11%)
Canyon Sunset	rgb(218, 133, 101)	hsl(16, 61%, 63%)
Poached Egg	rgb(245, 214, 146)	hsl(41, 83%, 77%)
Milk Chocolate	rgb(127, 73, 0)	hsl(34, 100%, 25%)

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.28:1 Super#29160D on #F5D692
Aa12.28:1 Super#F5D692 on #29160D
Aa6.19:1 Good#29160D on #DA8565
Aa6.19:1 Good#DA8565 on #29160D
Aa5.22:1 Good#F5D692 on #7F4900
Aa5.22:1 Good#7F4900 on #F5D692

Color blindness preview

CSS variables

/* Burnt Coffee to Milk Chocolate — https://swatchly.xyz/palette/29160d-da8565-f5d692-7f4900 */
:root {
  --burnt-coffee: #29160d;
  --canyon-sunset: #da8565;
  --poached-egg: #f5d692;
  --milk-chocolate: #7f4900;
}

Tailwind CSS v4

/* Burnt Coffee to Milk Chocolate — https://swatchly.xyz/palette/29160d-da8565-f5d692-7f4900 */
@theme {
  --color-burnt-coffee: #29160d;
  --color-burnt-coffee-50: #fff2ec;
  --color-burnt-coffee-100: #f8e7df;
  --color-burnt-coffee-200: #e7d3c9;
  --color-burnt-coffee-300: #d2bbb1;
  --color-burnt-coffee-400: #b49b90;
  --color-burnt-coffee-500: #987f74;
  --color-burnt-coffee-600: #7c645a;
  --color-burnt-coffee-700: #634e44;
  --color-burnt-coffee-800: #4d3b33;
  --color-burnt-coffee-900: #3a2c25;
  --color-burnt-coffee-950: #29160d;
  --color-canyon-sunset: #da8565;
  --color-canyon-sunset-50: #fff0eb;
  --color-canyon-sunset-100: #ffe2d8;
  --color-canyon-sunset-200: #ffc6b1;
  --color-canyon-sunset-300: #f5a98c;
  --color-canyon-sunset-400: #da8565;
  --color-canyon-sunset-500: #bc6a4b;
  --color-canyon-sunset-600: #9e5133;
  --color-canyon-sunset-700: #833c20;
  --color-canyon-sunset-800: #6a2c13;
  --color-canyon-sunset-900: #54200a;
  --color-canyon-sunset-950: #381204;
  --color-poached-egg: #f5d692;
  --color-poached-egg-50: #fff6e2;
  --color-poached-egg-100: #feebc3;
  --color-poached-egg-200: #f5d692;
  --color-poached-egg-300: #d9c088;
  --color-poached-egg-400: #bc9f60;
  --color-poached-egg-500: #a08341;
  --color-poached-egg-600: #846825;
  --color-poached-egg-700: #6b510f;
  --color-poached-egg-800: #553f00;
  --color-poached-egg-900: #423000;
  --color-poached-egg-950: #2a1d00;
  --color-milk-chocolate: #7f4900;
  --color-milk-chocolate-50: #fff3e8;
  --color-milk-chocolate-100: #ffe6d0;
  --color-milk-chocolate-200: #fccea3;
  --color-milk-chocolate-300: #ebb685;
  --color-milk-chocolate-400: #cf955e;
  --color-milk-chocolate-500: #b37a40;
  --color-milk-chocolate-600: #976024;
  --color-milk-chocolate-700: #7f4900;
  --color-milk-chocolate-800: #643800;
  --color-milk-chocolate-900: #4e2b00;
  --color-milk-chocolate-950: #321900;
}