Freezy Breezy to Tropical Forest color palette

97EEEAFreezy Breezy C398A5Classy Mauve 9A8851Wasteland 585B7CMajestic Magic 004847Tropical Forest

About this palette

Freezy Breezy to Tropical Forest is a 5-color cool, vintage palette: #97EEEA (Freezy Breezy), #C398A5 (Classy Mauve), #9A8851 (Wasteland), #585B7C (Majestic Magic), #004847 (Tropical Forest). It mixes turquoise, pink, yellow, purple tones and feels cool overall. The strongest text pairing is #97EEEA on #004847 with a contrast ratio of 7.80:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Freezy Breezy	rgb(151, 238, 234)	hsl(177, 72%, 76%)
Classy Mauve	rgb(195, 152, 165)	hsl(342, 26%, 68%)
Wasteland	rgb(154, 136, 81)	hsl(45, 31%, 46%)
Majestic Magic	rgb(88, 91, 124)	hsl(235, 17%, 42%)
Tropical Forest	rgb(0, 72, 71)	hsl(179, 100%, 14%)

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.

Aa7.80:1 Very good#97EEEA on #004847
Aa7.80:1 Very good#004847 on #97EEEA
Aa4.91:1 Good#97EEEA on #585B7C
Aa4.91:1 Good#585B7C on #97EEEA
Aa4.14:1 Poor#C398A5 on #004847
Aa4.14:1 Poor#004847 on #C398A5

Color blindness preview

CSS variables

/* Freezy Breezy to Tropical Forest — https://swatchly.xyz/palette/97eeea-c398a5-9a8851-585b7c-004847 */
:root {
  --freezy-breezy: #97eeea;
  --classy-mauve: #c398a5;
  --wasteland: #9a8851;
  --majestic-magic: #585b7c;
  --tropical-forest: #004847;
}

Tailwind CSS v4

/* Freezy Breezy to Tropical Forest — https://swatchly.xyz/palette/97eeea-c398a5-9a8851-585b7c-004847 */
@theme {
  --color-freezy-breezy: #97eeea;
  --color-freezy-breezy-50: #e2fffd;
  --color-freezy-breezy-100: #c9faf7;
  --color-freezy-breezy-200: #97eeea;
  --color-freezy-breezy-300: #8dd3d0;
  --color-freezy-breezy-400: #63b4b1;
  --color-freezy-breezy-500: #409895;
  --color-freezy-breezy-600: #1f7c79;
  --color-freezy-breezy-700: #006361;
  --color-freezy-breezy-800: #004d4b;
  --color-freezy-breezy-900: #003b3a;
  --color-freezy-breezy-950: #002524;
  --color-classy-mauve: #c398a5;
  --color-classy-mauve-50: #fff3f6;
  --color-classy-mauve-100: #ffe6ed;
  --color-classy-mauve-200: #f1d0da;
  --color-classy-mauve-300: #deb9c4;
  --color-classy-mauve-400: #c398a5;
  --color-classy-mauve-500: #a57c89;
  --color-classy-mauve-600: #89626e;
  --color-classy-mauve-700: #6f4b57;
  --color-classy-mauve-800: #583943;
  --color-classy-mauve-900: #442b33;
  --color-classy-mauve-950: #2b191f;
  --color-wasteland: #9a8851;
  --color-wasteland-50: #fff6d9;
  --color-wasteland-100: #f8ecc9;
  --color-wasteland-200: #e6d9af;
  --color-wasteland-300: #d2c293;
  --color-wasteland-400: #b5a36e;
  --color-wasteland-500: #9a8851;
  --color-wasteland-600: #7e6d37;
  --color-wasteland-700: #665623;
  --color-wasteland-800: #504215;
  --color-wasteland-900: #3e320b;
  --color-wasteland-950: #271f03;
  --color-majestic-magic: #585b7c;
  --color-majestic-magic-50: #f3f4ff;
  --color-majestic-magic-100: #e7eaff;
  --color-majestic-magic-200: #d4d7f3;
  --color-majestic-magic-300: #bec2e1;
  --color-majestic-magic-400: #a0a4c6;
  --color-majestic-magic-500: #8689ad;
  --color-majestic-magic-600: #6d7092;
  --color-majestic-magic-700: #585b7c;
  --color-majestic-magic-800: #444762;
  --color-majestic-magic-900: #34364e;
  --color-majestic-magic-950: #202132;
  --color-tropical-forest: #004847;
  --color-tropical-forest-50: #dcfdfb;
  --color-tropical-forest-100: #cff4f2;
  --color-tropical-forest-200: #b5e2e0;
  --color-tropical-forest-300: #98cbc9;
  --color-tropical-forest-400: #73acaa;
  --color-tropical-forest-500: #54908e;
  --color-tropical-forest-600: #3a7472;
  --color-tropical-forest-700: #265b5a;
  --color-tropical-forest-800: #004847;
  --color-tropical-forest-900: #0d3635;
  --color-tropical-forest-950: #052221;
}