Velvet Horizon to Neon Violet color palette

D5A1CEVelvet Horizon 9A739ADrama Queen FEE9FFStrawberry Bonbon 401D43Purple Void 6E4475Neon Violet

About this palette

Velvet Horizon to Neon Violet is a 5-color cool, monochromatic palette: #D5A1CE (Velvet Horizon), #9A739A (Drama Queen), #FEE9FF (Strawberry Bonbon), #401D43 (Purple Void), #6E4475 (Neon Violet). It mixes pink, white, purple tones and feels cool overall. The strongest text pairing is #FEE9FF on #401D43 with a contrast ratio of 12.42:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velvet Horizon	rgb(213, 161, 206)	hsl(308, 38%, 73%)
Drama Queen	rgb(154, 115, 154)	hsl(300, 16%, 53%)
Strawberry Bonbon	rgb(254, 233, 255)	hsl(297, 100%, 96%)
Purple Void	rgb(64, 29, 67)	hsl(295, 40%, 19%)
Neon Violet	rgb(110, 68, 117)	hsl(291, 26%, 36%)

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.

Aa12.42:1 Super#FEE9FF on #401D43
Aa12.42:1 Super#401D43 on #FEE9FF
Aa6.67:1 Good#FEE9FF on #6E4475
Aa6.67:1 Good#6E4475 on #FEE9FF
Aa6.66:1 Good#D5A1CE on #401D43
Aa6.66:1 Good#401D43 on #D5A1CE
Aa3.59:1 Poor#9A739A on #401D43
Aa3.59:1 Poor#401D43 on #9A739A

Color blindness preview

CSS variables

/* Velvet Horizon to Neon Violet — https://swatchly.xyz/palette/d5a1ce-9a739a-fee9ff-401d43-6e4475 */
:root {
  --velvet-horizon: #d5a1ce;
  --drama-queen: #9a739a;
  --strawberry-bonbon: #fee9ff;
  --purple-void: #401d43;
  --neon-violet: #6e4475;
}

Tailwind CSS v4

/* Velvet Horizon to Neon Violet — https://swatchly.xyz/palette/d5a1ce-9a739a-fee9ff-401d43-6e4475 */
@theme {
  --color-velvet-horizon: #d5a1ce;
  --color-velvet-horizon-50: #ffe6fb;
  --color-velvet-horizon-100: #fad5f5;
  --color-velvet-horizon-200: #e8bde2;
  --color-velvet-horizon-300: #d5a1ce;
  --color-velvet-horizon-400: #b685b0;
  --color-velvet-horizon-500: #9c6b96;
  --color-velvet-horizon-600: #82547c;
  --color-velvet-horizon-700: #6a4165;
  --color-velvet-horizon-800: #563252;
  --color-velvet-horizon-900: #452642;
  --color-velvet-horizon-950: #2c162a;
  --color-drama-queen: #9a739a;
  --color-drama-queen-50: #ffeeff;
  --color-drama-queen-100: #fbe0fb;
  --color-drama-queen-200: #eac9e9;
  --color-drama-queen-300: #d5b0d4;
  --color-drama-queen-400: #b68fb6;
  --color-drama-queen-500: #9a739a;
  --color-drama-queen-600: #7f5a7f;
  --color-drama-queen-700: #674567;
  --color-drama-queen-800: #523552;
  --color-drama-queen-900: #402840;
  --color-drama-queen-950: #291729;
  --color-strawberry-bonbon: #fee9ff;
  --color-strawberry-bonbon-50: #fee9ff;
  --color-strawberry-bonbon-100: #f0e3f1;
  --color-strawberry-bonbon-200: #decfdf;
  --color-strawberry-bonbon-300: #cab8ca;
  --color-strawberry-bonbon-400: #ac99ad;
  --color-strawberry-bonbon-500: #917e92;
  --color-strawberry-bonbon-600: #776578;
  --color-strawberry-bonbon-700: #5f4f60;
  --color-strawberry-bonbon-800: #4b3d4c;
  --color-strawberry-bonbon-900: #3a2e3b;
  --color-strawberry-bonbon-950: #241c25;
  --color-purple-void: #401d43;
  --color-purple-void-50: #fef0ff;
  --color-purple-void-100: #fce1fe;
  --color-purple-void-200: #eccbee;
  --color-purple-void-300: #d8b3da;
  --color-purple-void-400: #b990bb;
  --color-purple-void-500: #9c749f;
  --color-purple-void-600: #7f5982;
  --color-purple-void-700: #654367;
  --color-purple-void-800: #4e3150;
  --color-purple-void-900: #401d43;
  --color-purple-void-950: #241426;
  --color-neon-violet: #6e4475;
  --color-neon-violet-50: #fdf0ff;
  --color-neon-violet-100: #fbe1ff;
  --color-neon-violet-200: #edcaf3;
  --color-neon-violet-300: #dab1e0;
  --color-neon-violet-400: #bc90c3;
  --color-neon-violet-500: #a174a8;
  --color-neon-violet-600: #855b8c;
  --color-neon-violet-700: #6e4475;
  --color-neon-violet-800: #56345c;
  --color-neon-violet-900: #442748;
  --color-neon-violet-950: #2b162f;
}