Viking Diva to Mintastic Color Palette

About this palette

Viking Diva to Mintastic is a 5-color pastel, light, cool palette: #C8B6DD (Viking Diva), #B1DFF3 (Polar Wind), #C3DEB5 (Ambrosia), #FFD4F9 (Kissed by Mist), #AAF9DA (Mintastic). It mixes purple, blue, green, pink, turquoise tones and feels cool overall. The strongest text pairing is #C8B6DD on #AAF9DA with a contrast ratio of 1.54:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Viking Diva	rgb(200, 182, 221)	hsl(268, 36%, 79%)
Polar Wind	rgb(177, 223, 243)	hsl(198, 73%, 82%)
Ambrosia	rgb(195, 222, 181)	hsl(100, 38%, 79%)
Kissed by Mist	rgb(255, 212, 249)	hsl(308, 100%, 92%)
Mintastic	rgb(170, 249, 218)	hsl(156, 87%, 82%)

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

/* Viking Diva to Mintastic — https://swatchly.xyz/palette/c8b6dd-b1dff3-c3deb5-ffd4f9-aaf9da */
:root {
  --viking-diva: #c8b6dd;
  --polar-wind: #b1dff3;
  --ambrosia: #c3deb5;
  --kissed-by-mist: #ffd4f9;
  --mintastic: #aaf9da;
}

Tailwind CSS v4

/* Viking Diva to Mintastic — https://swatchly.xyz/palette/c8b6dd-b1dff3-c3deb5-ffd4f9-aaf9da */
@theme {
  --color-viking-diva: #c8b6dd;
  --color-viking-diva-50: #f7f1ff;
  --color-viking-diva-100: #f0e4fe;
  --color-viking-diva-200: #ddcfed;
  --color-viking-diva-300: #c8b6dd;
  --color-viking-diva-400: #a898bc;
  --color-viking-diva-500: #8d7ca1;
  --color-viking-diva-600: #736385;
  --color-viking-diva-700: #5c4d6c;
  --color-viking-diva-800: #483b57;
  --color-viking-diva-900: #382d44;
  --color-viking-diva-950: #231b2c;
  --color-polar-wind: #b1dff3;
  --color-polar-wind-50: #e8f8ff;
  --color-polar-wind-100: #d4f0fc;
  --color-polar-wind-200: #b1dff3;
  --color-polar-wind-300: #a1c7d8;
  --color-polar-wind-400: #7ea8bb;
  --color-polar-wind-500: #628da0;
  --color-polar-wind-600: #487284;
  --color-polar-wind-700: #345b6b;
  --color-polar-wind-800: #254755;
  --color-polar-wind-900: #1a3743;
  --color-polar-wind-950: #0d222b;
  --color-ambrosia: #c3deb5;
  --color-ambrosia-50: #e9f9e1;
  --color-ambrosia-100: #ddefd4;
  --color-ambrosia-200: #c3deb5;
  --color-ambrosia-300: #b0c7a4;
  --color-ambrosia-400: #90a883;
  --color-ambrosia-500: #758d67;
  --color-ambrosia-600: #5c734f;
  --color-ambrosia-700: #475c3b;
  --color-ambrosia-800: #36492c;
  --color-ambrosia-900: #293820;
  --color-ambrosia-950: #182312;
  --color-kissed-by-mist: #ffd4f9;
  --color-kissed-by-mist-50: #ffe6fb;
  --color-kissed-by-mist-100: #ffd4f9;
  --color-kissed-by-mist-200: #e6c5e2;
  --color-kissed-by-mist-300: #d3afce;
  --color-kissed-by-mist-400: #b690b1;
  --color-kissed-by-mist-500: #9c7597;
  --color-kissed-by-mist-600: #815d7d;
  --color-kissed-by-mist-700: #694865;
  --color-kissed-by-mist-800: #543750;
  --color-kissed-by-mist-900: #42293f;
  --color-kissed-by-mist-950: #2a1828;
  --color-mintastic: #aaf9da;
  --color-mintastic-50: #d0fcea;
  --color-mintastic-100: #aaf9da;
  --color-mintastic-200: #a7e2ca;
  --color-mintastic-300: #8bceb4;
  --color-mintastic-400: #66b094;
  --color-mintastic-500: #48967a;
  --color-mintastic-600: #2d7b61;
  --color-mintastic-700: #17644c;
  --color-mintastic-800: #064f3b;
  --color-mintastic-900: #003d2c;
  --color-mintastic-950: #00261b;
}