Count Chocula to 3AM Breakup Color Palette

About this palette

Count Chocula to 3AM Breakup is a 5-color warm, earthy, vintage palette: #5E2A00 (Count Chocula), #856014 (Alligator), #E8B398 (Wax Flower), #CE756B (Rosa Chinensis), #340E10 (3AM Breakup). It mixes brown, orange, red tones and feels warm overall. The strongest text pairing is #E8B398 on #340E10 with a contrast ratio of 9.32:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Count Chocula	rgb(94, 42, 0)	hsl(27, 100%, 18%)
Alligator	rgb(133, 96, 20)	hsl(40, 74%, 30%)
Wax Flower	rgb(232, 179, 152)	hsl(20, 63%, 75%)
Rosa Chinensis	rgb(206, 117, 107)	hsl(6, 50%, 61%)
3AM Breakup	rgb(52, 14, 16)	hsl(357, 58%, 13%)

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.

Aa9.32:1 Very good#E8B398 on #340E10
Aa9.32:1 Very good#340E10 on #E8B398
Aa6.27:1 Good#5E2A00 on #E8B398
Aa6.27:1 Good#E8B398 on #5E2A00
Aa5.25:1 Good#CE756B on #340E10
Aa5.25:1 Good#340E10 on #CE756B
Aa3.53:1 Poor#5E2A00 on #CE756B
Aa3.53:1 Poor#CE756B on #5E2A00

Color blindness preview

CSS variables

/* Count Chocula to 3AM Breakup — https://swatchly.xyz/palette/5e2a00-856014-e8b398-ce756b-340e10 */
:root {
  --count-chocula: #5e2a00;
  --alligator: #856014;
  --wax-flower: #e8b398;
  --rosa-chinensis: #ce756b;
  --c-3am-breakup: #340e10;
}

Tailwind CSS v4

/* Count Chocula to 3AM Breakup — https://swatchly.xyz/palette/5e2a00-856014-e8b398-ce756b-340e10 */
@theme {
  --color-count-chocula: #5e2a00;
  --color-count-chocula-50: #fff2eb;
  --color-count-chocula-100: #ffe5d7;
  --color-count-chocula-200: #fcccb0;
  --color-count-chocula-300: #e9b291;
  --color-count-chocula-400: #ca8f6b;
  --color-count-chocula-500: #ad724e;
  --color-count-chocula-600: #8e5734;
  --color-count-chocula-700: #714121;
  --color-count-chocula-800: #5e2a00;
  --color-count-chocula-900: #45220b;
  --color-count-chocula-950: #2c1304;
  --color-alligator: #856014;
  --color-alligator-50: #fff4e1;
  --color-alligator-100: #ffe7c0;
  --color-alligator-200: #f0d19e;
  --color-alligator-300: #dcb97e;
  --color-alligator-400: #be9856;
  --color-alligator-500: #a17b35;
  --color-alligator-600: #856014;
  --color-alligator-700: #6c4b00;
  --color-alligator-800: #553a00;
  --color-alligator-900: #422c00;
  --color-alligator-950: #2a1b00;
  --color-wax-flower: #e8b398;
  --color-wax-flower-50: #fff2eb;
  --color-wax-flower-100: #ffe5d8;
  --color-wax-flower-200: #f6cdb9;
  --color-wax-flower-300: #e8b398;
  --color-wax-flower-400: #c6947b;
  --color-wax-flower-500: #aa795f;
  --color-wax-flower-600: #8d5f47;
  --color-wax-flower-700: #734933;
  --color-wax-flower-800: #5c3825;
  --color-wax-flower-900: #492a19;
  --color-wax-flower-950: #2f190d;
  --color-rosa-chinensis: #ce756b;
  --color-rosa-chinensis-50: #fff4f3;
  --color-rosa-chinensis-100: #ffeae7;
  --color-rosa-chinensis-200: #ffd1cb;
  --color-rosa-chinensis-300: #ffb3a9;
  --color-rosa-chinensis-400: #e79187;
  --color-rosa-chinensis-500: #ce756b;
  --color-rosa-chinensis-600: #ae5850;
  --color-rosa-chinensis-700: #8f413a;
  --color-rosa-chinensis-800: #732f29;
  --color-rosa-chinensis-900: #5b211c;
  --color-rosa-chinensis-950: #3b110e;
  --color-c-3am-breakup: #340e10;
  --color-c-3am-breakup-50: #fff1f1;
  --color-c-3am-breakup-100: #ffe4e3;
  --color-c-3am-breakup-200: #f4cccb;
  --color-c-3am-breakup-300: #e1b4b3;
  --color-c-3am-breakup-400: #c49392;
  --color-c-3am-breakup-500: #a87776;
  --color-c-3am-breakup-600: #8a5d5c;
  --color-c-3am-breakup-700: #704747;
  --color-c-3am-breakup-800: #583535;
  --color-c-3am-breakup-900: #442727;
  --color-c-3am-breakup-950: #340e10;
}