Count Chocula to Baby Pink Color Palette

About this palette

Count Chocula to Baby Pink is a 4-color vintage palette: #5A2C08 (Count Chocula), #008C70 (Elf), #38ABD7 (Thalassophile), #FFBBCD (Baby Pink). It mixes brown, turquoise, blue, pink tones and feels balanced overall. The strongest text pairing is #5A2C08 on #FFBBCD with a contrast ratio of 7.36:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Count Chocula	rgb(90, 44, 8)	hsl(26, 84%, 19%)
Elf	rgb(0, 140, 112)	hsl(168, 100%, 27%)
Thalassophile	rgb(56, 171, 215)	hsl(197, 67%, 53%)
Baby Pink	rgb(255, 187, 205)	hsl(344, 100%, 87%)

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.

Aa7.36:1 Very good#5A2C08 on #FFBBCD
Aa7.36:1 Very good#FFBBCD on #5A2C08
Aa4.43:1 Poor#5A2C08 on #38ABD7
Aa4.43:1 Poor#38ABD7 on #5A2C08

Color blindness preview

CSS variables

/* Count Chocula to Baby Pink — https://swatchly.xyz/palette/5a2c08-008c70-38abd7-ffbbcd */
:root {
  --count-chocula: #5a2c08;
  --elf: #008c70;
  --thalassophile: #38abd7;
  --baby-pink: #ffbbcd;
}

Tailwind CSS v4

/* Count Chocula to Baby Pink — https://swatchly.xyz/palette/5a2c08-008c70-38abd7-ffbbcd */
@theme {
  --color-count-chocula: #5a2c08;
  --color-count-chocula-50: #fff2eb;
  --color-count-chocula-100: #ffe5d6;
  --color-count-chocula-200: #f8cdb3;
  --color-count-chocula-300: #e6b597;
  --color-count-chocula-400: #ca9675;
  --color-count-chocula-500: #b07b5a;
  --color-count-chocula-600: #956242;
  --color-count-chocula-700: #7c4e2f;
  --color-count-chocula-800: #663d22;
  --color-count-chocula-900: #5a2c08;
  --color-count-chocula-950: #381d0b;
  --color-elf: #008c70;
  --color-elf-50: #dafff2;
  --color-elf-100: #c0fde8;
  --color-elf-200: #a5edd6;
  --color-elf-300: #86dbc1;
  --color-elf-400: #5bbfa2;
  --color-elf-500: #35a689;
  --color-elf-600: #008c70;
  --color-elf-700: #006f59;
  --color-elf-800: #005745;
  --color-elf-900: #004334;
  --color-elf-950: #002a20;
  --color-thalassophile: #38abd7;
  --color-thalassophile-50: #e6f7ff;
  --color-thalassophile-100: #ceefff;
  --color-thalassophile-200: #9be0ff;
  --color-thalassophile-300: #70caf2;
  --color-thalassophile-400: #38abd7;
  --color-thalassophile-500: #028fba;
  --color-thalassophile-600: #007497;
  --color-thalassophile-700: #005c79;
  --color-thalassophile-800: #004860;
  --color-thalassophile-900: #00384b;
  --color-thalassophile-950: #002331;
  --color-baby-pink: #ffbbcd;
  --color-baby-pink-50: #ffebef;
  --color-baby-pink-100: #ffdbe3;
  --color-baby-pink-200: #ffbbcd;
  --color-baby-pink-300: #e3a9b8;
  --color-baby-pink-400: #c7899a;
  --color-baby-pink-500: #ac6e80;
  --color-baby-pink-600: #905667;
  --color-baby-pink-700: #764251;
  --color-baby-pink-800: #603240;
  --color-baby-pink-900: #4c2531;
  --color-baby-pink-950: #31151e;
}