Haunted Candelabra to Night Snow Color Palette

About this palette

Haunted Candelabra to Night Snow is a 5-color cool palette: #504271 (Haunted Candelabra), #C18ECD (Violaceous), #072448 (Dark Eclipse), #644EC5 (Purple Rain), #B9CFFF (Night Snow). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #072448 on #B9CFFF with a contrast ratio of 9.91:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haunted Candelabra	rgb(80, 66, 113)	hsl(258, 26%, 35%)
Violaceous	rgb(193, 142, 205)	hsl(289, 39%, 68%)
Dark Eclipse	rgb(7, 36, 72)	hsl(213, 82%, 15%)
Purple Rain	rgb(100, 78, 197)	hsl(251, 51%, 54%)
Night Snow	rgb(185, 207, 255)	hsl(221, 100%, 86%)

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.

Aa9.91:1 Very good#072448 on #B9CFFF
Aa9.91:1 Very good#B9CFFF on #072448
Aa5.92:1 Good#C18ECD on #072448
Aa5.92:1 Good#072448 on #C18ECD
Aa5.69:1 Good#504271 on #B9CFFF
Aa5.69:1 Good#B9CFFF on #504271
Aa3.91:1 Poor#644EC5 on #B9CFFF
Aa3.91:1 Poor#B9CFFF on #644EC5

Color blindness preview

CSS variables

/* Haunted Candelabra to Night Snow — https://swatchly.xyz/palette/504271-c18ecd-072448-644ec5-b9cfff */
:root {
  --haunted-candelabra: #504271;
  --violaceous: #c18ecd;
  --dark-eclipse: #072448;
  --purple-rain: #644ec5;
  --night-snow: #b9cfff;
}

Tailwind CSS v4

/* Haunted Candelabra to Night Snow — https://swatchly.xyz/palette/504271-c18ecd-072448-644ec5-b9cfff */
@theme {
  --color-haunted-candelabra: #504271;
  --color-haunted-candelabra-50: #f6f3ff;
  --color-haunted-candelabra-100: #ede7ff;
  --color-haunted-candelabra-200: #dbd0fa;
  --color-haunted-candelabra-300: #c6bbe9;
  --color-haunted-candelabra-400: #a99ccf;
  --color-haunted-candelabra-500: #9082b5;
  --color-haunted-candelabra-600: #77699b;
  --color-haunted-candelabra-700: #615482;
  --color-haunted-candelabra-800: #504271;
  --color-haunted-candelabra-900: #3d3357;
  --color-haunted-candelabra-950: #271f3a;
  --color-violaceous: #c18ecd;
  --color-violaceous-50: #fcf2ff;
  --color-violaceous-100: #fae4ff;
  --color-violaceous-200: #f0c9f9;
  --color-violaceous-300: #ddb1e7;
  --color-violaceous-400: #c18ecd;
  --color-violaceous-500: #a472b0;
  --color-violaceous-600: #875893;
  --color-violaceous-700: #6e4378;
  --color-violaceous-800: #573260;
  --color-violaceous-900: #44244c;
  --color-violaceous-950: #2b1531;
  --color-dark-eclipse: #072448;
  --color-dark-eclipse-50: #eff6ff;
  --color-dark-eclipse-100: #dfedff;
  --color-dark-eclipse-200: #c0dafd;
  --color-dark-eclipse-300: #a6c3eb;
  --color-dark-eclipse-400: #84a4cf;
  --color-dark-eclipse-500: #6989b5;
  --color-dark-eclipse-600: #517099;
  --color-dark-eclipse-700: #3d5a7f;
  --color-dark-eclipse-800: #2e4769;
  --color-dark-eclipse-900: #233855;
  --color-dark-eclipse-950: #072448;
  --color-purple-rain: #644ec5;
  --color-purple-rain-50: #f4f4ff;
  --color-purple-rain-100: #e8e8ff;
  --color-purple-rain-200: #d2d0ff;
  --color-purple-rain-300: #b9b4ff;
  --color-purple-rain-400: #998aff;
  --color-purple-rain-500: #7e6be5;
  --color-purple-rain-600: #644ec5;
  --color-purple-rain-700: #4f3aa3;
  --color-purple-rain-800: #3e2a86;
  --color-purple-rain-900: #301e6d;
  --color-purple-rain-950: #1d1049;
  --color-night-snow: #b9cfff;
  --color-night-snow-50: #e8f0ff;
  --color-night-snow-100: #d8e4ff;
  --color-night-snow-200: #b9cfff;
  --color-night-snow-300: #a7bae4;
  --color-night-snow-400: #889cc8;
  --color-night-snow-500: #6e82ae;
  --color-night-snow-600: #566992;
  --color-night-snow-700: #435379;
  --color-night-snow-800: #334163;
  --color-night-snow-900: #26324e;
  --color-night-snow-950: #161f33;
}