Wisteria to Herbivore Color Palette

About this palette

Wisteria to Herbivore is a 5-color cool palette: #B67DC6 (Wisteria), #1093B1 (Munsell Blue), #A32A00 (Tabasco), #2F4B01 (Treetop Cathedral), #7FEB78 (Herbivore). It mixes purple, blue, red, green tones and feels cool overall. The strongest text pairing is #2F4B01 on #7FEB78 with a contrast ratio of 6.61:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wisteria	rgb(182, 125, 198)	hsl(287, 39%, 63%)
Munsell Blue	rgb(16, 147, 177)	hsl(191, 83%, 38%)
Tabasco	rgb(163, 42, 0)	hsl(15, 100%, 32%)
Treetop Cathedral	rgb(47, 75, 1)	hsl(83, 97%, 15%)
Herbivore	rgb(127, 235, 120)	hsl(116, 74%, 70%)

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.

Aa6.61:1 Good#2F4B01 on #7FEB78
Aa6.61:1 Good#7FEB78 on #2F4B01
Aa4.87:1 Good#A32A00 on #7FEB78
Aa4.87:1 Good#7FEB78 on #A32A00
Aa3.17:1 Poor#B67DC6 on #2F4B01
Aa3.17:1 Poor#2F4B01 on #B67DC6

Color blindness preview

CSS variables

/* Wisteria to Herbivore — https://swatchly.xyz/palette/b67dc6-1093b1-a32a00-2f4b01-7feb78 */
:root {
  --wisteria: #b67dc6;
  --munsell-blue: #1093b1;
  --tabasco: #a32a00;
  --treetop-cathedral: #2f4b01;
  --herbivore: #7feb78;
}

Tailwind CSS v4

/* Wisteria to Herbivore — https://swatchly.xyz/palette/b67dc6-1093b1-a32a00-2f4b01-7feb78 */
@theme {
  --color-wisteria: #b67dc6;
  --color-wisteria-50: #fbebff;
  --color-wisteria-100: #f7d9ff;
  --color-wisteria-200: #ebbcf8;
  --color-wisteria-300: #d5a1e4;
  --color-wisteria-400: #b67dc6;
  --color-wisteria-500: #9b64ab;
  --color-wisteria-600: #814c8f;
  --color-wisteria-700: #693a76;
  --color-wisteria-800: #552b60;
  --color-wisteria-900: #44204d;
  --color-wisteria-950: #2d1234;
  --color-munsell-blue: #1093b1;
  --color-munsell-blue-50: #e6f9ff;
  --color-munsell-blue-100: #cbf2ff;
  --color-munsell-blue-200: #98e4fb;
  --color-munsell-blue-300: #75cee9;
  --color-munsell-blue-400: #45afcd;
  --color-munsell-blue-500: #1093b1;
  --color-munsell-blue-600: #007790;
  --color-munsell-blue-700: #005e73;
  --color-munsell-blue-800: #004a5a;
  --color-munsell-blue-900: #003946;
  --color-munsell-blue-950: #00242d;
  --color-tabasco: #a32a00;
  --color-tabasco-50: #fff2ee;
  --color-tabasco-100: #ffe5dd;
  --color-tabasco-200: #ffcbbd;
  --color-tabasco-300: #ffab95;
  --color-tabasco-400: #f67d5e;
  --color-tabasco-500: #db5f3f;
  --color-tabasco-600: #bd4423;
  --color-tabasco-700: #a32a00;
  --color-tabasco-800: #811f00;
  --color-tabasco-900: #651600;
  --color-tabasco-950: #430b00;
  --color-treetop-cathedral: #2f4b01;
  --color-treetop-cathedral-50: #e9fdd7;
  --color-treetop-cathedral-100: #def4c9;
  --color-treetop-cathedral-200: #c8e2ae;
  --color-treetop-cathedral-300: #afcc91;
  --color-treetop-cathedral-400: #8dad6c;
  --color-treetop-cathedral-500: #72924f;
  --color-treetop-cathedral-600: #587635;
  --color-treetop-cathedral-700: #435e22;
  --color-treetop-cathedral-800: #2f4b01;
  --color-treetop-cathedral-900: #25390b;
  --color-treetop-cathedral-950: #152404;
  --color-herbivore: #7feb78;
  --color-herbivore-50: #cbffc6;
  --color-herbivore-100: #b2f8ac;
  --color-herbivore-200: #7feb78;
  --color-herbivore-300: #75d36f;
  --color-herbivore-400: #4db647;
  --color-herbivore-500: #299b26;
  --color-herbivore-600: #008001;
  --color-herbivore-700: #006701;
  --color-herbivore-800: #005200;
  --color-herbivore-900: #003f00;
  --color-herbivore-950: #002800;
}