Hot Chocolate to Hibernation Color Palette

About this palette

Hot Chocolate to Hibernation is a 4-color dark, warm, monochromatic palette: #62363E (Hot Chocolate), #45142D (Blackberry), #180407 (Noir Fiction), #6D4F5F (Hibernation). It mixes brown, red, black tones and feels warm overall. The strongest text pairing is #180407 on #6D4F5F with a contrast ratio of 2.77:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hot Chocolate	rgb(98, 54, 62)	hsl(349, 29%, 30%)
Blackberry	rgb(69, 20, 45)	hsl(329, 55%, 17%)
Noir Fiction	rgb(24, 4, 7)	hsl(351, 71%, 5%)
Hibernation	rgb(109, 79, 95)	hsl(328, 16%, 37%)

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

/* Hot Chocolate to Hibernation — https://swatchly.xyz/palette/62363e-45142d-180407-6d4f5f */
:root {
  --hot-chocolate: #62363e;
  --blackberry: #45142d;
  --noir-fiction: #180407;
  --hibernation: #6d4f5f;
}

Tailwind CSS v4

/* Hot Chocolate to Hibernation — https://swatchly.xyz/palette/62363e-45142d-180407-6d4f5f */
@theme {
  --color-hot-chocolate: #62363e;
  --color-hot-chocolate-50: #fff1f3;
  --color-hot-chocolate-100: #ffe3e7;
  --color-hot-chocolate-200: #f5cbd1;
  --color-hot-chocolate-300: #e2b4ba;
  --color-hot-chocolate-400: #c5939b;
  --color-hot-chocolate-500: #aa7880;
  --color-hot-chocolate-600: #8e5f66;
  --color-hot-chocolate-700: #754a51;
  --color-hot-chocolate-800: #62363e;
  --color-hot-chocolate-900: #4a2a30;
  --color-hot-chocolate-950: #30191d;
  --color-blackberry: #45142d;
  --color-blackberry-50: #fff1f6;
  --color-blackberry-100: #ffe2ee;
  --color-blackberry-200: #f8c8dc;
  --color-blackberry-300: #e5afc6;
  --color-blackberry-400: #c68ba5;
  --color-blackberry-500: #a86e87;
  --color-blackberry-600: #89536b;
  --color-blackberry-700: #6c3c52;
  --color-blackberry-800: #532b3d;
  --color-blackberry-900: #45142d;
  --color-blackberry-950: #250f19;
  --color-noir-fiction: #180407;
  --color-noir-fiction-50: #fff1f2;
  --color-noir-fiction-100: #fbe5e7;
  --color-noir-fiction-200: #ead0d3;
  --color-noir-fiction-300: #d5b9bb;
  --color-noir-fiction-400: #b8989c;
  --color-noir-fiction-500: #97787c;
  --color-noir-fiction-600: #775a5e;
  --color-noir-fiction-700: #5a4144;
  --color-noir-fiction-800: #402d2f;
  --color-noir-fiction-900: #2a1c1d;
  --color-noir-fiction-950: #180407;
  --color-hibernation: #6d4f5f;
  --color-hibernation-50: #fff0f8;
  --color-hibernation-100: #fbe4ef;
  --color-hibernation-200: #ead0dd;
  --color-hibernation-300: #d6b9c8;
  --color-hibernation-400: #b999aa;
  --color-hibernation-500: #9f7e8f;
  --color-hibernation-600: #846575;
  --color-hibernation-700: #6d4f5f;
  --color-hibernation-800: #563d4a;
  --color-hibernation-900: #432e39;
  --color-hibernation-950: #2b1c24;
}