Sail to the Sea to Minute Mauve Color Palette

About this palette

Sail to the Sea to Minute Mauve is a 5-color pastel, light, cool palette: #99C4E7 (Sail to the Sea), #B2DAC0 (Frosted Fir), #C6DCFF (Icy Plains), #F7EFC9 (Banana Split), #F0E5FF (Minute Mauve). It mixes blue, green, white, purple tones and feels cool overall. The strongest text pairing is #99C4E7 on #F7EFC9 with a contrast ratio of 1.59:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sail to the Sea	rgb(153, 196, 231)	hsl(207, 62%, 75%)
Frosted Fir	rgb(178, 218, 192)	hsl(141, 35%, 78%)
Icy Plains	rgb(198, 220, 255)	hsl(217, 100%, 89%)
Banana Split	rgb(247, 239, 201)	hsl(50, 74%, 88%)
Minute Mauve	rgb(240, 229, 255)	hsl(265, 100%, 95%)

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

/* Sail to the Sea to Minute Mauve — https://swatchly.xyz/palette/99c4e7-b2dac0-c6dcff-f7efc9-f0e5ff */
:root {
  --sail-to-the-sea: #99c4e7;
  --frosted-fir: #b2dac0;
  --icy-plains: #c6dcff;
  --banana-split: #f7efc9;
  --minute-mauve: #f0e5ff;
}

Tailwind CSS v4

/* Sail to the Sea to Minute Mauve — https://swatchly.xyz/palette/99c4e7-b2dac0-c6dcff-f7efc9-f0e5ff */
@theme {
  --color-sail-to-the-sea: #99c4e7;
  --color-sail-to-the-sea-50: #eaf5ff;
  --color-sail-to-the-sea-100: #d7edff;
  --color-sail-to-the-sea-200: #b9daf5;
  --color-sail-to-the-sea-300: #99c4e7;
  --color-sail-to-the-sea-400: #7ca5c5;
  --color-sail-to-the-sea-500: #608aaa;
  --color-sail-to-the-sea-600: #486f8e;
  --color-sail-to-the-sea-700: #345875;
  --color-sail-to-the-sea-800: #25455e;
  --color-sail-to-the-sea-900: #1a364a;
  --color-sail-to-the-sea-950: #0d2130;
  --color-frosted-fir: #b2dac0;
  --color-frosted-fir-50: #def6e6;
  --color-frosted-fir-100: #d1ebda;
  --color-frosted-fir-200: #b2dac0;
  --color-frosted-fir-300: #a1c4ad;
  --color-frosted-fir-400: #81a68e;
  --color-frosted-fir-500: #678c75;
  --color-frosted-fir-600: #4f735c;
  --color-frosted-fir-700: #3c5d48;
  --color-frosted-fir-800: #2d4a38;
  --color-frosted-fir-900: #21392a;
  --color-frosted-fir-950: #122419;
  --color-icy-plains: #c6dcff;
  --color-icy-plains-50: #f3f8ff;
  --color-icy-plains-100: #e4efff;
  --color-icy-plains-200: #c6dcff;
  --color-icy-plains-300: #b2c5e2;
  --color-icy-plains-400: #91a5c4;
  --color-icy-plains-500: #7589a9;
  --color-icy-plains-600: #5b6e8c;
  --color-icy-plains-700: #455672;
  --color-icy-plains-800: #34435b;
  --color-icy-plains-900: #273347;
  --color-icy-plains-950: #17202e;
  --color-banana-split: #f7efc9;
  --color-banana-split-50: #fcf8e4;
  --color-banana-split-100: #f7efc9;
  --color-banana-split-200: #e0dbc0;
  --color-banana-split-300: #cac3a5;
  --color-banana-split-400: #aba481;
  --color-banana-split-500: #8f8865;
  --color-banana-split-600: #746d4b;
  --color-banana-split-700: #5c5637;
  --color-banana-split-800: #484328;
  --color-banana-split-900: #38331c;
  --color-banana-split-950: #231f0f;
  --color-minute-mauve: #f0e5ff;
  --color-minute-mauve-50: #f7f2ff;
  --color-minute-mauve-100: #f0e5ff;
  --color-minute-mauve-200: #dbd3e6;
  --color-minute-mauve-300: #c5bcd1;
  --color-minute-mauve-400: #a69cb3;
  --color-minute-mauve-500: #8b8198;
  --color-minute-mauve-600: #70677d;
  --color-minute-mauve-700: #595165;
  --color-minute-mauve-800: #463e50;
  --color-minute-mauve-900: #362f3e;
  --color-minute-mauve-950: #211d27;
}