Count Chocula to Fatback Color Palette

About this palette

Count Chocula to Fatback is a 5-color cool palette: #5D3000 (Count Chocula), #008792 (Cruising), #649AFF (Polar Glow), #64E1E9 (Near Moon), #FFF7EF (Fatback). It mixes brown, turquoise, blue, white tones and feels cool overall. The strongest text pairing is #5D3000 on #FFF7EF with a contrast ratio of 10.49:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Count Chocula	rgb(93, 48, 0)	hsl(31, 100%, 18%)
Cruising	rgb(0, 135, 146)	hsl(185, 100%, 29%)
Polar Glow	rgb(100, 154, 255)	hsl(219, 100%, 70%)
Near Moon	rgb(100, 225, 233)	hsl(184, 75%, 65%)
Fatback	rgb(255, 247, 239)	hsl(30, 100%, 97%)

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.

Aa10.49:1 Very good#5D3000 on #FFF7EF
Aa10.49:1 Very good#FFF7EF on #5D3000
Aa7.14:1 Very good#5D3000 on #64E1E9
Aa7.14:1 Very good#64E1E9 on #5D3000
Aa4.06:1 Poor#008792 on #FFF7EF
Aa4.06:1 Poor#FFF7EF on #008792
Aa4.03:1 Poor#5D3000 on #649AFF
Aa4.03:1 Poor#649AFF on #5D3000

Color blindness preview

CSS variables

/* Count Chocula to Fatback — https://swatchly.xyz/palette/5d3000-008792-649aff-64e1e9-fff7ef */
:root {
  --count-chocula: #5d3000;
  --cruising: #008792;
  --polar-glow: #649aff;
  --near-moon: #64e1e9;
  --fatback: #fff7ef;
}

Tailwind CSS v4

/* Count Chocula to Fatback — https://swatchly.xyz/palette/5d3000-008792-649aff-64e1e9-fff7ef */
@theme {
  --color-count-chocula: #5d3000;
  --color-count-chocula-50: #fff3e9;
  --color-count-chocula-100: #ffe6d3;
  --color-count-chocula-200: #f8ceaf;
  --color-count-chocula-300: #e4b591;
  --color-count-chocula-400: #c6936b;
  --color-count-chocula-500: #a9774d;
  --color-count-chocula-600: #8b5c34;
  --color-count-chocula-700: #704521;
  --color-count-chocula-800: #5d3000;
  --color-count-chocula-900: #45260b;
  --color-count-chocula-950: #2c1604;
  --color-cruising: #008792;
  --color-cruising-50: #defcff;
  --color-cruising-100: #c2f9ff;
  --color-cruising-200: #a5eaf2;
  --color-cruising-300: #86d7e0;
  --color-cruising-400: #5bbac5;
  --color-cruising-500: #35a1ac;
  --color-cruising-600: #008792;
  --color-cruising-700: #006b74;
  --color-cruising-800: #00545b;
  --color-cruising-900: #004046;
  --color-cruising-950: #00282c;
  --color-polar-glow: #649aff;
  --color-polar-glow-50: #edf4ff;
  --color-polar-glow-100: #dde9ff;
  --color-polar-glow-200: #bed5ff;
  --color-polar-glow-300: #99bdff;
  --color-polar-glow-400: #649aff;
  --color-polar-glow-500: #4a7ee1;
  --color-polar-glow-600: #3364c1;
  --color-polar-glow-700: #214da3;
  --color-polar-glow-800: #153b86;
  --color-polar-glow-900: #0c2d6d;
  --color-polar-glow-950: #051b4a;
  --color-near-moon: #64e1e9;
  --color-near-moon-50: #effeff;
  --color-near-moon-100: #d0fcff;
  --color-near-moon-200: #a2f0f5;
  --color-near-moon-300: #64e1e9;
  --color-near-moon-400: #48bdc5;
  --color-near-moon-500: #00a0a8;
  --color-near-moon-600: #008087;
  --color-near-moon-700: #00656a;
  --color-near-moon-800: #004e52;
  --color-near-moon-900: #003b3e;
  --color-near-moon-950: #002527;
  --color-fatback: #fff7ef;
  --color-fatback-50: #fff7ef;
  --color-fatback-100: #f2ede8;
  --color-fatback-200: #ded9d3;
  --color-fatback-300: #c8c1bb;
  --color-fatback-400: #a8a19a;
  --color-fatback-500: #8c857e;
  --color-fatback-600: #716a64;
  --color-fatback-700: #5a544e;
  --color-fatback-800: #47413c;
  --color-fatback-900: #36322d;
  --color-fatback-950: #221f1b;
}