Nightly Voyager to Cold Lips Color Palette

About this palette

Nightly Voyager to Cold Lips is a 5-color cool palette: #2E1B36 (Nightly Voyager), #7E4C71 (Grape Kiss), #D7D7F6 (Icy Plains), #9181A9 (Aster), #95A1E6 (Cold Lips). It mixes purple, pink tones and feels cool overall. The strongest text pairing is #2E1B36 on #D7D7F6 with a contrast ratio of 11.27:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightly Voyager	rgb(46, 27, 54)	hsl(282, 33%, 16%)
Grape Kiss	rgb(126, 76, 113)	hsl(316, 25%, 40%)
Icy Plains	rgb(215, 215, 246)	hsl(240, 63%, 90%)
Aster	rgb(145, 129, 169)	hsl(264, 19%, 58%)
Cold Lips	rgb(149, 161, 230)	hsl(231, 62%, 74%)

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.

Aa11.27:1 Very good#2E1B36 on #D7D7F6
Aa11.27:1 Very good#D7D7F6 on #2E1B36
Aa6.42:1 Good#2E1B36 on #95A1E6
Aa6.42:1 Good#95A1E6 on #2E1B36
Aa4.73:1 Good#7E4C71 on #D7D7F6
Aa4.73:1 Good#D7D7F6 on #7E4C71
Aa4.46:1 Poor#2E1B36 on #9181A9
Aa4.46:1 Poor#9181A9 on #2E1B36

Color blindness preview

CSS variables

/* Nightly Voyager to Cold Lips — https://swatchly.xyz/palette/2e1b36-7e4c71-d7d7f6-9181a9-95a1e6 */
:root {
  --nightly-voyager: #2e1b36;
  --grape-kiss: #7e4c71;
  --icy-plains: #d7d7f6;
  --aster: #9181a9;
  --cold-lips: #95a1e6;
}

Tailwind CSS v4

/* Nightly Voyager to Cold Lips — https://swatchly.xyz/palette/2e1b36-7e4c71-d7d7f6-9181a9-95a1e6 */
@theme {
  --color-nightly-voyager: #2e1b36;
  --color-nightly-voyager-50: #fbf1ff;
  --color-nightly-voyager-100: #f4e5fb;
  --color-nightly-voyager-200: #e2d0ea;
  --color-nightly-voyager-300: #cdb8d6;
  --color-nightly-voyager-400: #ae98b8;
  --color-nightly-voyager-500: #947d9e;
  --color-nightly-voyager-600: #7a6484;
  --color-nightly-voyager-700: #634f6c;
  --color-nightly-voyager-800: #503e57;
  --color-nightly-voyager-900: #3f3046;
  --color-nightly-voyager-950: #2e1b36;
  --color-grape-kiss: #7e4c71;
  --color-grape-kiss-50: #fff0fa;
  --color-grape-kiss-100: #ffe1f6;
  --color-grape-kiss-200: #f5cae9;
  --color-grape-kiss-300: #e4b4d6;
  --color-grape-kiss-400: #c994ba;
  --color-grape-kiss-500: #af7aa0;
  --color-grape-kiss-600: #956187;
  --color-grape-kiss-700: #7e4c71;
  --color-grape-kiss-800: #643a59;
  --color-grape-kiss-900: #4f2b46;
  --color-grape-kiss-950: #33192d;
  --color-icy-plains: #d7d7f6;
  --color-icy-plains-50: #f6f6ff;
  --color-icy-plains-100: #ebecff;
  --color-icy-plains-200: #d7d7f6;
  --color-icy-plains-300: #c0c0da;
  --color-icy-plains-400: #a0a0bc;
  --color-icy-plains-500: #8584a1;
  --color-icy-plains-600: #6a6a84;
  --color-icy-plains-700: #53536b;
  --color-icy-plains-800: #404055;
  --color-icy-plains-900: #313142;
  --color-icy-plains-950: #1e1e2a;
  --color-aster: #9181a9;
  --color-aster-50: #f8f3ff;
  --color-aster-100: #f1e8ff;
  --color-aster-200: #dfd3f3;
  --color-aster-300: #cabce0;
  --color-aster-400: #ac9cc3;
  --color-aster-500: #9181a9;
  --color-aster-600: #76668c;
  --color-aster-700: #5e5072;
  --color-aster-800: #493d5b;
  --color-aster-900: #392e47;
  --color-aster-950: #231b2e;
  --color-cold-lips: #95a1e6;
  --color-cold-lips-50: #f4f6ff;
  --color-cold-lips-100: #e9edff;
  --color-cold-lips-200: #d1d9ff;
  --color-cold-lips-300: #b6c1fc;
  --color-cold-lips-400: #95a1e6;
  --color-cold-lips-500: #7a84c7;
  --color-cold-lips-600: #5f69a9;
  --color-cold-lips-700: #4a528c;
  --color-cold-lips-800: #383e71;
  --color-cold-lips-900: #2a2f59;
  --color-cold-lips-950: #181c3a;
}