Lonely Chocolate to Belladonna Color Palette

About this palette

Lonely Chocolate to Belladonna is a 4-color dark, warm palette: #470000 (Lonely Chocolate), #6E4D59 (Hibernation), #4D3830 (Film Noir), #270008 (Belladonna). It mixes brown, red, gray tones and feels warm overall. The strongest text pairing is #6E4D59 on #270008 with a contrast ratio of 2.63:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lonely Chocolate	rgb(71, 0, 0)	hsl(0, 100%, 14%)
Hibernation	rgb(110, 77, 89)	hsl(338, 18%, 37%)
Film Noir	rgb(77, 56, 48)	hsl(17, 23%, 25%)
Belladonna	rgb(39, 0, 8)	hsl(348, 100%, 8%)

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

/* Lonely Chocolate to Belladonna — https://swatchly.xyz/palette/470000-6e4d59-4d3830-270008 */
:root {
  --lonely-chocolate: #470000;
  --hibernation: #6e4d59;
  --film-noir: #4d3830;
  --belladonna: #270008;
}

Tailwind CSS v4

/* Lonely Chocolate to Belladonna — https://swatchly.xyz/palette/470000-6e4d59-4d3830-270008 */
@theme {
  --color-lonely-chocolate: #470000;
  --color-lonely-chocolate-50: #fff2ef;
  --color-lonely-chocolate-100: #ffe4e0;
  --color-lonely-chocolate-200: #ffc8bf;
  --color-lonely-chocolate-300: #f4aca0;
  --color-lonely-chocolate-400: #d88a7e;
  --color-lonely-chocolate-500: #bc6e62;
  --color-lonely-chocolate-600: #9f544a;
  --color-lonely-chocolate-700: #844036;
  --color-lonely-chocolate-800: #6b2f28;
  --color-lonely-chocolate-900: #56231c;
  --color-lonely-chocolate-950: #470000;
  --color-hibernation: #6e4d59;
  --color-hibernation-50: #fff1f5;
  --color-hibernation-100: #fde3ec;
  --color-hibernation-200: #eccfd9;
  --color-hibernation-300: #d9b8c3;
  --color-hibernation-400: #bb98a4;
  --color-hibernation-500: #a07d89;
  --color-hibernation-600: #85636f;
  --color-hibernation-700: #6e4d59;
  --color-hibernation-800: #563c45;
  --color-hibernation-900: #442d35;
  --color-hibernation-950: #2b1b21;
  --color-film-noir: #4d3830;
  --color-film-noir-50: #fff2ed;
  --color-film-noir-100: #f8e7e1;
  --color-film-noir-200: #e7d3cb;
  --color-film-noir-300: #d1bab2;
  --color-film-noir-400: #b29a90;
  --color-film-noir-500: #967d74;
  --color-film-noir-600: #79635a;
  --color-film-noir-700: #604c44;
  --color-film-noir-800: #4d3830;
  --color-film-noir-900: #3a2b26;
  --color-film-noir-950: #241a16;
  --color-belladonna: #270008;
  --color-belladonna-50: #fff1f2;
  --color-belladonna-100: #ffe3e6;
  --color-belladonna-200: #f7cace;
  --color-belladonna-300: #e4b2b7;
  --color-belladonna-400: #c79196;
  --color-belladonna-500: #a87278;
  --color-belladonna-600: #88555b;
  --color-belladonna-700: #6a3e43;
  --color-belladonna-800: #4f2b2f;
  --color-belladonna-900: #371c1f;
  --color-belladonna-950: #270008;
}