Count Chocula to Pink Glitter color palette

About this palette

Count Chocula to Pink Glitter is a 5-color warm, neon, gradient palette: #632900 (Count Chocula), #BA0079 (Infectious Love), #F145C3 (Kinky Pinky), #FFADB0 (Apricot Haze), #FFDED9 (Pink Glitter). It mixes brown, red, pink tones and feels warm overall. The strongest text pairing is #632900 on #FFDED9 with a contrast ratio of 9.04:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Count Choculargb(99, 41, 0)hsl(25, 100%, 19%)
Infectious Lovergb(186, 0, 121)hsl(321, 100%, 36%)
Kinky Pinkyrgb(241, 69, 195)hsl(316, 86%, 61%)
Apricot Hazergb(255, 173, 176)hsl(358, 100%, 84%)
Pink Glitterrgb(255, 222, 217)hsl(8, 100%, 93%)

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.04:1 Very good#632900 on #FFDED9
  • Aa9.04:1 Very good#FFDED9 on #632900
  • Aa6.42:1 Good#632900 on #FFADB0
  • Aa6.42:1 Good#FFADB0 on #632900
  • Aa4.97:1 Good#BA0079 on #FFDED9
  • Aa4.97:1 Good#FFDED9 on #BA0079
  • Aa3.52:1 Poor#BA0079 on #FFADB0
  • Aa3.52:1 Poor#FFADB0 on #BA0079

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Count Chocula to Pink Glitter — https://swatchly.xyz/palette/632900-ba0079-f145c3-ffadb0-ffded9 */
:root {
  --count-chocula: #632900;
  --infectious-love: #ba0079;
  --kinky-pinky: #f145c3;
  --apricot-haze: #ffadb0;
  --pink-glitter: #ffded9;
}

Tailwind CSS v4

/* Count Chocula to Pink Glitter — https://swatchly.xyz/palette/632900-ba0079-f145c3-ffadb0-ffded9 */
@theme {
  --color-count-chocula: #632900;
  --color-count-chocula-50: #fff2ec;
  --color-count-chocula-100: #ffe5d8;
  --color-count-chocula-200: #ffcaaf;
  --color-count-chocula-300: #edb091;
  --color-count-chocula-400: #cf8e6b;
  --color-count-chocula-500: #b2704d;
  --color-count-chocula-600: #935634;
  --color-count-chocula-700: #764021;
  --color-count-chocula-800: #632900;
  --color-count-chocula-900: #49220b;
  --color-count-chocula-950: #2e1304;
  --color-infectious-love: #ba0079;
  --color-infectious-love-50: #fff1f7;
  --color-infectious-love-100: #ffe1ee;
  --color-infectious-love-200: #ffc2dd;
  --color-infectious-love-300: #ff9bcb;
  --color-infectious-love-400: #f95bb0;
  --color-infectious-love-500: #db3695;
  --color-infectious-love-600: #ba0079;
  --color-infectious-love-700: #950060;
  --color-infectious-love-800: #76004b;
  --color-infectious-love-900: #5d003a;
  --color-infectious-love-950: #3d0025;
  --color-kinky-pinky: #f145c3;
  --color-kinky-pinky-50: #ffebf7;
  --color-kinky-pinky-100: #ffd9f0;
  --color-kinky-pinky-200: #ffb6e5;
  --color-kinky-pinky-300: #ff89d9;
  --color-kinky-pinky-400: #f145c3;
  --color-kinky-pinky-500: #d31fa8;
  --color-kinky-pinky-600: #af008a;
  --color-kinky-pinky-700: #8d006f;
  --color-kinky-pinky-800: #710058;
  --color-kinky-pinky-900: #5a0046;
  --color-kinky-pinky-950: #3c002e;
  --color-apricot-haze: #ffadb0;
  --color-apricot-haze-50: #fff5f5;
  --color-apricot-haze-100: #ffe9e9;
  --color-apricot-haze-200: #ffcecf;
  --color-apricot-haze-300: #ffadb0;
  --color-apricot-haze-400: #d98e91;
  --color-apricot-haze-500: #bd7175;
  --color-apricot-haze-600: #9e565a;
  --color-apricot-haze-700: #814045;
  --color-apricot-haze-800: #682f33;
  --color-apricot-haze-900: #512225;
  --color-apricot-haze-950: #351316;
  --color-pink-glitter: #ffded9;
  --color-pink-glitter-50: #ffedea;
  --color-pink-glitter-100: #ffded9;
  --color-pink-glitter-200: #e6cdca;
  --color-pink-glitter-300: #d2b7b3;
  --color-pink-glitter-400: #b59793;
  --color-pink-glitter-500: #9a7d78;
  --color-pink-glitter-600: #7f635f;
  --color-pink-glitter-700: #674e4b;
  --color-pink-glitter-800: #523c39;
  --color-pink-glitter-900: #402e2b;
  --color-pink-glitter-950: #291b1a;
}

Similar palettes