Nightly Voyager to Haunted Candelabra color palette

351C35Nightly Voyager 00B69BBilliard B5FCE5Blister Pearl A45D53Cheek Red F5A1A7Her Majesty 5C3E67Haunted Candelabra

Open in generator Export PNG, PDF, ASE…

About this palette

Nightly Voyager to Haunted Candelabra is a 6-color cool palette: #351C35 (Nightly Voyager), #00B69B (Billiard), #B5FCE5 (Blister Pearl), #A45D53 (Cheek Red), #F5A1A7 (Her Majesty), #5C3E67 (Haunted Candelabra). It mixes purple, turquoise, red, pink tones and feels cool overall. The strongest text pairing is #351C35 on #B5FCE5 with a contrast ratio of 13.16:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightly Voyager	rgb(53, 28, 53)	hsl(300, 31%, 16%)
Billiard	rgb(0, 182, 155)	hsl(171, 100%, 36%)
Blister Pearl	rgb(181, 252, 229)	hsl(161, 92%, 85%)
Cheek Red	rgb(164, 93, 83)	hsl(7, 33%, 48%)
Her Majesty	rgb(245, 161, 167)	hsl(356, 81%, 80%)
Haunted Candelabra	rgb(92, 62, 103)	hsl(284, 25%, 32%)

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.

Aa13.16:1 Super#351C35 on #B5FCE5
Aa13.16:1 Super#B5FCE5 on #351C35
Aa7.70:1 Very good#B5FCE5 on #5C3E67
Aa7.70:1 Very good#5C3E67 on #B5FCE5
Aa7.70:1 Very good#351C35 on #F5A1A7
Aa7.70:1 Very good#F5A1A7 on #351C35
Aa5.96:1 Good#351C35 on #00B69B
Aa5.96:1 Good#00B69B on #351C35

Color blindness preview

CSS variables

/* Nightly Voyager to Haunted Candelabra — https://swatchly.xyz/palette/351c35-00b69b-b5fce5-a45d53-f5a1a7-5c3e67 */
:root {
  --nightly-voyager: #351c35;
  --billiard: #00b69b;
  --blister-pearl: #b5fce5;
  --cheek-red: #a45d53;
  --her-majesty: #f5a1a7;
  --haunted-candelabra: #5c3e67;
}

Tailwind CSS v4

/* Nightly Voyager to Haunted Candelabra — https://swatchly.xyz/palette/351c35-00b69b-b5fce5-a45d53-f5a1a7-5c3e67 */
@theme {
  --color-nightly-voyager: #351c35;
  --color-nightly-voyager-50: #ffeffe;
  --color-nightly-voyager-100: #f8e3f8;
  --color-nightly-voyager-200: #e7cee6;
  --color-nightly-voyager-300: #d2b7d1;
  --color-nightly-voyager-400: #b496b3;
  --color-nightly-voyager-500: #9a7c9a;
  --color-nightly-voyager-600: #816480;
  --color-nightly-voyager-700: #6a4f69;
  --color-nightly-voyager-800: #563f56;
  --color-nightly-voyager-900: #463146;
  --color-nightly-voyager-950: #351c35;
  --color-billiard: #00b69b;
  --color-billiard-50: #d1fff3;
  --color-billiard-100: #acfbe7;
  --color-billiard-200: #89e9d3;
  --color-billiard-300: #60d4bb;
  --color-billiard-400: #00b69b;
  --color-billiard-500: #009881;
  --color-billiard-600: #007a68;
  --color-billiard-700: #006252;
  --color-billiard-800: #004d40;
  --color-billiard-900: #003c32;
  --color-billiard-950: #00261f;
  --color-blister-pearl: #b5fce5;
  --color-blister-pearl-50: #d9fff1;
  --color-blister-pearl-100: #b5fce5;
  --color-blister-pearl-200: #b1e4d3;
  --color-blister-pearl-300: #94cfbc;
  --color-blister-pearl-400: #6fb19c;
  --color-blister-pearl-500: #519581;
  --color-blister-pearl-600: #367a67;
  --color-blister-pearl-700: #216251;
  --color-blister-pearl-800: #124d3f;
  --color-blister-pearl-900: #083c30;
  --color-blister-pearl-950: #02261d;
  --color-cheek-red: #a45d53;
  --color-cheek-red-50: #fff2ef;
  --color-cheek-red-100: #ffe6e2;
  --color-cheek-red-200: #ffcdc5;
  --color-cheek-red-300: #f5b2a8;
  --color-cheek-red-400: #da9287;
  --color-cheek-red-500: #c0766c;
  --color-cheek-red-600: #a45d53;
  --color-cheek-red-700: #87463e;
  --color-cheek-red-800: #6d342d;
  --color-cheek-red-900: #562620;
  --color-cheek-red-950: #381511;
  --color-her-majesty: #f5a1a7;
  --color-her-majesty-50: #ffeeee;
  --color-her-majesty-100: #ffdee0;
  --color-her-majesty-200: #ffc0c4;
  --color-her-majesty-300: #f5a1a7;
  --color-her-majesty-400: #d2848a;
  --color-her-majesty-500: #b7696f;
  --color-her-majesty-600: #9a5057;
  --color-her-majesty-700: #7f3c43;
  --color-her-majesty-800: #672c33;
  --color-her-majesty-900: #522126;
  --color-her-majesty-950: #361216;
  --color-haunted-candelabra: #5c3e67;
  --color-haunted-candelabra-50: #fbf1ff;
  --color-haunted-candelabra-100: #f7e3ff;
  --color-haunted-candelabra-200: #e7cdf1;
  --color-haunted-candelabra-300: #d4b7df;
  --color-haunted-candelabra-400: #b797c4;
  --color-haunted-candelabra-500: #9e7daa;
  --color-haunted-candelabra-600: #846590;
  --color-haunted-candelabra-700: #6e5078;
  --color-haunted-candelabra-800: #5c3e67;
  --color-haunted-candelabra-900: #47304f;
  --color-haunted-candelabra-950: #2e1d34;
}