Honeydew to Voodoo Color Palette

About this palette

Honeydew to Voodoo is a 5-color muted palette: #EDFDF2 (Honeydew), #778E7D (Majestic Evergreen), #C9B5C1 (Mauvelous), #4B6054 (Verdant Hush), #432F3C (Voodoo). It mixes white, green, gray, red tones and feels balanced overall. The strongest text pairing is #EDFDF2 on #432F3C with a contrast ratio of 11.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Honeydew	rgb(237, 253, 242)	hsl(139, 80%, 96%)
Majestic Evergreen	rgb(119, 142, 125)	hsl(136, 9%, 51%)
Mauvelous	rgb(201, 181, 193)	hsl(324, 16%, 75%)
Verdant Hush	rgb(75, 96, 84)	hsl(146, 12%, 34%)
Voodoo	rgb(67, 47, 60)	hsl(321, 18%, 22%)

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.65:1 Very good#EDFDF2 on #432F3C
Aa11.65:1 Very good#432F3C on #EDFDF2
Aa6.43:1 Good#EDFDF2 on #4B6054
Aa6.43:1 Good#4B6054 on #EDFDF2
Aa6.35:1 Good#C9B5C1 on #432F3C
Aa6.35:1 Good#432F3C on #C9B5C1
Aa3.50:1 Poor#C9B5C1 on #4B6054
Aa3.50:1 Poor#4B6054 on #C9B5C1

Color blindness preview

CSS variables

/* Honeydew to Voodoo — https://swatchly.xyz/palette/edfdf2-778e7d-c9b5c1-4b6054-432f3c */
:root {
  --honeydew: #edfdf2;
  --majestic-evergreen: #778e7d;
  --mauvelous: #c9b5c1;
  --verdant-hush: #4b6054;
  --voodoo: #432f3c;
}

Tailwind CSS v4

/* Honeydew to Voodoo — https://swatchly.xyz/palette/edfdf2-778e7d-c9b5c1-4b6054-432f3c */
@theme {
  --color-honeydew: #edfdf2;
  --color-honeydew-50: #edfdf2;
  --color-honeydew-100: #e7f1ea;
  --color-honeydew-200: #d1ddd5;
  --color-honeydew-300: #b9c6bd;
  --color-honeydew-400: #98a79d;
  --color-honeydew-500: #7c8b81;
  --color-honeydew-600: #627067;
  --color-honeydew-700: #4c5950;
  --color-honeydew-800: #3b453e;
  --color-honeydew-900: #2c352f;
  --color-honeydew-950: #1b211d;
  --color-majestic-evergreen: #778e7d;
  --color-majestic-evergreen-50: #ecfaef;
  --color-majestic-evergreen-100: #e1f0e5;
  --color-majestic-evergreen-200: #cbded0;
  --color-majestic-evergreen-300: #b3c8b8;
  --color-majestic-evergreen-400: #93a998;
  --color-majestic-evergreen-500: #778e7d;
  --color-majestic-evergreen-600: #5d7363;
  --color-majestic-evergreen-700: #485c4d;
  --color-majestic-evergreen-800: #36483b;
  --color-majestic-evergreen-900: #29372d;
  --color-majestic-evergreen-950: #18221b;
  --color-mauvelous: #c9b5c1;
  --color-mauvelous-50: #faeef6;
  --color-mauvelous-100: #f1e3eb;
  --color-mauvelous-200: #deced7;
  --color-mauvelous-300: #c9b5c1;
  --color-mauvelous-400: #aa97a2;
  --color-mauvelous-500: #8f7d88;
  --color-mauvelous-600: #75636e;
  --color-mauvelous-700: #5e4e58;
  --color-mauvelous-800: #4b3d45;
  --color-mauvelous-900: #3a2f36;
  --color-mauvelous-950: #251c21;
  --color-verdant-hush: #4b6054;
  --color-verdant-hush-50: #ecf9f1;
  --color-verdant-hush-100: #e1efe7;
  --color-verdant-hush-200: #ccded3;
  --color-verdant-hush-300: #b5c9bd;
  --color-verdant-hush-400: #95aa9e;
  --color-verdant-hush-500: #7a9083;
  --color-verdant-hush-600: #61766a;
  --color-verdant-hush-700: #4b6054;
  --color-verdant-hush-800: #3a4b41;
  --color-verdant-hush-900: #2b3a31;
  --color-verdant-hush-950: #1a241e;
  --color-voodoo: #432f3c;
  --color-voodoo-50: #fff0f9;
  --color-voodoo-100: #f6e6f0;
  --color-voodoo-200: #e4d1dd;
  --color-voodoo-300: #cfbac7;
  --color-voodoo-400: #b29aa9;
  --color-voodoo-500: #977f8e;
  --color-voodoo-600: #7c6674;
  --color-voodoo-700: #65515e;
  --color-voodoo-800: #513f4a;
  --color-voodoo-900: #432f3c;
  --color-voodoo-950: #291e25;
}