Void to Pink Horror Color Palette

About this palette

Void to Pink Horror is a 5-color dark, cool, gradient palette: #000F23 (Void), #310433 (Dark Purple), #39215C (Stormy Night), #2E4183 (Evening Magic), #873064 (Pink Horror). It mixes black, purple, blue, red tones and feels cool overall. The strongest text pairing is #000F23 on #873064 with a contrast ratio of 2.41:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Void	rgb(0, 15, 35)	hsl(214, 100%, 7%)
Dark Purple	rgb(49, 4, 51)	hsl(297, 85%, 11%)
Stormy Night	rgb(57, 33, 92)	hsl(264, 47%, 25%)
Evening Magic	rgb(46, 65, 131)	hsl(227, 48%, 35%)
Pink Horror	rgb(135, 48, 100)	hsl(324, 48%, 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.

Color blindness preview

CSS variables

/* Void to Pink Horror — https://swatchly.xyz/palette/000f23-310433-39215c-2e4183-873064 */
:root {
  --void: #000f23;
  --dark-purple: #310433;
  --stormy-night: #39215c;
  --evening-magic: #2e4183;
  --pink-horror: #873064;
}

Tailwind CSS v4

/* Void to Pink Horror — https://swatchly.xyz/palette/000f23-310433-39215c-2e4183-873064 */
@theme {
  --color-void: #000f23;
  --color-void-50: #eef6ff;
  --color-void-100: #ddedff;
  --color-void-200: #c7daef;
  --color-void-300: #aec3dc;
  --color-void-400: #8ca4bf;
  --color-void-500: #6d85a0;
  --color-void-600: #516780;
  --color-void-700: #3a4d63;
  --color-void-800: #273749;
  --color-void-900: #192532;
  --color-void-950: #000f23;
  --color-dark-purple: #310433;
  --color-dark-purple-50: #ffefff;
  --color-dark-purple-100: #ffdfff;
  --color-dark-purple-200: #f1c8f1;
  --color-dark-purple-300: #ddafdd;
  --color-dark-purple-400: #c08dc0;
  --color-dark-purple-500: #a471a4;
  --color-dark-purple-600: #875687;
  --color-dark-purple-700: #6c416d;
  --color-dark-purple-800: #553056;
  --color-dark-purple-900: #422242;
  --color-dark-purple-950: #310433;
  --color-stormy-night: #39215c;
  --color-stormy-night-50: #f6f3ff;
  --color-stormy-night-100: #eee7ff;
  --color-stormy-night-200: #ddceff;
  --color-stormy-night-300: #c8b5f2;
  --color-stormy-night-400: #a993d6;
  --color-stormy-night-500: #8e77ba;
  --color-stormy-night-600: #735d9c;
  --color-stormy-night-700: #5b4780;
  --color-stormy-night-800: #473567;
  --color-stormy-night-900: #39215c;
  --color-stormy-night-950: #221734;
  --color-evening-magic: #2e4183;
  --color-evening-magic-50: #f1f5ff;
  --color-evening-magic-100: #e3ebff;
  --color-evening-magic-200: #c7d7ff;
  --color-evening-magic-300: #a9c0ff;
  --color-evening-magic-400: #87a0e7;
  --color-evening-magic-500: #6c85cd;
  --color-evening-magic-600: #546bb0;
  --color-evening-magic-700: #415594;
  --color-evening-magic-800: #2e4183;
  --color-evening-magic-900: #243363;
  --color-evening-magic-950: #151f42;
  --color-pink-horror: #873064;
  --color-pink-horror-50: #fff1f7;
  --color-pink-horror-100: #ffe2f0;
  --color-pink-horror-200: #ffc3e2;
  --color-pink-horror-300: #f7a3cf;
  --color-pink-horror-400: #db7fb1;
  --color-pink-horror-500: #be6296;
  --color-pink-horror-600: #a0487b;
  --color-pink-horror-700: #873064;
  --color-pink-horror-800: #6b244e;
  --color-pink-horror-900: #54193d;
  --color-pink-horror-950: #370c26;
}