Start generating

Wintermint to Water color palette

97CFB3WintermintFCBCC4Love AffairB7E0E9Polar WindE6CEE9Sweet DreamsFFEBE7Pink SwirlD1F1FFWater
Open in generator Export PNG, PDF, ASE…

About this palette

Wintermint to Water is a 6-color pastel, light, cool palette: #97CFB3 (Wintermint), #FCBCC4 (Love Affair), #B7E0E9 (Polar Wind), #E6CEE9 (Sweet Dreams), #FFEBE7 (Pink Swirl), #D1F1FF (Water). It mixes green, pink, turquoise, white, blue tones and feels cool overall. The strongest text pairing is #97CFB3 on #FFEBE7 with a contrast ratio of 1.54:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Wintermintrgb(151, 207, 179)hsl(150, 37%, 70%)
Love Affairrgb(252, 188, 196)hsl(352, 91%, 86%)
Polar Windrgb(183, 224, 233)hsl(191, 53%, 82%)
Sweet Dreamsrgb(230, 206, 233)hsl(293, 38%, 86%)
Pink Swirlrgb(255, 235, 231)hsl(10, 100%, 95%)
Waterrgb(209, 241, 255)hsl(198, 100%, 91%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Wintermint to Water — https://swatchly.xyz/palette/97cfb3-fcbcc4-b7e0e9-e6cee9-ffebe7-d1f1ff */
:root {
  --wintermint: #97cfb3;
  --love-affair: #fcbcc4;
  --polar-wind: #b7e0e9;
  --sweet-dreams: #e6cee9;
  --pink-swirl: #ffebe7;
  --water: #d1f1ff;
}

    Tailwind CSS v4

    /* Wintermint to Water — https://swatchly.xyz/palette/97cfb3-fcbcc4-b7e0e9-e6cee9-ffebe7-d1f1ff */
@theme {
  --color-wintermint: #97cfb3;
  --color-wintermint-50: #dffeed;
  --color-wintermint-100: #d2f4e2;
  --color-wintermint-200: #b9e2cd;
  --color-wintermint-300: #97cfb3;
  --color-wintermint-400: #7aaf95;
  --color-wintermint-500: #5d9379;
  --color-wintermint-600: #447860;
  --color-wintermint-700: #30604a;
  --color-wintermint-800: #214c39;
  --color-wintermint-900: #163b2b;
  --color-wintermint-950: #0a251a;
  --color-love-affair: #fcbcc4;
  --color-love-affair-50: #ffeaec;
  --color-love-affair-100: #ffdade;
  --color-love-affair-200: #fcbcc4;
  --color-love-affair-300: #e1aab0;
  --color-love-affair-400: #c58a92;
  --color-love-affair-500: #aa7078;
  --color-love-affair-600: #8e575f;
  --color-love-affair-700: #75444b;
  --color-love-affair-800: #5f343a;
  --color-love-affair-900: #4b262c;
  --color-love-affair-950: #30161a;
  --color-polar-wind: #b7e0e9;
  --color-polar-wind-50: #e4faff;
  --color-polar-wind-100: #d7f1f6;
  --color-polar-wind-200: #b7e0e9;
  --color-polar-wind-300: #a6c8d0;
  --color-polar-wind-400: #83a9b1;
  --color-polar-wind-500: #678e96;
  --color-polar-wind-600: #4e737b;
  --color-polar-wind-700: #395c63;
  --color-polar-wind-800: #2a484e;
  --color-polar-wind-900: #1e373d;
  --color-polar-wind-950: #102226;
  --color-sweet-dreams: #e6cee9;
  --color-sweet-dreams-50: #fdf0ff;
  --color-sweet-dreams-100: #f4e5f6;
  --color-sweet-dreams-200: #e6cee9;
  --color-sweet-dreams-300: #cdb9d0;
  --color-sweet-dreams-400: #af99b1;
  --color-sweet-dreams-500: #937d96;
  --color-sweet-dreams-600: #78637b;
  --color-sweet-dreams-700: #614e63;
  --color-sweet-dreams-800: #4c3c4e;
  --color-sweet-dreams-900: #3b2d3d;
  --color-sweet-dreams-950: #251b26;
  --color-pink-swirl: #ffebe7;
  --color-pink-swirl-50: #fff7f6;
  --color-pink-swirl-100: #ffebe7;
  --color-pink-swirl-200: #e6d8d5;
  --color-pink-swirl-300: #d0c0bd;
  --color-pink-swirl-400: #b19f9c;
  --color-pink-swirl-500: #95837f;
  --color-pink-swirl-600: #796865;
  --color-pink-swirl-700: #60514e;
  --color-pink-swirl-800: #4c3f3c;
  --color-pink-swirl-900: #3b302e;
  --color-pink-swirl-950: #251d1c;
  --color-water: #d1f1ff;
  --color-water-50: #e8f8ff;
  --color-water-100: #d1f1ff;
  --color-water-200: #c5dce6;
  --color-water-300: #abc6d1;
  --color-water-400: #8aa7b3;
  --color-water-500: #6e8b98;
  --color-water-600: #55717d;
  --color-water-700: #405a65;
  --color-water-800: #304650;
  --color-water-900: #23363e;
  --color-water-950: #142227;
}

    Similar palettes