Mountain Dew to Cold Turkey Color Palette

About this palette

Mountain Dew to Cold Turkey is a 5-color muted palette: #D0E3E1 (Mountain Dew), #8B6872 (Moonscape), #414A5B (Abyssal), #2D281E (Wood Bark), #CBB2B8 (Cold Turkey). It mixes gray, red tones and feels warm overall. The strongest text pairing is #D0E3E1 on #2D281E with a contrast ratio of 10.99:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mountain Dew	rgb(208, 227, 225)	hsl(174, 25%, 85%)
Moonscape	rgb(139, 104, 114)	hsl(343, 14%, 48%)
Abyssal	rgb(65, 74, 91)	hsl(219, 17%, 31%)
Wood Bark	rgb(45, 40, 30)	hsl(40, 20%, 15%)
Cold Turkey	rgb(203, 178, 184)	hsl(346, 19%, 75%)

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.99:1 Very good#D0E3E1 on #2D281E
Aa10.99:1 Very good#2D281E on #D0E3E1
Aa7.39:1 Very good#2D281E on #CBB2B8
Aa7.39:1 Very good#CBB2B8 on #2D281E
Aa6.69:1 Good#D0E3E1 on #414A5B
Aa6.69:1 Good#414A5B on #D0E3E1
Aa4.50:1 Good#414A5B on #CBB2B8
Aa4.50:1 Good#CBB2B8 on #414A5B

Color blindness preview

CSS variables

/* Mountain Dew to Cold Turkey — https://swatchly.xyz/palette/d0e3e1-8b6872-414a5b-2d281e-cbb2b8 */
:root {
  --mountain-dew: #d0e3e1;
  --moonscape: #8b6872;
  --abyssal: #414a5b;
  --wood-bark: #2d281e;
  --cold-turkey: #cbb2b8;
}

Tailwind CSS v4

/* Mountain Dew to Cold Turkey — https://swatchly.xyz/palette/d0e3e1-8b6872-414a5b-2d281e-cbb2b8 */
@theme {
  --color-mountain-dew: #d0e3e1;
  --color-mountain-dew-50: #f2fcfb;
  --color-mountain-dew-100: #e9f4f2;
  --color-mountain-dew-200: #d0e3e1;
  --color-mountain-dew-300: #bbcac9;
  --color-mountain-dew-400: #99aaa8;
  --color-mountain-dew-500: #7c8e8c;
  --color-mountain-dew-600: #617270;
  --color-mountain-dew-700: #4b5a58;
  --color-mountain-dew-800: #384544;
  --color-mountain-dew-900: #2a3534;
  --color-mountain-dew-950: #192120;
  --color-moonscape: #8b6872;
  --color-moonscape-50: #fff1f5;
  --color-moonscape-100: #fee5ec;
  --color-moonscape-200: #efd1d9;
  --color-moonscape-300: #dcbbc4;
  --color-moonscape-400: #bf9ca6;
  --color-moonscape-500: #a5818b;
  --color-moonscape-600: #8b6872;
  --color-moonscape-700: #71515a;
  --color-moonscape-800: #593e46;
  --color-moonscape-900: #462e35;
  --color-moonscape-950: #2c1c21;
  --color-abyssal: #414a5b;
  --color-abyssal-50: #f0f5ff;
  --color-abyssal-100: #e4ebf8;
  --color-abyssal-200: #d0d8e7;
  --color-abyssal-300: #bac3d4;
  --color-abyssal-400: #9ba5b7;
  --color-abyssal-500: #818b9e;
  --color-abyssal-600: #687184;
  --color-abyssal-700: #535c6d;
  --color-abyssal-800: #414a5b;
  --color-abyssal-900: #323946;
  --color-abyssal-950: #1f242d;
  --color-wood-bark: #2d281e;
  --color-wood-bark-50: #f8f5ed;
  --color-wood-bark-100: #efebe3;
  --color-wood-bark-200: #dcd7cd;
  --color-wood-bark-300: #c6c0b5;
  --color-wood-bark-400: #a7a195;
  --color-wood-bark-500: #8d877b;
  --color-wood-bark-600: #756f63;
  --color-wood-bark-700: #5f5a4f;
  --color-wood-bark-800: #4d493f;
  --color-wood-bark-900: #3f3b32;
  --color-wood-bark-950: #2d281e;
  --color-cold-turkey: #cbb2b8;
  --color-cold-turkey-50: #fcedf0;
  --color-cold-turkey-100: #f2e1e5;
  --color-cold-turkey-200: #dfcbd0;
  --color-cold-turkey-300: #cbb2b8;
  --color-cold-turkey-400: #ac949a;
  --color-cold-turkey-500: #927a80;
  --color-cold-turkey-600: #786267;
  --color-cold-turkey-700: #614d52;
  --color-cold-turkey-800: #4d3c40;
  --color-cold-turkey-900: #3d2e32;
  --color-cold-turkey-950: #261c1f;
}