Nightly Voyager to Stone Age Queen color palette

311433Nightly Voyager 8DC189Exhilarating Green FFDCCEGlazed Sugar 0085A2Ahoy! Blue 7B4129Stone Age Queen

Open in generator Export PNG, PDF, ASE…

About this palette

Nightly Voyager to Stone Age Queen is a 5-color cool, earthy, vintage palette: #311433 (Nightly Voyager), #8DC189 (Exhilarating Green), #FFDCCE (Glazed Sugar), #0085A2 (Ahoy! Blue), #7B4129 (Stone Age Queen). It mixes purple, green, orange, blue, brown tones and feels cool overall. The strongest text pairing is #311433 on #FFDCCE with a contrast ratio of 12.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightly Voyager	rgb(49, 20, 51)	hsl(296, 44%, 14%)
Exhilarating Green	rgb(141, 193, 137)	hsl(116, 31%, 65%)
Glazed Sugar	rgb(255, 220, 206)	hsl(17, 100%, 90%)
Ahoy! Blue	rgb(0, 133, 162)	hsl(191, 100%, 32%)
Stone Age Queen	rgb(123, 65, 41)	hsl(18, 50%, 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.

Aa12.81:1 Super#311433 on #FFDCCE
Aa12.81:1 Super#FFDCCE on #311433
Aa7.92:1 Very good#311433 on #8DC189
Aa7.92:1 Very good#8DC189 on #311433
Aa6.23:1 Good#FFDCCE on #7B4129
Aa6.23:1 Good#7B4129 on #FFDCCE
Aa3.85:1 Poor#8DC189 on #7B4129
Aa3.85:1 Poor#7B4129 on #8DC189

Color blindness preview

CSS variables

/* Nightly Voyager to Stone Age Queen — https://swatchly.xyz/palette/311433-8dc189-ffdcce-0085a2-7b4129 */
:root {
  --nightly-voyager: #311433;
  --exhilarating-green: #8dc189;
  --glazed-sugar: #ffdcce;
  --ahoy-blue: #0085a2;
  --stone-age-queen: #7b4129;
}

Tailwind CSS v4

/* Nightly Voyager to Stone Age Queen — https://swatchly.xyz/palette/311433-8dc189-ffdcce-0085a2-7b4129 */
@theme {
  --color-nightly-voyager: #311433;
  --color-nightly-voyager-50: #fff0ff;
  --color-nightly-voyager-100: #fae2fb;
  --color-nightly-voyager-200: #e9cdea;
  --color-nightly-voyager-300: #d5b5d6;
  --color-nightly-voyager-400: #b794b8;
  --color-nightly-voyager-500: #9c799d;
  --color-nightly-voyager-600: #815f82;
  --color-nightly-voyager-700: #684a6a;
  --color-nightly-voyager-800: #543955;
  --color-nightly-voyager-900: #422b43;
  --color-nightly-voyager-950: #311433;
  --color-exhilarating-green: #8dc189;
  --color-exhilarating-green-50: #f2fff1;
  --color-exhilarating-green-100: #dffddd;
  --color-exhilarating-green-200: #caeec7;
  --color-exhilarating-green-300: #b2dcae;
  --color-exhilarating-green-400: #8dc189;
  --color-exhilarating-green-500: #70a26c;
  --color-exhilarating-green-600: #52844f;
  --color-exhilarating-green-700: #3b6939;
  --color-exhilarating-green-800: #295227;
  --color-exhilarating-green-900: #1c3e1a;
  --color-exhilarating-green-950: #0e260c;
  --color-glazed-sugar: #ffdcce;
  --color-glazed-sugar-50: #ffebe3;
  --color-glazed-sugar-100: #ffdcce;
  --color-glazed-sugar-200: #e6ccc1;
  --color-glazed-sugar-300: #d3b5aa;
  --color-glazed-sugar-400: #b6978a;
  --color-glazed-sugar-500: #9c7c70;
  --color-glazed-sugar-600: #816357;
  --color-glazed-sugar-700: #694e43;
  --color-glazed-sugar-800: #533c33;
  --color-glazed-sugar-900: #412e26;
  --color-glazed-sugar-950: #2a1b16;
  --color-ahoy-blue: #0085a2;
  --color-ahoy-blue-50: #e7f9ff;
  --color-ahoy-blue-100: #d3f4ff;
  --color-ahoy-blue-200: #a4e8fe;
  --color-ahoy-blue-300: #85d5ee;
  --color-ahoy-blue-400: #5ab8d5;
  --color-ahoy-blue-500: #349fbc;
  --color-ahoy-blue-600: #0085a2;
  --color-ahoy-blue-700: #006a81;
  --color-ahoy-blue-800: #005265;
  --color-ahoy-blue-900: #003f4e;
  --color-ahoy-blue-950: #002732;
  --color-stone-age-queen: #7b4129;
  --color-stone-age-queen-50: #fff2ed;
  --color-stone-age-queen-100: #ffe5db;
  --color-stone-age-queen-200: #fecab5;
  --color-stone-age-queen-300: #ebb19a;
  --color-stone-age-queen-400: #ce8f76;
  --color-stone-age-queen-500: #b27359;
  --color-stone-age-queen-600: #945840;
  --color-stone-age-queen-700: #7b4129;
  --color-stone-age-queen-800: #60321f;
  --color-stone-age-queen-900: #4c2515;
  --color-stone-age-queen-950: #31150a;
}