Neon Violet to Candy Dreams Color Palette

About this palette

Neon Violet to Candy Dreams is a 5-color cool, monochromatic palette: #6B4978 (Neon Violet), #C590E3 (Dream Vapour), #533163 (Royal Crown), #9C74A8 (Drama Queen), #E0B6F5 (Candy Dreams). It mixes purple tones and feels cool overall. The strongest text pairing is #533163 on #E0B6F5 with a contrast ratio of 6.13:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Violet	rgb(107, 73, 120)	hsl(283, 24%, 38%)
Dream Vapour	rgb(197, 144, 227)	hsl(278, 60%, 73%)
Royal Crown	rgb(83, 49, 99)	hsl(281, 34%, 29%)
Drama Queen	rgb(156, 116, 168)	hsl(286, 23%, 56%)
Candy Dreams	rgb(224, 182, 245)	hsl(280, 76%, 84%)

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.13:1 Good#533163 on #E0B6F5
Aa6.13:1 Good#E0B6F5 on #533163
Aa4.27:1 Poor#6B4978 on #E0B6F5
Aa4.27:1 Poor#E0B6F5 on #6B4978
Aa4.26:1 Poor#C590E3 on #533163
Aa4.26:1 Poor#533163 on #C590E3

Color blindness preview

CSS variables

/* Neon Violet to Candy Dreams — https://swatchly.xyz/palette/6b4978-c590e3-533163-9c74a8-e0b6f5 */
:root {
  --neon-violet: #6b4978;
  --dream-vapour: #c590e3;
  --royal-crown: #533163;
  --drama-queen: #9c74a8;
  --candy-dreams: #e0b6f5;
}

Tailwind CSS v4

/* Neon Violet to Candy Dreams — https://swatchly.xyz/palette/6b4978-c590e3-533163-9c74a8-e0b6f5 */
@theme {
  --color-neon-violet: #6b4978;
  --color-neon-violet-50: #fbf1ff;
  --color-neon-violet-100: #f7e3ff;
  --color-neon-violet-200: #e9ccf4;
  --color-neon-violet-300: #d5b4e2;
  --color-neon-violet-400: #b794c5;
  --color-neon-violet-500: #9d79ab;
  --color-neon-violet-600: #825f8f;
  --color-neon-violet-700: #6b4978;
  --color-neon-violet-800: #54385f;
  --color-neon-violet-900: #422a4b;
  --color-neon-violet-950: #2a1930;
  --color-dream-vapour: #c590e3;
  --color-dream-vapour-50: #fbf5ff;
  --color-dream-vapour-100: #f7e9ff;
  --color-dream-vapour-200: #edd0ff;
  --color-dream-vapour-300: #dfb3f9;
  --color-dream-vapour-400: #c590e3;
  --color-dream-vapour-500: #a773c4;
  --color-dream-vapour-600: #8a58a5;
  --color-dream-vapour-700: #704188;
  --color-dream-vapour-800: #582f6e;
  --color-dream-vapour-900: #452256;
  --color-dream-vapour-950: #2b1238;
  --color-royal-crown: #533163;
  --color-royal-crown-50: #faf1ff;
  --color-royal-crown-100: #f5e4ff;
  --color-royal-crown-200: #e8cbf7;
  --color-royal-crown-300: #d3b2e4;
  --color-royal-crown-400: #b591c8;
  --color-royal-crown-500: #9a75ac;
  --color-royal-crown-600: #7e5b8f;
  --color-royal-crown-700: #664675;
  --color-royal-crown-800: #533163;
  --color-royal-crown-900: #3f274a;
  --color-royal-crown-950: #281730;
  --color-drama-queen: #9c74a8;
  --color-drama-queen-50: #fcf1ff;
  --color-drama-queen-100: #f8e2ff;
  --color-drama-queen-200: #eacaf4;
  --color-drama-queen-300: #d6b1e0;
  --color-drama-queen-400: #b890c3;
  --color-drama-queen-500: #9c74a8;
  --color-drama-queen-600: #805a8c;
  --color-drama-queen-700: #684572;
  --color-drama-queen-800: #52345b;
  --color-drama-queen-900: #402748;
  --color-drama-queen-950: #29172f;
  --color-candy-dreams: #e0b6f5;
  --color-candy-dreams-50: #fcf7ff;
  --color-candy-dreams-100: #f8ebff;
  --color-candy-dreams-200: #efd1fe;
  --color-candy-dreams-300: #e0b6f5;
  --color-candy-dreams-400: #bd97d0;
  --color-candy-dreams-500: #a179b4;
  --color-candy-dreams-600: #845e96;
  --color-candy-dreams-700: #6a477a;
  --color-candy-dreams-800: #533562;
  --color-candy-dreams-900: #40264c;
  --color-candy-dreams-950: #291631;
}