Mountain Dew to Yucca Color Palette

About this palette

Mountain Dew to Yucca is a 4-color muted palette: #CDE0DA (Mountain Dew), #261F19 (Velvet Black), #585163 (Freefall), #76988D (Yucca). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #CDE0DA on #261F19 with a contrast ratio of 11.82:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mountain Dew	rgb(205, 224, 218)	hsl(161, 23%, 84%)
Velvet Black	rgb(38, 31, 25)	hsl(28, 21%, 12%)
Freefall	rgb(88, 81, 99)	hsl(263, 10%, 35%)
Yucca	rgb(118, 152, 141)	hsl(161, 14%, 53%)

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.

Aa11.82:1 Very good#CDE0DA on #261F19
Aa11.82:1 Very good#261F19 on #CDE0DA
Aa5.51:1 Good#CDE0DA on #585163
Aa5.51:1 Good#585163 on #CDE0DA
Aa5.14:1 Good#261F19 on #76988D
Aa5.14:1 Good#76988D on #261F19

Color blindness preview

CSS variables

/* Mountain Dew to Yucca — https://swatchly.xyz/palette/cde0da-261f19-585163-76988d */
:root {
  --mountain-dew: #cde0da;
  --velvet-black: #261f19;
  --freefall: #585163;
  --yucca: #76988d;
}

Tailwind CSS v4

/* Mountain Dew to Yucca — https://swatchly.xyz/palette/cde0da-261f19-585163-76988d */
@theme {
  --color-mountain-dew: #cde0da;
  --color-mountain-dew-50: #f0faf7;
  --color-mountain-dew-100: #e6f1ed;
  --color-mountain-dew-200: #cde0da;
  --color-mountain-dew-300: #b8c8c3;
  --color-mountain-dew-400: #97a8a3;
  --color-mountain-dew-500: #7b8c87;
  --color-mountain-dew-600: #60716c;
  --color-mountain-dew-700: #4a5a55;
  --color-mountain-dew-800: #394642;
  --color-mountain-dew-900: #2a3632;
  --color-mountain-dew-950: #19211f;
  --color-velvet-black: #261f19;
  --color-velvet-black-50: #f9f4ef;
  --color-velvet-black-100: #f0eae5;
  --color-velvet-black-200: #ddd6d0;
  --color-velvet-black-300: #c7bfb8;
  --color-velvet-black-400: #a9a098;
  --color-velvet-black-500: #8d857d;
  --color-velvet-black-600: #736b63;
  --color-velvet-black-700: #5c544e;
  --color-velvet-black-800: #49423c;
  --color-velvet-black-900: #38332e;
  --color-velvet-black-950: #261f19;
  --color-freefall: #585163;
  --color-freefall-50: #f7f3ff;
  --color-freefall-100: #ede8f6;
  --color-freefall-200: #dad4e4;
  --color-freefall-300: #c4bdcf;
  --color-freefall-400: #a59db1;
  --color-freefall-500: #898295;
  --color-freefall-600: #6f687a;
  --color-freefall-700: #585163;
  --color-freefall-800: #453f4d;
  --color-freefall-900: #35303c;
  --color-freefall-950: #211d26;
  --color-yucca: #76988d;
  --color-yucca-50: #e9fcf5;
  --color-yucca-100: #dff4ed;
  --color-yucca-200: #cae3db;
  --color-yucca-300: #b2cfc5;
  --color-yucca-400: #91b2a7;
  --color-yucca-500: #76988d;
  --color-yucca-600: #5a7b71;
  --color-yucca-700: #446259;
  --color-yucca-800: #324d45;
  --color-yucca-900: #243b34;
  --color-yucca-950: #14241f;
}