Seashell to Count Chocula Color Palette

About this palette

Seashell to Count Chocula is a 5-color warm, earthy, vintage, monochromatic, gradient palette: #FFF6F3 (Seashell), #FEAD91 (Discreet Orange), #EC8343 (Flamenco), #B5551F (Fallen Canopy), #632C09 (Count Chocula). It mixes white, pink, orange, brown tones and feels warm overall. The strongest text pairing is #FFF6F3 on #632C09 with a contrast ratio of 10.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seashell	rgb(255, 246, 243)	hsl(15, 100%, 98%)
Discreet Orange	rgb(254, 173, 145)	hsl(15, 98%, 78%)
Flamenco	rgb(236, 131, 67)	hsl(23, 82%, 59%)
Fallen Canopy	rgb(181, 85, 31)	hsl(22, 71%, 42%)
Count Chocula	rgb(99, 44, 9)	hsl(23, 83%, 21%)

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.41:1 Very good#FFF6F3 on #632C09
Aa10.41:1 Very good#632C09 on #FFF6F3
Aa6.12:1 Good#FEAD91 on #632C09
Aa6.12:1 Good#632C09 on #FEAD91
Aa4.61:1 Good#FFF6F3 on #B5551F
Aa4.61:1 Good#B5551F on #FFF6F3
Aa4.17:1 Poor#EC8343 on #632C09
Aa4.17:1 Poor#632C09 on #EC8343

Color blindness preview

CSS variables

/* Seashell to Count Chocula — https://swatchly.xyz/palette/fff6f3-fead91-ec8343-b5551f-632c09 */
:root {
  --seashell: #fff6f3;
  --discreet-orange: #fead91;
  --flamenco: #ec8343;
  --fallen-canopy: #b5551f;
  --count-chocula: #632c09;
}

Tailwind CSS v4

/* Seashell to Count Chocula — https://swatchly.xyz/palette/fff6f3-fead91-ec8343-b5551f-632c09 */
@theme {
  --color-seashell: #fff6f3;
  --color-seashell-50: #fff6f3;
  --color-seashell-100: #f2eceb;
  --color-seashell-200: #ded8d6;
  --color-seashell-300: #c8c1be;
  --color-seashell-400: #a8a09e;
  --color-seashell-500: #8d8582;
  --color-seashell-600: #716a67;
  --color-seashell-700: #5a5451;
  --color-seashell-800: #47413f;
  --color-seashell-900: #373230;
  --color-seashell-950: #221e1d;
  --color-discreet-orange: #fead91;
  --color-discreet-orange-50: #fff4f0;
  --color-discreet-orange-100: #ffe7df;
  --color-discreet-orange-200: #ffcdbc;
  --color-discreet-orange-300: #fead91;
  --color-discreet-orange-400: #d98e75;
  --color-discreet-orange-500: #bd7157;
  --color-discreet-orange-600: #9e573e;
  --color-discreet-orange-700: #82412a;
  --color-discreet-orange-800: #69301c;
  --color-discreet-orange-900: #522312;
  --color-discreet-orange-950: #361407;
  --color-flamenco: #ec8343;
  --color-flamenco-50: #fff3ec;
  --color-flamenco-100: #ffe6d9;
  --color-flamenco-200: #ffccb1;
  --color-flamenco-300: #ffab7d;
  --color-flamenco-400: #ec8343;
  --color-flamenco-500: #cd6722;
  --color-flamenco-600: #ab4e00;
  --color-flamenco-700: #893d00;
  --color-flamenco-800: #6c2e00;
  --color-flamenco-900: #542300;
  --color-flamenco-950: #361400;
  --color-fallen-canopy: #b5551f;
  --color-fallen-canopy-50: #fff2ec;
  --color-fallen-canopy-100: #ffe7dd;
  --color-fallen-canopy-200: #ffcfb9;
  --color-fallen-canopy-300: #ffb18b;
  --color-fallen-canopy-400: #eb8b5d;
  --color-fallen-canopy-500: #d16f3d;
  --color-fallen-canopy-600: #b5551f;
  --color-fallen-canopy-700: #963e01;
  --color-fallen-canopy-800: #772f00;
  --color-fallen-canopy-900: #5c2300;
  --color-fallen-canopy-950: #3c1400;
  --color-count-chocula: #632c09;
  --color-count-chocula-50: #fff2ec;
  --color-count-chocula-100: #ffe5d8;
  --color-count-chocula-200: #fecbb1;
  --color-count-chocula-300: #ebb194;
  --color-count-chocula-400: #cd8f6f;
  --color-count-chocula-500: #b07252;
  --color-count-chocula-600: #925839;
  --color-count-chocula-700: #764226;
  --color-count-chocula-800: #632c09;
  --color-count-chocula-900: #49240f;
  --color-count-chocula-950: #2f1406;
}