Menthol Kiss to Tropical Forest Color Palette

About this palette

Menthol Kiss to Tropical Forest is a 4-color cool, gradient palette: #98E1D6 (Menthol Kiss), #00B099 (Billiard), #007FA4 (Ahoy! Blue), #004646 (Tropical Forest). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #98E1D6 on #004646 with a contrast ratio of 7.17:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Menthol Kiss	rgb(152, 225, 214)	hsl(171, 55%, 74%)
Billiard	rgb(0, 176, 153)	hsl(172, 100%, 35%)
Ahoy! Blue	rgb(0, 127, 164)	hsl(194, 100%, 32%)
Tropical Forest	rgb(0, 70, 70)	hsl(180, 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.17:1 Very good#98E1D6 on #004646
Aa7.17:1 Very good#004646 on #98E1D6
Aa3.90:1 Poor#00B099 on #004646
Aa3.90:1 Poor#004646 on #00B099
Aa3.08:1 Poor#98E1D6 on #007FA4
Aa3.08:1 Poor#007FA4 on #98E1D6

Color blindness preview

CSS variables

/* Menthol Kiss to Tropical Forest — https://swatchly.xyz/palette/98e1d6-00b099-007fa4-004646 */
:root {
  --menthol-kiss: #98e1d6;
  --billiard: #00b099;
  --ahoy-blue: #007fa4;
  --tropical-forest: #004646;
}

Tailwind CSS v4

/* Menthol Kiss to Tropical Forest — https://swatchly.xyz/palette/98e1d6-00b099-007fa4-004646 */
@theme {
  --color-menthol-kiss: #98e1d6;
  --color-menthol-kiss-50: #d1fbf4;
  --color-menthol-kiss-100: #c2f1e9;
  --color-menthol-kiss-200: #98e1d6;
  --color-menthol-kiss-300: #8bc9c0;
  --color-menthol-kiss-400: #67aca2;
  --color-menthol-kiss-500: #499288;
  --color-menthol-kiss-600: #2f776e;
  --color-menthol-kiss-700: #1b6159;
  --color-menthol-kiss-800: #0c4d46;
  --color-menthol-kiss-900: #033c36;
  --color-menthol-kiss-950: #002622;
  --color-billiard: #00b099;
  --color-billiard-50: #c9fff2;
  --color-billiard-100: #aaf8e7;
  --color-billiard-200: #85e6d2;
  --color-billiard-300: #5cd0ba;
  --color-billiard-400: #00b099;
  --color-billiard-500: #00937f;
  --color-billiard-600: #007767;
  --color-billiard-700: #005f52;
  --color-billiard-800: #004b40;
  --color-billiard-900: #003b32;
  --color-billiard-950: #002620;
  --color-ahoy-blue: #007fa4;
  --color-ahoy-blue-50: #e9f8ff;
  --color-ahoy-blue-100: #d6f2ff;
  --color-ahoy-blue-200: #a9e5ff;
  --color-ahoy-blue-300: #83d1f3;
  --color-ahoy-blue-400: #58b4d9;
  --color-ahoy-blue-500: #3399bf;
  --color-ahoy-blue-600: #007fa4;
  --color-ahoy-blue-700: #006583;
  --color-ahoy-blue-800: #004f67;
  --color-ahoy-blue-900: #003c50;
  --color-ahoy-blue-950: #002633;
  --color-tropical-forest: #004646;
  --color-tropical-forest-50: #dcfdfc;
  --color-tropical-forest-100: #cff4f3;
  --color-tropical-forest-200: #b6e1e0;
  --color-tropical-forest-300: #99cbca;
  --color-tropical-forest-400: #73abaa;
  --color-tropical-forest-500: #548e8e;
  --color-tropical-forest-600: #3a7272;
  --color-tropical-forest-700: #265a59;
  --color-tropical-forest-800: #004646;
  --color-tropical-forest-900: #0e3535;
  --color-tropical-forest-950: #052020;
}