Wild Chocolate to Midnight Masquerade color palette

65533CWild Chocolate A16160Cheek Red A4D8D9Crystal BD8C94Rosy Brown 25334BMidnight Masquerade

About this palette

Wild Chocolate to Midnight Masquerade is a 5-color muted, warm, vintage palette: #65533C (Wild Chocolate), #A16160 (Cheek Red), #A4D8D9 (Crystal), #BD8C94 (Rosy Brown), #25334B (Midnight Masquerade). It mixes brown, red, turquoise, pink, blue tones and feels warm overall. The strongest text pairing is #A4D8D9 on #25334B with a contrast ratio of 8.10:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wild Chocolate	rgb(101, 83, 60)	hsl(34, 25%, 32%)
Cheek Red	rgb(161, 97, 96)	hsl(1, 26%, 50%)
Crystal	rgb(164, 216, 217)	hsl(181, 41%, 75%)
Rosy Brown	rgb(189, 140, 148)	hsl(350, 27%, 65%)
Midnight Masquerade	rgb(37, 51, 75)	hsl(218, 34%, 22%)

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.

Aa8.10:1 Very good#A4D8D9 on #25334B
Aa8.10:1 Very good#25334B on #A4D8D9
Aa4.69:1 Good#65533C on #A4D8D9
Aa4.69:1 Good#A4D8D9 on #65533C
Aa4.44:1 Poor#BD8C94 on #25334B
Aa4.44:1 Poor#25334B on #BD8C94
Aa3.05:1 Poor#A16160 on #A4D8D9
Aa3.05:1 Poor#A4D8D9 on #A16160

Color blindness preview

CSS variables

/* Wild Chocolate to Midnight Masquerade — https://swatchly.xyz/palette/65533c-a16160-a4d8d9-bd8c94-25334b */
:root {
  --wild-chocolate: #65533c;
  --cheek-red: #a16160;
  --crystal: #a4d8d9;
  --rosy-brown: #bd8c94;
  --midnight-masquerade: #25334b;
}

Tailwind CSS v4

/* Wild Chocolate to Midnight Masquerade — https://swatchly.xyz/palette/65533c-a16160-a4d8d9-bd8c94-25334b */
@theme {
  --color-wild-chocolate: #65533c;
  --color-wild-chocolate-50: #fff3e5;
  --color-wild-chocolate-100: #f6e9d9;
  --color-wild-chocolate-200: #e5d5c2;
  --color-wild-chocolate-300: #d0bea8;
  --color-wild-chocolate-400: #b29f87;
  --color-wild-chocolate-500: #97836b;
  --color-wild-chocolate-600: #7c6952;
  --color-wild-chocolate-700: #65533c;
  --color-wild-chocolate-800: #4f412e;
  --color-wild-chocolate-900: #3d3121;
  --color-wild-chocolate-950: #271e13;
  --color-cheek-red: #a16160;
  --color-cheek-red-50: #fff1f1;
  --color-cheek-red-100: #ffe6e5;
  --color-cheek-red-200: #ffcdcb;
  --color-cheek-red-300: #f0b5b3;
  --color-cheek-red-400: #d69593;
  --color-cheek-red-500: #bc7a79;
  --color-cheek-red-600: #a16160;
  --color-cheek-red-700: #844a49;
  --color-cheek-red-800: #6a3737;
  --color-cheek-red-900: #542828;
  --color-cheek-red-950: #361717;
  --color-crystal: #a4d8d9;
  --color-crystal-50: #d6f5f5;
  --color-crystal-100: #c7eaea;
  --color-crystal-200: #a4d8d9;
  --color-crystal-300: #95c2c3;
  --color-crystal-400: #74a5a6;
  --color-crystal-500: #5a8b8d;
  --color-crystal-600: #427273;
  --color-crystal-700: #305c5d;
  --color-crystal-800: #224a4b;
  --color-crystal-900: #17393a;
  --color-crystal-950: #0b2424;
  --color-rosy-brown: #bd8c94;
  --color-rosy-brown-50: #ffeef0;
  --color-rosy-brown-100: #ffdee3;
  --color-rosy-brown-200: #efc7cd;
  --color-rosy-brown-300: #dbaeb5;
  --color-rosy-brown-400: #bd8c94;
  --color-rosy-brown-500: #a1727a;
  --color-rosy-brown-600: #865a61;
  --color-rosy-brown-700: #6d454d;
  --color-rosy-brown-800: #58353b;
  --color-rosy-brown-900: #45282e;
  --color-rosy-brown-950: #2d181c;
  --color-midnight-masquerade: #25334b;
  --color-midnight-masquerade-50: #f0f5ff;
  --color-midnight-masquerade-100: #e1ecff;
  --color-midnight-masquerade-200: #cbd8ef;
  --color-midnight-masquerade-300: #b2c2dc;
  --color-midnight-masquerade-400: #92a2be;
  --color-midnight-masquerade-500: #7687a3;
  --color-midnight-masquerade-600: #5d6c87;
  --color-midnight-masquerade-700: #48566e;
  --color-midnight-masquerade-800: #364358;
  --color-midnight-masquerade-900: #25334b;
  --color-midnight-masquerade-950: #181f2c;
}