Moon Glow to Over the Sky Color Palette

About this palette

Moon Glow to Over the Sky is a 4-color pastel, light, cool palette: #F7F4CE (Moon Glow), #B3CDA7 (Limestoned), #E0D1F3 (Bubblegum Crisis), #90D6F4 (Over the Sky). It mixes white, green, purple, blue tones and feels cool overall. The strongest text pairing is #F7F4CE on #B3CDA7 with a contrast ratio of 1.54:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moon Glow	rgb(247, 244, 206)	hsl(56, 72%, 89%)
Limestoned	rgb(179, 205, 167)	hsl(101, 28%, 73%)
Bubblegum Crisis	rgb(224, 209, 243)	hsl(266, 59%, 89%)
Over the Sky	rgb(144, 214, 244)	hsl(198, 82%, 76%)

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

/* Moon Glow to Over the Sky — https://swatchly.xyz/palette/f7f4ce-b3cda7-e0d1f3-90d6f4 */
:root {
  --moon-glow: #f7f4ce;
  --limestoned: #b3cda7;
  --bubblegum-crisis: #e0d1f3;
  --over-the-sky: #90d6f4;
}

Tailwind CSS v4

/* Moon Glow to Over the Sky — https://swatchly.xyz/palette/f7f4ce-b3cda7-e0d1f3-90d6f4 */
@theme {
  --color-moon-glow: #f7f4ce;
  --color-moon-glow-50: #f7f4ce;
  --color-moon-glow-100: #ecead2;
  --color-moon-glow-200: #d9d7bb;
  --color-moon-glow-300: #c4c1a2;
  --color-moon-glow-400: #a5a280;
  --color-moon-glow-500: #8a8765;
  --color-moon-glow-600: #706d4c;
  --color-moon-glow-700: #595738;
  --color-moon-glow-800: #464429;
  --color-moon-glow-900: #36341d;
  --color-moon-glow-950: #212010;
  --color-limestoned: #b3cda7;
  --color-limestoned-50: #edfce7;
  --color-limestoned-100: #e3f3db;
  --color-limestoned-200: #cee1c5;
  --color-limestoned-300: #b3cda7;
  --color-limestoned-400: #94ac89;
  --color-limestoned-500: #78906d;
  --color-limestoned-600: #5e7553;
  --color-limestoned-700: #485d3e;
  --color-limestoned-800: #37492e;
  --color-limestoned-900: #293821;
  --color-limestoned-950: #182313;
  --color-bubblegum-crisis: #e0d1f3;
  --color-bubblegum-crisis-50: #f8f3ff;
  --color-bubblegum-crisis-100: #f1e7fd;
  --color-bubblegum-crisis-200: #e0d1f3;
  --color-bubblegum-crisis-300: #c8bbd8;
  --color-bubblegum-crisis-400: #a99bba;
  --color-bubblegum-crisis-500: #8d809f;
  --color-bubblegum-crisis-600: #736583;
  --color-bubblegum-crisis-700: #5b4f6a;
  --color-bubblegum-crisis-800: #473d54;
  --color-bubblegum-crisis-900: #372e42;
  --color-bubblegum-crisis-950: #221c2a;
  --color-over-the-sky: #90d6f4;
  --color-over-the-sky-50: #f4fcff;
  --color-over-the-sky-100: #e1f6ff;
  --color-over-the-sky-200: #b9e8fd;
  --color-over-the-sky-300: #90d6f4;
  --color-over-the-sky-400: #73b4cf;
  --color-over-the-sky-500: #5296b2;
  --color-over-the-sky-600: #347a95;
  --color-over-the-sky-700: #1d6079;
  --color-over-the-sky-800: #0c4b60;
  --color-over-the-sky-900: #02394b;
  --color-over-the-sky-950: #002330;
}