Wintermint to Herbal Vapours Color Palette

About this palette

Wintermint to Herbal Vapours is a 4-color pastel, light, cool palette: #97D1B0 (Wintermint), #BFE2D0 (Jade Sea), #D1D3FF (Icy Plains), #DDFDCC (Herbal Vapours). It mixes green, purple tones and feels cool overall. The strongest text pairing is #97D1B0 on #DDFDCC with a contrast ratio of 1.57:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wintermint	rgb(151, 209, 176)	hsl(146, 39%, 71%)
Jade Sea	rgb(191, 226, 208)	hsl(149, 38%, 82%)
Icy Plains	rgb(209, 211, 255)	hsl(237, 100%, 91%)
Herbal Vapours	rgb(221, 253, 204)	hsl(99, 92%, 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.

Color blindness preview

CSS variables

/* Wintermint to Herbal Vapours — https://swatchly.xyz/palette/97d1b0-bfe2d0-d1d3ff-ddfdcc */
:root {
  --wintermint: #97d1b0;
  --jade-sea: #bfe2d0;
  --icy-plains: #d1d3ff;
  --herbal-vapours: #ddfdcc;
}

Tailwind CSS v4

/* Wintermint to Herbal Vapours — https://swatchly.xyz/palette/97d1b0-bfe2d0-d1d3ff-ddfdcc */
@theme {
  --color-wintermint: #97d1b0;
  --color-wintermint-50: #dfffec;
  --color-wintermint-100: #d2f6e0;
  --color-wintermint-200: #b9e4cb;
  --color-wintermint-300: #97d1b0;
  --color-wintermint-400: #7ab092;
  --color-wintermint-500: #5d9576;
  --color-wintermint-600: #43795c;
  --color-wintermint-700: #2f6147;
  --color-wintermint-800: #204d36;
  --color-wintermint-900: #153b28;
  --color-wintermint-950: #092518;
  --color-jade-sea: #bfe2d0;
  --color-jade-sea-50: #e8fbf1;
  --color-jade-sea-100: #dcf2e7;
  --color-jade-sea-200: #bfe2d0;
  --color-jade-sea-300: #adcabb;
  --color-jade-sea-400: #8bab9a;
  --color-jade-sea-500: #6f8f7f;
  --color-jade-sea-600: #557465;
  --color-jade-sea-700: #405d4f;
  --color-jade-sea-800: #30493d;
  --color-jade-sea-900: #23382e;
  --color-jade-sea-950: #14231c;
  --color-icy-plains: #d1d3ff;
  --color-icy-plains-50: #f3f4ff;
  --color-icy-plains-100: #e8e9ff;
  --color-icy-plains-200: #d1d3ff;
  --color-icy-plains-300: #bbbde2;
  --color-icy-plains-400: #9c9dc5;
  --color-icy-plains-500: #8082aa;
  --color-icy-plains-600: #67688e;
  --color-icy-plains-700: #515174;
  --color-icy-plains-800: #3e3f5d;
  --color-icy-plains-900: #303049;
  --color-icy-plains-950: #1d1d2f;
  --color-herbal-vapours: #ddfdcc;
  --color-herbal-vapours-50: #ddfdcc;
  --color-herbal-vapours-100: #dbf0d1;
  --color-herbal-vapours-200: #c6deba;
  --color-herbal-vapours-300: #aec9a0;
  --color-herbal-vapours-400: #8eaa7e;
  --color-herbal-vapours-500: #739063;
  --color-herbal-vapours-600: #5a754b;
  --color-herbal-vapours-700: #455e37;
  --color-herbal-vapours-800: #344a28;
  --color-herbal-vapours-900: #27391c;
  --color-herbal-vapours-950: #17240f;
}