Charcoal to Cold Turkey Color Palette

About this palette

Charcoal to Cold Turkey is a 5-color muted palette: #303D3A (Charcoal), #EAE3F1 (Pink Champagne), #616C4F (Hinterland), #A18EAA (Wizard’s Brew), #C9B2B7 (Cold Turkey). It mixes gray, green, purple tones and feels cool overall. The strongest text pairing is #303D3A on #EAE3F1 with a contrast ratio of 9.04:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Charcoal	rgb(48, 61, 58)	hsl(166, 12%, 21%)
Pink Champagne	rgb(234, 227, 241)	hsl(270, 33%, 92%)
Hinterland	rgb(97, 108, 79)	hsl(83, 16%, 37%)
Wizard’s Brew	rgb(161, 142, 170)	hsl(281, 14%, 61%)
Cold Turkey	rgb(201, 178, 183)	hsl(347, 18%, 74%)

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#303D3A on #EAE3F1
Aa9.04:1 Very good#EAE3F1 on #303D3A
Aa5.68:1 Good#303D3A on #C9B2B7
Aa5.68:1 Good#C9B2B7 on #303D3A
Aa4.45:1 Poor#EAE3F1 on #616C4F
Aa4.45:1 Poor#616C4F on #EAE3F1
Aa3.76:1 Poor#303D3A on #A18EAA
Aa3.76:1 Poor#A18EAA on #303D3A

Color blindness preview

CSS variables

/* Charcoal to Cold Turkey — https://swatchly.xyz/palette/303d3a-eae3f1-616c4f-a18eaa-c9b2b7 */
:root {
  --charcoal: #303d3a;
  --pink-champagne: #eae3f1;
  --hinterland: #616c4f;
  --wizard-s-brew: #a18eaa;
  --cold-turkey: #c9b2b7;
}

Tailwind CSS v4

/* Charcoal to Cold Turkey — https://swatchly.xyz/palette/303d3a-eae3f1-616c4f-a18eaa-c9b2b7 */
@theme {
  --color-charcoal: #303d3a;
  --color-charcoal-50: #eff7f5;
  --color-charcoal-100: #e4eeeb;
  --color-charcoal-200: #cfdad8;
  --color-charcoal-300: #b7c4c1;
  --color-charcoal-400: #98a7a3;
  --color-charcoal-500: #7e8d89;
  --color-charcoal-600: #657370;
  --color-charcoal-700: #515e5a;
  --color-charcoal-800: #404b49;
  --color-charcoal-900: #303d3a;
  --color-charcoal-950: #1f2725;
  --color-pink-champagne: #eae3f1;
  --color-pink-champagne-50: #f3eff7;
  --color-pink-champagne-100: #eae3f1;
  --color-pink-champagne-200: #d6d1db;
  --color-pink-champagne-300: #c1bbc7;
  --color-pink-champagne-400: #a39ca9;
  --color-pink-champagne-500: #88828e;
  --color-pink-champagne-600: #6e6874;
  --color-pink-champagne-700: #58535d;
  --color-pink-champagne-800: #454049;
  --color-pink-champagne-900: #353139;
  --color-pink-champagne-950: #211e24;
  --color-hinterland: #616c4f;
  --color-hinterland-50: #f1f8e6;
  --color-hinterland-100: #e6eed9;
  --color-hinterland-200: #d0dac2;
  --color-hinterland-300: #b8c3a8;
  --color-hinterland-400: #98a385;
  --color-hinterland-500: #7c8769;
  --color-hinterland-600: #616c4f;
  --color-hinterland-700: #4c563c;
  --color-hinterland-800: #3b432d;
  --color-hinterland-900: #2d3421;
  --color-hinterland-950: #1b2013;
  --color-wizard-s-brew: #a18eaa;
  --color-wizard-s-brew-50: #f8ecfe;
  --color-wizard-s-brew-100: #eddff3;
  --color-wizard-s-brew-200: #d9c9e0;
  --color-wizard-s-brew-300: #c1b0ca;
  --color-wizard-s-brew-400: #a18eaa;
  --color-wizard-s-brew-500: #877590;
  --color-wizard-s-brew-600: #6f5d77;
  --color-wizard-s-brew-700: #594960;
  --color-wizard-s-brew-800: #47394d;
  --color-wizard-s-brew-900: #382c3d;
  --color-wizard-s-brew-950: #241c28;
  --color-cold-turkey: #c9b2b7;
  --color-cold-turkey-50: #fbedf0;
  --color-cold-turkey-100: #f1e1e4;
  --color-cold-turkey-200: #decbcf;
  --color-cold-turkey-300: #c9b2b7;
  --color-cold-turkey-400: #aa9599;
  --color-cold-turkey-500: #907b7f;
  --color-cold-turkey-600: #766267;
  --color-cold-turkey-700: #5f4d51;
  --color-cold-turkey-800: #4c3c40;
  --color-cold-turkey-900: #3c2f32;
  --color-cold-turkey-950: #261c1e;
}