Over the Sky to Sweetly Color Palette

About this palette

Over the Sky to Sweetly is a 4-color pastel, light palette: #96D8F8 (Over the Sky), #FCB5CB (Baby Pink), #D5ECCE (Snowy Mint), #FFE7EF (Sweetly). It mixes blue, pink, green, white tones and feels cool overall. The strongest text pairing is #FCB5CB on #FFE7EF with a contrast ratio of 1.42:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Over the Sky	rgb(150, 216, 248)	hsl(200, 87%, 78%)
Baby Pink	rgb(252, 181, 203)	hsl(341, 92%, 85%)
Snowy Mint	rgb(213, 236, 206)	hsl(106, 44%, 87%)
Sweetly	rgb(255, 231, 239)	hsl(340, 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

/* Over the Sky to Sweetly — https://swatchly.xyz/palette/96d8f8-fcb5cb-d5ecce-ffe7ef */
:root {
  --over-the-sky: #96d8f8;
  --baby-pink: #fcb5cb;
  --snowy-mint: #d5ecce;
  --sweetly: #ffe7ef;
}

Tailwind CSS v4

/* Over the Sky to Sweetly — https://swatchly.xyz/palette/96d8f8-fcb5cb-d5ecce-ffe7ef */
@theme {
  --color-over-the-sky: #96d8f8;
  --color-over-the-sky-50: #dbf3ff;
  --color-over-the-sky-100: #c0eaff;
  --color-over-the-sky-200: #96d8f8;
  --color-over-the-sky-300: #89c2de;
  --color-over-the-sky-400: #66a5c2;
  --color-over-the-sky-500: #4a8ba8;
  --color-over-the-sky-600: #31718d;
  --color-over-the-sky-700: #1e5b75;
  --color-over-the-sky-800: #11495f;
  --color-over-the-sky-900: #06384b;
  --color-over-the-sky-950: #022331;
  --color-baby-pink: #fcb5cb;
  --color-baby-pink-50: #ffe6ed;
  --color-baby-pink-100: #ffd5e1;
  --color-baby-pink-200: #fcb5cb;
  --color-baby-pink-300: #e2a3b7;
  --color-baby-pink-400: #c68499;
  --color-baby-pink-500: #ab6b80;
  --color-baby-pink-600: #905367;
  --color-baby-pink-700: #774053;
  --color-baby-pink-800: #613142;
  --color-baby-pink-900: #4c2432;
  --color-baby-pink-950: #32141f;
  --color-snowy-mint: #d5ecce;
  --color-snowy-mint-50: #e6f4e2;
  --color-snowy-mint-100: #d5ecce;
  --color-snowy-mint-200: #c6d8c1;
  --color-snowy-mint-300: #b0c3aa;
  --color-snowy-mint-400: #90a58a;
  --color-snowy-mint-500: #768b70;
  --color-snowy-mint-600: #5e7158;
  --color-snowy-mint-700: #495b44;
  --color-snowy-mint-800: #384833;
  --color-snowy-mint-900: #2a3726;
  --color-snowy-mint-950: #192216;
  --color-sweetly: #ffe7ef;
  --color-sweetly-50: #fff5f8;
  --color-sweetly-100: #ffe7ef;
  --color-sweetly-200: #e6d5da;
  --color-sweetly-300: #d0bdc3;
  --color-sweetly-400: #b29ca4;
  --color-sweetly-500: #968088;
  --color-sweetly-600: #7a666d;
  --color-sweetly-700: #624f56;
  --color-sweetly-800: #4d3d43;
  --color-sweetly-900: #3c2f33;
  --color-sweetly-950: #261c20;
}