Voodoo to Water Color Palette

About this palette

Voodoo to Water is a 5-color cool, vintage palette: #4E2E40 (Voodoo), #55690B (Serrano Pepper), #2C93B4 (Enchanted Well), #B1B289 (Green Tea), #C7EFFE (Water). It mixes red, green, blue, yellow tones and feels cool overall. The strongest text pairing is #4E2E40 on #C7EFFE with a contrast ratio of 9.62:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Voodoo	rgb(78, 46, 64)	hsl(326, 26%, 24%)
Serrano Pepper	rgb(85, 105, 11)	hsl(73, 81%, 23%)
Enchanted Well	rgb(44, 147, 180)	hsl(195, 61%, 44%)
Green Tea	rgb(177, 178, 137)	hsl(61, 21%, 62%)
Water	rgb(199, 239, 254)	hsl(196, 96%, 89%)

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.62:1 Very good#4E2E40 on #C7EFFE
Aa9.62:1 Very good#C7EFFE on #4E2E40
Aa5.37:1 Good#4E2E40 on #B1B289
Aa5.37:1 Good#B1B289 on #4E2E40
Aa5.04:1 Good#55690B on #C7EFFE
Aa5.04:1 Good#C7EFFE on #55690B
Aa3.32:1 Poor#4E2E40 on #2C93B4
Aa3.32:1 Poor#2C93B4 on #4E2E40

Color blindness preview

CSS variables

/* Voodoo to Water — https://swatchly.xyz/palette/4e2e40-55690b-2c93b4-b1b289-c7effe */
:root {
  --voodoo: #4e2e40;
  --serrano-pepper: #55690b;
  --enchanted-well: #2c93b4;
  --green-tea: #b1b289;
  --water: #c7effe;
}

Tailwind CSS v4

/* Voodoo to Water — https://swatchly.xyz/palette/4e2e40-55690b-2c93b4-b1b289-c7effe */
@theme {
  --color-voodoo: #4e2e40;
  --color-voodoo-50: #fff0f8;
  --color-voodoo-100: #fde3f0;
  --color-voodoo-200: #eccddd;
  --color-voodoo-300: #d8b6c7;
  --color-voodoo-400: #bc96aa;
  --color-voodoo-500: #a27c90;
  --color-voodoo-600: #876377;
  --color-voodoo-700: #704f61;
  --color-voodoo-800: #5b3e4e;
  --color-voodoo-900: #4e2e40;
  --color-voodoo-950: #311e28;
  --color-serrano-pepper: #55690b;
  --color-serrano-pepper-50: #eefdce;
  --color-serrano-pepper-100: #e3f3bf;
  --color-serrano-pepper-200: #d0e3a6;
  --color-serrano-pepper-300: #bacf89;
  --color-serrano-pepper-400: #9cb263;
  --color-serrano-pepper-500: #829845;
  --color-serrano-pepper-600: #6a7f2a;
  --color-serrano-pepper-700: #55690b;
  --color-serrano-pepper-800: #425200;
  --color-serrano-pepper-900: #323f00;
  --color-serrano-pepper-950: #1f2800;
  --color-enchanted-well: #2c93b4;
  --color-enchanted-well-50: #e8f8ff;
  --color-enchanted-well-100: #d0f2ff;
  --color-enchanted-well-200: #a0e3fd;
  --color-enchanted-well-300: #7fceeb;
  --color-enchanted-well-400: #53afcf;
  --color-enchanted-well-500: #2c93b4;
  --color-enchanted-well-600: #007796;
  --color-enchanted-well-700: #005f78;
  --color-enchanted-well-800: #004a5e;
  --color-enchanted-well-900: #003949;
  --color-enchanted-well-950: #00242f;
  --color-green-tea: #b1b289;
  --color-green-tea-50: #fbfce6;
  --color-green-tea-100: #f3f4dc;
  --color-green-tea-200: #e2e3c6;
  --color-green-tea-300: #cecfae;
  --color-green-tea-400: #b1b289;
  --color-green-tea-500: #93946c;
  --color-green-tea-600: #767750;
  --color-green-tea-700: #5d5e3a;
  --color-green-tea-800: #484829;
  --color-green-tea-900: #36361c;
  --color-green-tea-950: #20200e;
  --color-water: #c7effe;
  --color-water-50: #e0f6ff;
  --color-water-100: #c7effe;
  --color-water-200: #bddae5;
  --color-water-300: #a3c5d1;
  --color-water-400: #82a6b4;
  --color-water-500: #668c99;
  --color-water-600: #4e717e;
  --color-water-700: #3a5b67;
  --color-water-800: #2a4751;
  --color-water-900: #1e373f;
  --color-water-950: #102228;
}