Tropical Freeze to Nightly Voyager color palette

9FDABATropical Freeze D281AFMoonlight Mauve 3B8167Emerald Whispers 6F3162Grape 37192ENightly Voyager

Open in generator Export PNG, PDF, ASE…

About this palette

Tropical Freeze to Nightly Voyager is a 5-color warm, vintage palette: #9FDABA (Tropical Freeze), #D281AF (Moonlight Mauve), #3B8167 (Emerald Whispers), #6F3162 (Grape), #37192E (Nightly Voyager). It mixes green, pink, turquoise, purple tones and feels warm overall. The strongest text pairing is #9FDABA on #37192E with a contrast ratio of 9.85:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Freeze	rgb(159, 218, 186)	hsl(147, 44%, 74%)
Moonlight Mauve	rgb(210, 129, 175)	hsl(326, 47%, 66%)
Emerald Whispers	rgb(59, 129, 103)	hsl(158, 37%, 37%)
Grape	rgb(111, 49, 98)	hsl(313, 39%, 31%)
Nightly Voyager	rgb(55, 25, 46)	hsl(318, 38%, 16%)

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.85:1 Very good#9FDABA on #37192E
Aa9.85:1 Very good#37192E on #9FDABA
Aa5.77:1 Good#9FDABA on #6F3162
Aa5.77:1 Good#6F3162 on #9FDABA
Aa5.59:1 Good#D281AF on #37192E
Aa5.59:1 Good#37192E on #D281AF
Aa3.37:1 Poor#3B8167 on #37192E
Aa3.37:1 Poor#37192E on #3B8167

Color blindness preview

CSS variables

/* Tropical Freeze to Nightly Voyager — https://swatchly.xyz/palette/9fdaba-d281af-3b8167-6f3162-37192e */
:root {
  --tropical-freeze: #9fdaba;
  --moonlight-mauve: #d281af;
  --emerald-whispers: #3b8167;
  --grape: #6f3162;
  --nightly-voyager: #37192e;
}

Tailwind CSS v4

/* Tropical Freeze to Nightly Voyager — https://swatchly.xyz/palette/9fdaba-d281af-3b8167-6f3162-37192e */
@theme {
  --color-tropical-freeze: #9fdaba;
  --color-tropical-freeze-50: #eefff5;
  --color-tropical-freeze-100: #dafbe8;
  --color-tropical-freeze-200: #c2ebd4;
  --color-tropical-freeze-300: #9fdaba;
  --color-tropical-freeze-400: #81b79a;
  --color-tropical-freeze-500: #629a7d;
  --color-tropical-freeze-600: #467e61;
  --color-tropical-freeze-700: #30644b;
  --color-tropical-freeze-800: #204e38;
  --color-tropical-freeze-900: #143b29;
  --color-tropical-freeze-950: #092518;
  --color-moonlight-mauve: #d281af;
  --color-moonlight-mauve-50: #ffeff7;
  --color-moonlight-mauve-100: #ffe0f0;
  --color-moonlight-mauve-200: #ffc0e2;
  --color-moonlight-mauve-300: #eea5cd;
  --color-moonlight-mauve-400: #d281af;
  --color-moonlight-mauve-500: #b56694;
  --color-moonlight-mauve-600: #974d79;
  --color-moonlight-mauve-700: #7c3961;
  --color-moonlight-mauve-800: #64294d;
  --color-moonlight-mauve-900: #4f1e3c;
  --color-moonlight-mauve-950: #341026;
  --color-emerald-whispers: #3b8167;
  --color-emerald-whispers-50: #dbffef;
  --color-emerald-whispers-100: #cdf8e5;
  --color-emerald-whispers-200: #b5e7d1;
  --color-emerald-whispers-300: #99d3ba;
  --color-emerald-whispers-400: #74b69b;
  --color-emerald-whispers-500: #569b80;
  --color-emerald-whispers-600: #3b8167;
  --color-emerald-whispers-700: #256850;
  --color-emerald-whispers-800: #15523d;
  --color-emerald-whispers-900: #093f2e;
  --color-emerald-whispers-950: #02281c;
  --color-grape: #6f3162;
  --color-grape-50: #fff0fb;
  --color-grape-100: #ffe1f6;
  --color-grape-200: #f9c2ea;
  --color-grape-300: #e5a6d5;
  --color-grape-400: #c682b5;
  --color-grape-500: #a86598;
  --color-grape-600: #884a7a;
  --color-grape-700: #6f3162;
  --color-grape-800: #56274c;
  --color-grape-900: #441c3b;
  --color-grape-950: #2b0f25;
  --color-nightly-voyager: #37192e;
  --color-nightly-voyager-50: #fff0f9;
  --color-nightly-voyager-100: #fce2f3;
  --color-nightly-voyager-200: #eccde1;
  --color-nightly-voyager-300: #d7b5cb;
  --color-nightly-voyager-400: #ba95ad;
  --color-nightly-voyager-500: #9f7a93;
  --color-nightly-voyager-600: #856179;
  --color-nightly-voyager-700: #6d4d62;
  --color-nightly-voyager-800: #593c4f;
  --color-nightly-voyager-900: #482f40;
  --color-nightly-voyager-950: #37192e;
}