Witch Brew to Her Highness Color Palette

About this palette

Witch Brew to Her Highness is a 5-color cool, vintage palette: #86892C (Witch Brew), #DEA5BE (Think Pink), #CEE4A9 (Mermaid Tears), #006B62 (Peacock Pride), #3F2D7B (Her Highness). It mixes yellow, pink, green, turquoise, purple tones and feels cool overall. The strongest text pairing is #CEE4A9 on #3F2D7B with a contrast ratio of 8.17:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Witch Brew	rgb(134, 137, 44)	hsl(62, 51%, 35%)
Think Pink	rgb(222, 165, 190)	hsl(334, 46%, 76%)
Mermaid Tears	rgb(206, 228, 169)	hsl(82, 52%, 78%)
Peacock Pride	rgb(0, 107, 98)	hsl(175, 100%, 21%)
Her Highness	rgb(63, 45, 123)	hsl(254, 46%, 33%)

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.

Aa8.17:1 Very good#CEE4A9 on #3F2D7B
Aa8.17:1 Very good#3F2D7B on #CEE4A9
Aa5.46:1 Good#DEA5BE on #3F2D7B
Aa5.46:1 Good#3F2D7B on #DEA5BE
Aa4.66:1 Good#CEE4A9 on #006B62
Aa4.66:1 Good#006B62 on #CEE4A9
Aa3.12:1 Poor#DEA5BE on #006B62
Aa3.12:1 Poor#006B62 on #DEA5BE

Color blindness preview

CSS variables

/* Witch Brew to Her Highness — https://swatchly.xyz/palette/86892c-dea5be-cee4a9-006b62-3f2d7b */
:root {
  --witch-brew: #86892c;
  --think-pink: #dea5be;
  --mermaid-tears: #cee4a9;
  --peacock-pride: #006b62;
  --her-highness: #3f2d7b;
}

Tailwind CSS v4

/* Witch Brew to Her Highness — https://swatchly.xyz/palette/86892c-dea5be-cee4a9-006b62-3f2d7b */
@theme {
  --color-witch-brew: #86892c;
  --color-witch-brew-50: #f6f9c9;
  --color-witch-brew-100: #ebefb8;
  --color-witch-brew-200: #d7dc9a;
  --color-witch-brew-300: #c1c579;
  --color-witch-brew-400: #a1a54f;
  --color-witch-brew-500: #86892c;
  --color-witch-brew-600: #6c6f08;
  --color-witch-brew-700: #565800;
  --color-witch-brew-800: #434500;
  --color-witch-brew-900: #343500;
  --color-witch-brew-950: #202100;
  --color-think-pink: #dea5be;
  --color-think-pink-50: #ffeaf3;
  --color-think-pink-100: #ffd9e9;
  --color-think-pink-200: #efc1d5;
  --color-think-pink-300: #dea5be;
  --color-think-pink-400: #be88a0;
  --color-think-pink-500: #a36e86;
  --color-think-pink-600: #88566d;
  --color-think-pink-700: #6f4357;
  --color-think-pink-800: #5a3345;
  --color-think-pink-900: #482736;
  --color-think-pink-950: #2e1622;
  --color-mermaid-tears: #cee4a9;
  --color-mermaid-tears-50: #f0fddd;
  --color-mermaid-tears-100: #e6f4d0;
  --color-mermaid-tears-200: #cee4a9;
  --color-mermaid-tears-300: #b9cb9b;
  --color-mermaid-tears-400: #98ac76;
  --color-mermaid-tears-500: #7c9059;
  --color-mermaid-tears-600: #62753f;
  --color-mermaid-tears-700: #4c5d2c;
  --color-mermaid-tears-800: #3a481d;
  --color-mermaid-tears-900: #2c3813;
  --color-mermaid-tears-950: #1a2308;
  --color-peacock-pride: #006b62;
  --color-peacock-pride-50: #d7fff9;
  --color-peacock-pride-100: #c5f7ef;
  --color-peacock-pride-200: #abe7de;
  --color-peacock-pride-300: #8ed3c9;
  --color-peacock-pride-400: #67b6ac;
  --color-peacock-pride-500: #479c91;
  --color-peacock-pride-600: #2a8178;
  --color-peacock-pride-700: #006b62;
  --color-peacock-pride-800: #00544d;
  --color-peacock-pride-900: #00413b;
  --color-peacock-pride-950: #002925;
  --color-her-highness: #3f2d7b;
  --color-her-highness-50: #f4f4ff;
  --color-her-highness-100: #eae8ff;
  --color-her-highness-200: #d6d1ff;
  --color-her-highness-300: #beb5ff;
  --color-her-highness-400: #9e92e7;
  --color-her-highness-500: #8275ca;
  --color-her-highness-600: #685aab;
  --color-her-highness-700: #51448c;
  --color-her-highness-800: #3f2d7b;
  --color-her-highness-900: #302559;
  --color-her-highness-950: #1d153b;
}