Dark Roast to Belladonna Color Palette

About this palette

Dark Roast to Belladonna is a 5-color dark, warm, earthy palette: #483033 (Dark Roast), #653917 (Meatloaf), #7D5C37 (Autumn Gold), #36180E (Close but No Cigar), #1B000E (Belladonna). It mixes brown, red tones and feels warm overall. The strongest text pairing is #7D5C37 on #1B000E with a contrast ratio of 3.28:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Roast	rgb(72, 48, 51)	hsl(352, 20%, 24%)
Meatloaf	rgb(101, 57, 23)	hsl(26, 63%, 24%)
Autumn Gold	rgb(125, 92, 55)	hsl(32, 39%, 35%)
Close but No Cigar	rgb(54, 24, 14)	hsl(15, 59%, 13%)
Belladonna	rgb(27, 0, 14)	hsl(329, 100%, 5%)

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.

Aa3.28:1 Poor#7D5C37 on #1B000E
Aa3.28:1 Poor#1B000E on #7D5C37

Color blindness preview

CSS variables

/* Dark Roast to Belladonna — https://swatchly.xyz/palette/483033-653917-7d5c37-36180e-1b000e */
:root {
  --dark-roast: #483033;
  --meatloaf: #653917;
  --autumn-gold: #7d5c37;
  --close-but-no-cigar: #36180e;
  --belladonna: #1b000e;
}

Tailwind CSS v4

/* Dark Roast to Belladonna — https://swatchly.xyz/palette/483033-653917-7d5c37-36180e-1b000e */
@theme {
  --color-dark-roast: #483033;
  --color-dark-roast-50: #fff1f3;
  --color-dark-roast-100: #f9e6e7;
  --color-dark-roast-200: #e8d1d3;
  --color-dark-roast-300: #d4b9bc;
  --color-dark-roast-400: #b79a9d;
  --color-dark-roast-500: #9c8083;
  --color-dark-roast-600: #816669;
  --color-dark-roast-700: #6a5154;
  --color-dark-roast-800: #564042;
  --color-dark-roast-900: #483033;
  --color-dark-roast-950: #2c1f20;
  --color-meatloaf: #653917;
  --color-meatloaf-50: #fff2ea;
  --color-meatloaf-100: #ffe6d5;
  --color-meatloaf-200: #f6ceb4;
  --color-meatloaf-300: #e4b799;
  --color-meatloaf-400: #c89776;
  --color-meatloaf-500: #ad7c5a;
  --color-meatloaf-600: #916241;
  --color-meatloaf-700: #774d2e;
  --color-meatloaf-800: #653917;
  --color-meatloaf-900: #4c2d15;
  --color-meatloaf-950: #321b09;
  --color-autumn-gold: #7d5c37;
  --color-autumn-gold-50: #fff3e6;
  --color-autumn-gold-100: #fde5cc;
  --color-autumn-gold-200: #ebcfb1;
  --color-autumn-gold-300: #d6b694;
  --color-autumn-gold-400: #b7946f;
  --color-autumn-gold-500: #9a7752;
  --color-autumn-gold-600: #7d5c37;
  --color-autumn-gold-700: #654828;
  --color-autumn-gold-800: #50371b;
  --color-autumn-gold-900: #3f2a12;
  --color-autumn-gold-950: #281908;
  --color-close-but-no-cigar: #36180e;
  --color-close-but-no-cigar-50: #fff2ee;
  --color-close-but-no-cigar-100: #ffe5dc;
  --color-close-but-no-cigar-200: #efd0c5;
  --color-close-but-no-cigar-300: #dbb8ac;
  --color-close-but-no-cigar-400: #be988b;
  --color-close-but-no-cigar-500: #a37d70;
  --color-close-but-no-cigar-600: #876357;
  --color-close-but-no-cigar-700: #6e4e43;
  --color-close-but-no-cigar-800: #593c33;
  --color-close-but-no-cigar-900: #462e26;
  --color-close-but-no-cigar-950: #36180e;
  --color-belladonna: #1b000e;
  --color-belladonna-50: #fff1f7;
  --color-belladonna-100: #ffe2ef;
  --color-belladonna-200: #f0ccdc;
  --color-belladonna-300: #dcb4c6;
  --color-belladonna-400: #bf93a7;
  --color-belladonna-500: #9e7387;
  --color-belladonna-600: #7d5568;
  --color-belladonna-700: #5f3d4d;
  --color-belladonna-800: #442936;
  --color-belladonna-900: #2c1922;
  --color-belladonna-950: #1b000e;
}