Perrywinkle to Vampiric Bloodlust Color Palette

About this palette

Perrywinkle to Vampiric Bloodlust is a 4-color vibrant, neon palette: #8596FF (Perrywinkle), #B1AAFF (Widowmaker), #BA7700 (Caramel Coating), #CC006D (Vampiric Bloodlust). It mixes blue, purple, orange, red tones and feels balanced overall. The strongest text pairing is #B1AAFF on #CC006D with a contrast ratio of 2.66:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Perrywinkle	rgb(133, 150, 255)	hsl(232, 100%, 76%)
Widowmaker	rgb(177, 170, 255)	hsl(245, 100%, 83%)
Caramel Coating	rgb(186, 119, 0)	hsl(38, 100%, 36%)
Vampiric Bloodlust	rgb(204, 0, 109)	hsl(328, 100%, 40%)

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.

Color blindness preview

CSS variables

/* Perrywinkle to Vampiric Bloodlust — https://swatchly.xyz/palette/8596ff-b1aaff-ba7700-cc006d */
:root {
  --perrywinkle: #8596ff;
  --widowmaker: #b1aaff;
  --caramel-coating: #ba7700;
  --vampiric-bloodlust: #cc006d;
}

Tailwind CSS v4

/* Perrywinkle to Vampiric Bloodlust — https://swatchly.xyz/palette/8596ff-b1aaff-ba7700-cc006d */
@theme {
  --color-perrywinkle: #8596ff;
  --color-perrywinkle-50: #f1f4ff;
  --color-perrywinkle-100: #e4eaff;
  --color-perrywinkle-200: #cad4ff;
  --color-perrywinkle-300: #adbbff;
  --color-perrywinkle-400: #8596ff;
  --color-perrywinkle-500: #6b7ae0;
  --color-perrywinkle-600: #535fc1;
  --color-perrywinkle-700: #4049a2;
  --color-perrywinkle-800: #303785;
  --color-perrywinkle-900: #24296b;
  --color-perrywinkle-950: #151848;
  --color-widowmaker: #b1aaff;
  --color-widowmaker-50: #eeeeff;
  --color-widowmaker-100: #e1e0ff;
  --color-widowmaker-200: #cac7ff;
  --color-widowmaker-300: #b1aaff;
  --color-widowmaker-400: #948dde;
  --color-widowmaker-500: #7b73c3;
  --color-widowmaker-600: #635aa6;
  --color-widowmaker-700: #4f468b;
  --color-widowmaker-800: #3f3672;
  --color-widowmaker-900: #31295d;
  --color-widowmaker-950: #1e183e;
  --color-caramel-coating: #ba7700;
  --color-caramel-coating-50: #fff3e6;
  --color-caramel-coating-100: #ffe8cd;
  --color-caramel-coating-200: #ffcf96;
  --color-caramel-coating-300: #f1b56b;
  --color-caramel-coating-400: #d5933b;
  --color-caramel-coating-500: #ba7700;
  --color-caramel-coating-600: #965f00;
  --color-caramel-coating-700: #784b00;
  --color-caramel-coating-800: #5e3a00;
  --color-caramel-coating-900: #492c00;
  --color-caramel-coating-950: #2f1a00;
  --color-vampiric-bloodlust: #cc006d;
  --color-vampiric-bloodlust-50: #fff1f5;
  --color-vampiric-bloodlust-100: #ffe4eb;
  --color-vampiric-bloodlust-200: #ffc8d8;
  --color-vampiric-bloodlust-300: #ffa5c1;
  --color-vampiric-bloodlust-400: #ff69a2;
  --color-vampiric-bloodlust-500: #eb3887;
  --color-vampiric-bloodlust-600: #cc006d;
  --color-vampiric-bloodlust-700: #a40056;
  --color-vampiric-bloodlust-800: #810043;
  --color-vampiric-bloodlust-900: #650033;
  --color-vampiric-bloodlust-950: #42001f;
}