Espresso Martini to Meatloaf Color Palette

About this palette

Espresso Martini to Meatloaf is a 4-color dark, warm, earthy, monochromatic palette: #903B10 (Espresso Martini), #150A00 (Asphalt), #3F0903 (Black Chocolate), #6A3200 (Meatloaf). It mixes brown, black tones and feels warm overall. The strongest text pairing is #903B10 on #150A00 with a contrast ratio of 2.62:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Espresso Martini	rgb(144, 59, 16)	hsl(20, 80%, 31%)
Asphalt	rgb(21, 10, 0)	hsl(29, 100%, 4%)
Black Chocolate	rgb(63, 9, 3)	hsl(6, 91%, 13%)
Meatloaf	rgb(106, 50, 0)	hsl(28, 100%, 21%)

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

/* Espresso Martini to Meatloaf — https://swatchly.xyz/palette/903b10-150a00-3f0903-6a3200 */
:root {
  --espresso-martini: #903b10;
  --asphalt: #150a00;
  --black-chocolate: #3f0903;
  --meatloaf: #6a3200;
}

Tailwind CSS v4

/* Espresso Martini to Meatloaf — https://swatchly.xyz/palette/903b10-150a00-3f0903-6a3200 */
@theme {
  --color-espresso-martini: #903b10;
  --color-espresso-martini-50: #fff2ed;
  --color-espresso-martini-100: #ffe5da;
  --color-espresso-martini-200: #ffcbb6;
  --color-espresso-martini-300: #fdab8a;
  --color-espresso-martini-400: #e28964;
  --color-espresso-martini-500: #c76d46;
  --color-espresso-martini-600: #a9532c;
  --color-espresso-martini-700: #903b10;
  --color-espresso-martini-800: #722d09;
  --color-espresso-martini-900: #5b2001;
  --color-espresso-martini-950: #3c1100;
  --color-asphalt: #150a00;
  --color-asphalt-50: #fdf4e8;
  --color-asphalt-100: #f4e9dc;
  --color-asphalt-200: #e2d5c6;
  --color-asphalt-300: #ccbfad;
  --color-asphalt-400: #ae9f8c;
  --color-asphalt-500: #8e7f6c;
  --color-asphalt-600: #6f6150;
  --color-asphalt-700: #544838;
  --color-asphalt-800: #3c3226;
  --color-asphalt-900: #282017;
  --color-asphalt-950: #150a00;
  --color-black-chocolate: #3f0903;
  --color-black-chocolate-50: #fff2ef;
  --color-black-chocolate-100: #ffe4df;
  --color-black-chocolate-200: #fec9be;
  --color-black-chocolate-300: #ecb0a4;
  --color-black-chocolate-400: #cf8f82;
  --color-black-chocolate-500: #b37367;
  --color-black-chocolate-600: #96594e;
  --color-black-chocolate-700: #7b443a;
  --color-black-chocolate-800: #63332a;
  --color-black-chocolate-900: #4e261f;
  --color-black-chocolate-950: #3f0903;
  --color-meatloaf: #6a3200;
  --color-meatloaf-50: #fff2eb;
  --color-meatloaf-100: #ffe6d6;
  --color-meatloaf-200: #fecbac;
  --color-meatloaf-300: #ecb38f;
  --color-meatloaf-400: #d0926a;
  --color-meatloaf-500: #b4764d;
  --color-meatloaf-600: #975c33;
  --color-meatloaf-700: #7d4720;
  --color-meatloaf-800: #6a3200;
  --color-meatloaf-900: #502809;
  --color-meatloaf-950: #341703;
}