Start generating

Nightly Voyager to Snowy Mint color palette

3B1037Nightly Voyager5B2555Purple Velour006F75Pine Scented LagoonDB8273Island CoralFAA3A0Her MajestyD4F8D6Snowy Mint
Open in generator Export PNG, PDF, ASE…

About this palette

Nightly Voyager to Snowy Mint is a 6-color warm, vintage palette: #3B1037 (Nightly Voyager), #5B2555 (Purple Velour), #006F75 (Pine Scented Lagoon), #DB8273 (Island Coral), #FAA3A0 (Her Majesty), #D4F8D6 (Snowy Mint). It mixes purple, turquoise, red, pink, white tones and feels warm overall. The strongest text pairing is #3B1037 on #D4F8D6 with a contrast ratio of 13.84:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nightly Voyagerrgb(59, 16, 55)hsl(306, 57%, 15%)
Purple Velourrgb(91, 37, 85)hsl(307, 42%, 25%)
Pine Scented Lagoonrgb(0, 111, 117)hsl(183, 100%, 23%)
Island Coralrgb(219, 130, 115)hsl(9, 59%, 65%)
Her Majestyrgb(250, 163, 160)hsl(2, 90%, 80%)
Snowy Mintrgb(212, 248, 214)hsl(123, 72%, 90%)

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.84:1 Super#3B1037 on #D4F8D6
  • Aa13.84:1 Super#D4F8D6 on #3B1037
  • Aa9.89:1 Very good#5B2555 on #D4F8D6
  • Aa9.89:1 Very good#D4F8D6 on #5B2555
  • Aa8.22:1 Very good#3B1037 on #FAA3A0
  • Aa8.22:1 Very good#FAA3A0 on #3B1037
  • Aa5.87:1 Good#5B2555 on #FAA3A0
  • Aa5.87:1 Good#FAA3A0 on #5B2555

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nightly Voyager to Snowy Mint — https://swatchly.xyz/palette/3b1037-5b2555-006f75-db8273-faa3a0-d4f8d6 */
:root {
  --nightly-voyager: #3b1037;
  --purple-velour: #5b2555;
  --pine-scented-lagoon: #006f75;
  --island-coral: #db8273;
  --her-majesty: #faa3a0;
  --snowy-mint: #d4f8d6;
}

Tailwind CSS v4

/* Nightly Voyager to Snowy Mint — https://swatchly.xyz/palette/3b1037-5b2555-006f75-db8273-faa3a0-d4f8d6 */
@theme {
  --color-nightly-voyager: #3b1037;
  --color-nightly-voyager-50: #fff0fc;
  --color-nightly-voyager-100: #ffe0fa;
  --color-nightly-voyager-200: #f2c9eb;
  --color-nightly-voyager-300: #deb0d7;
  --color-nightly-voyager-400: #c18eb9;
  --color-nightly-voyager-500: #a6749f;
  --color-nightly-voyager-600: #8b5b84;
  --color-nightly-voyager-700: #73476d;
  --color-nightly-voyager-800: #5d3658;
  --color-nightly-voyager-900: #4b2a47;
  --color-nightly-voyager-950: #3b1037;
  --color-purple-velour: #5b2555;
  --color-purple-velour-50: #fff0fc;
  --color-purple-velour-100: #ffe0fa;
  --color-purple-velour-200: #f6c6ee;
  --color-purple-velour-300: #e2abda;
  --color-purple-velour-400: #c488bb;
  --color-purple-velour-500: #a76b9f;
  --color-purple-velour-600: #895182;
  --color-purple-velour-700: #6e3c68;
  --color-purple-velour-800: #5b2555;
  --color-purple-velour-900: #431f3f;
  --color-purple-velour-950: #2b1128;
  --color-pine-scented-lagoon: #006f75;
  --color-pine-scented-lagoon-50: #dbfdff;
  --color-pine-scented-lagoon-100: #c0f4f8;
  --color-pine-scented-lagoon-200: #a1e1e5;
  --color-pine-scented-lagoon-300: #80cacf;
  --color-pine-scented-lagoon-400: #55a9af;
  --color-pine-scented-lagoon-500: #328c92;
  --color-pine-scented-lagoon-600: #006f75;
  --color-pine-scented-lagoon-700: #00585d;
  --color-pine-scented-lagoon-800: #004549;
  --color-pine-scented-lagoon-900: #003639;
  --color-pine-scented-lagoon-950: #002224;
  --color-island-coral: #db8273;
  --color-island-coral-50: #fff0ed;
  --color-island-coral-100: #ffe2dc;
  --color-island-coral-200: #ffc5ba;
  --color-island-coral-300: #f6a698;
  --color-island-coral-400: #db8273;
  --color-island-coral-500: #bd6759;
  --color-island-coral-600: #9f4e41;
  --color-island-coral-700: #833a2f;
  --color-island-coral-800: #6b2a21;
  --color-island-coral-900: #551e17;
  --color-island-coral-950: #38110b;
  --color-her-majesty: #faa3a0;
  --color-her-majesty-50: #ffefee;
  --color-her-majesty-100: #ffe1df;
  --color-her-majesty-200: #ffc4c1;
  --color-her-majesty-300: #faa3a0;
  --color-her-majesty-400: #d78583;
  --color-her-majesty-500: #bb6a68;
  --color-her-majesty-600: #9d5050;
  --color-her-majesty-700: #813c3c;
  --color-her-majesty-800: #692c2d;
  --color-her-majesty-900: #532021;
  --color-her-majesty-950: #371212;
  --color-snowy-mint: #d4f8d6;
  --color-snowy-mint-50: #e9fdea;
  --color-snowy-mint-100: #d4f8d6;
  --color-snowy-mint-200: #c7e1c8;
  --color-snowy-mint-300: #aecbaf;
  --color-snowy-mint-400: #8cac8e;
  --color-snowy-mint-500: #709172;
  --color-snowy-mint-600: #567558;
  --color-snowy-mint-700: #415e43;
  --color-snowy-mint-800: #314a33;
  --color-snowy-mint-900: #243926;
  --color-snowy-mint-950: #142416;
}

Similar palettes