Voodoo to Subtle Breeze Color Palette

About this palette

Voodoo to Subtle Breeze is a 5-color muted, vintage palette: #45343E (Voodoo), #7B516A (Royal Fig), #898261 (Mushroom Forest), #86B7C6 (Crystal Lake), #B8CFD8 (Subtle Breeze). It mixes gray, red, yellow, blue tones and feels warm overall. The strongest text pairing is #45343E on #B8CFD8 with a contrast ratio of 7.14:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Voodoo	rgb(69, 52, 62)	hsl(325, 14%, 24%)
Royal Fig	rgb(123, 81, 106)	hsl(324, 21%, 40%)
Mushroom Forest	rgb(137, 130, 97)	hsl(50, 17%, 46%)
Crystal Lake	rgb(134, 183, 198)	hsl(194, 36%, 65%)
Subtle Breeze	rgb(184, 207, 216)	hsl(197, 29%, 78%)

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.

Aa7.14:1 Very good#45343E on #B8CFD8
Aa7.14:1 Very good#B8CFD8 on #45343E
Aa5.29:1 Good#45343E on #86B7C6
Aa5.29:1 Good#86B7C6 on #45343E
Aa4.01:1 Poor#7B516A on #B8CFD8
Aa4.01:1 Poor#B8CFD8 on #7B516A

Color blindness preview

CSS variables

/* Voodoo to Subtle Breeze — https://swatchly.xyz/palette/45343e-7b516a-898261-86b7c6-b8cfd8 */
:root {
  --voodoo: #45343e;
  --royal-fig: #7b516a;
  --mushroom-forest: #898261;
  --crystal-lake: #86b7c6;
  --subtle-breeze: #b8cfd8;
}

Tailwind CSS v4

/* Voodoo to Subtle Breeze — https://swatchly.xyz/palette/45343e-7b516a-898261-86b7c6-b8cfd8 */
@theme {
  --color-voodoo: #45343e;
  --color-voodoo-50: #fdf1f8;
  --color-voodoo-100: #f4e7ee;
  --color-voodoo-200: #e2d2db;
  --color-voodoo-300: #cdbbc5;
  --color-voodoo-400: #b09ca8;
  --color-voodoo-500: #96828e;
  --color-voodoo-600: #7c6974;
  --color-voodoo-700: #66545f;
  --color-voodoo-800: #53434c;
  --color-voodoo-900: #45343e;
  --color-voodoo-950: #2b2127;
  --color-royal-fig: #7b516a;
  --color-royal-fig-50: #fff0f8;
  --color-royal-fig-100: #ffe1f2;
  --color-royal-fig-200: #f2cee2;
  --color-royal-fig-300: #e0b7ce;
  --color-royal-fig-400: #c598b2;
  --color-royal-fig-500: #ab7e98;
  --color-royal-fig-600: #91667f;
  --color-royal-fig-700: #7b516a;
  --color-royal-fig-800: #623e53;
  --color-royal-fig-900: #4d2e41;
  --color-royal-fig-950: #321c29;
  --color-mushroom-forest: #898261;
  --color-mushroom-forest-50: #f9f5e1;
  --color-mushroom-forest-100: #efead3;
  --color-mushroom-forest-200: #dbd6bb;
  --color-mushroom-forest-300: #c4bea0;
  --color-mushroom-forest-400: #a59e7d;
  --color-mushroom-forest-500: #898261;
  --color-mushroom-forest-600: #6f6849;
  --color-mushroom-forest-700: #595336;
  --color-mushroom-forest-800: #464128;
  --color-mushroom-forest-900: #36321d;
  --color-mushroom-forest-950: #221f0f;
  --color-crystal-lake: #86b7c6;
  --color-crystal-lake-50: #f1fcff;
  --color-crystal-lake-100: #def7ff;
  --color-crystal-lake-200: #c5e7f2;
  --color-crystal-lake-300: #acd3e0;
  --color-crystal-lake-400: #86b7c6;
  --color-crystal-lake-500: #6999a7;
  --color-crystal-lake-600: #4d7c8a;
  --color-crystal-lake-700: #36626f;
  --color-crystal-lake-800: #254c57;
  --color-crystal-lake-900: #183a43;
  --color-crystal-lake-950: #0b2329;
  --color-subtle-breeze: #b8cfd8;
  --color-subtle-breeze-50: #f3fcff;
  --color-subtle-breeze-100: #e7f4fa;
  --color-subtle-breeze-200: #d3e3e9;
  --color-subtle-breeze-300: #b8cfd8;
  --color-subtle-breeze-400: #98adb5;
  --color-subtle-breeze-500: #7b9099;
  --color-subtle-breeze-600: #5f747c;
  --color-subtle-breeze-700: #495c63;
  --color-subtle-breeze-800: #36474d;
  --color-subtle-breeze-900: #27353b;
  --color-subtle-breeze-950: #172125;
}