Vicious Violet to Imperial Lilac Color Palette

About this palette

Vicious Violet to Imperial Lilac is a 4-color cool palette: #8B5A9E (Vicious Violet), #87DCD2 (Tantalising Teal), #5C4115 (Pineapple), #AF9AC3 (Imperial Lilac). It mixes purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #87DCD2 on #5C4115 with a contrast ratio of 5.94:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vicious Violet	rgb(139, 90, 158)	hsl(283, 27%, 49%)
Tantalising Teal	rgb(135, 220, 210)	hsl(173, 55%, 70%)
Pineapple	rgb(92, 65, 21)	hsl(37, 63%, 22%)
Imperial Lilac	rgb(175, 154, 195)	hsl(271, 25%, 68%)

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.

Aa5.94:1 Good#87DCD2 on #5C4115
Aa5.94:1 Good#5C4115 on #87DCD2
Aa3.71:1 Poor#5C4115 on #AF9AC3
Aa3.71:1 Poor#AF9AC3 on #5C4115
Aa3.26:1 Poor#8B5A9E on #87DCD2
Aa3.26:1 Poor#87DCD2 on #8B5A9E

Color blindness preview

CSS variables

/* Vicious Violet to Imperial Lilac — https://swatchly.xyz/palette/8b5a9e-87dcd2-5c4115-af9ac3 */
:root {
  --vicious-violet: #8b5a9e;
  --tantalising-teal: #87dcd2;
  --pineapple: #5c4115;
  --imperial-lilac: #af9ac3;
}

Tailwind CSS v4

/* Vicious Violet to Imperial Lilac — https://swatchly.xyz/palette/8b5a9e-87dcd2-5c4115-af9ac3 */
@theme {
  --color-vicious-violet: #8b5a9e;
  --color-vicious-violet-50: #fbf1ff;
  --color-vicious-violet-100: #f7e4ff;
  --color-vicious-violet-200: #efc9ff;
  --color-vicious-violet-300: #ddb1ef;
  --color-vicious-violet-400: #c08fd4;
  --color-vicious-violet-500: #a674b9;
  --color-vicious-violet-600: #8b5a9e;
  --color-vicious-violet-700: #714482;
  --color-vicious-violet-800: #5a3269;
  --color-vicious-violet-900: #462553;
  --color-vicious-violet-950: #2d1536;
  --color-tantalising-teal: #87dcd2;
  --color-tantalising-teal-50: #eafffc;
  --color-tantalising-teal-100: #cefdf6;
  --color-tantalising-teal-200: #b3ece5;
  --color-tantalising-teal-300: #87dcd2;
  --color-tantalising-teal-400: #6ab9b0;
  --color-tantalising-teal-500: #479c93;
  --color-tantalising-teal-600: #267f77;
  --color-tantalising-teal-700: #07665e;
  --color-tantalising-teal-800: #004f49;
  --color-tantalising-teal-900: #003c37;
  --color-tantalising-teal-950: #002622;
  --color-pineapple: #5c4115;
  --color-pineapple-50: #fff3e3;
  --color-pineapple-100: #fce8cc;
  --color-pineapple-200: #ecd4b2;
  --color-pineapple-300: #d8bd97;
  --color-pineapple-400: #bb9e74;
  --color-pineapple-500: #a18358;
  --color-pineapple-600: #86693f;
  --color-pineapple-700: #6e542d;
  --color-pineapple-800: #5c4115;
  --color-pineapple-900: #463214;
  --color-pineapple-950: #2d1f08;
  --color-imperial-lilac: #af9ac3;
  --color-imperial-lilac-50: #f9f3ff;
  --color-imperial-lilac-100: #f3e7ff;
  --color-imperial-lilac-200: #e2d2f1;
  --color-imperial-lilac-300: #cdbbde;
  --color-imperial-lilac-400: #af9ac3;
  --color-imperial-lilac-500: #937ea6;
  --color-imperial-lilac-600: #776489;
  --color-imperial-lilac-700: #5f4e70;
  --color-imperial-lilac-800: #4b3b59;
  --color-imperial-lilac-900: #3a2d46;
  --color-imperial-lilac-950: #241b2c;
}