Madras to Hibernation Color Palette

About this palette

Madras to Hibernation is a 5-color dark, warm palette: #454427 (Madras), #170104 (Dark Matter), #4E0F45 (Velvet Cosmos), #321D23 (Bruised Plum), #705665 (Hibernation). It mixes brown, black, purple, gray, red tones and feels warm overall. The strongest text pairing is #170104 on #705665 with a contrast ratio of 3.08:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Madras	rgb(69, 68, 39)	hsl(58, 28%, 21%)
Dark Matter	rgb(23, 1, 4)	hsl(352, 92%, 5%)
Velvet Cosmos	rgb(78, 15, 69)	hsl(309, 68%, 18%)
Bruised Plum	rgb(50, 29, 35)	hsl(343, 27%, 15%)
Hibernation	rgb(112, 86, 101)	hsl(325, 13%, 39%)

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.08:1 Poor#170104 on #705665
Aa3.08:1 Poor#705665 on #170104

Color blindness preview

CSS variables

/* Madras to Hibernation — https://swatchly.xyz/palette/454427-170104-4e0f45-321d23-705665 */
:root {
  --madras: #454427;
  --dark-matter: #170104;
  --velvet-cosmos: #4e0f45;
  --bruised-plum: #321d23;
  --hibernation: #705665;
}

Tailwind CSS v4

/* Madras to Hibernation — https://swatchly.xyz/palette/454427-170104-4e0f45-321d23-705665 */
@theme {
  --color-madras: #454427;
  --color-madras-50: #f7f7e4;
  --color-madras-100: #ededd8;
  --color-madras-200: #dad9c0;
  --color-madras-300: #c3c3a7;
  --color-madras-400: #a4a485;
  --color-madras-500: #898869;
  --color-madras-600: #6e6e50;
  --color-madras-700: #58573c;
  --color-madras-800: #454427;
  --color-madras-900: #353420;
  --color-madras-950: #212012;
  --color-dark-matter: #170104;
  --color-dark-matter-50: #fff1f2;
  --color-dark-matter-100: #fee4e6;
  --color-dark-matter-200: #eeced1;
  --color-dark-matter-300: #dab7ba;
  --color-dark-matter-400: #bc969a;
  --color-dark-matter-500: #9b7679;
  --color-dark-matter-600: #7a575a;
  --color-dark-matter-700: #5b3e41;
  --color-dark-matter-800: #40292b;
  --color-dark-matter-900: #29181a;
  --color-dark-matter-950: #170104;
  --color-velvet-cosmos: #4e0f45;
  --color-velvet-cosmos-50: #fff0fb;
  --color-velvet-cosmos-100: #ffe1f7;
  --color-velvet-cosmos-200: #fbc3ee;
  --color-velvet-cosmos-300: #e8a9da;
  --color-velvet-cosmos-400: #cb86bc;
  --color-velvet-cosmos-500: #ae69a0;
  --color-velvet-cosmos-600: #904f83;
  --color-velvet-cosmos-700: #743a69;
  --color-velvet-cosmos-800: #5b2952;
  --color-velvet-cosmos-900: #4e0f45;
  --color-velvet-cosmos-950: #2c0f27;
  --color-bruised-plum: #321d23;
  --color-bruised-plum-50: #fff1f4;
  --color-bruised-plum-100: #f8e6ea;
  --color-bruised-plum-200: #e7d1d6;
  --color-bruised-plum-300: #d2b9c0;
  --color-bruised-plum-400: #b499a0;
  --color-bruised-plum-500: #9a7f86;
  --color-bruised-plum-600: #7f666c;
  --color-bruised-plum-700: #685157;
  --color-bruised-plum-800: #544045;
  --color-bruised-plum-900: #433236;
  --color-bruised-plum-950: #321d23;
  --color-hibernation: #705665;
  --color-hibernation-50: #fff0f8;
  --color-hibernation-100: #f8e5f0;
  --color-hibernation-200: #e8d2de;
  --color-hibernation-300: #d6bcca;
  --color-hibernation-400: #b99ead;
  --color-hibernation-500: #a08494;
  --color-hibernation-600: #866b7a;
  --color-hibernation-700: #705665;
  --color-hibernation-800: #58434f;
  --color-hibernation-900: #45323d;
  --color-hibernation-950: #2c1f27;
}