Over the Moon

#abb8d5

Moonlit periwinkle lavender for calm, airy contrasts

Save
Share

About Over the Moon

I keep spotting Over the Moon on the edge of a morning sky through office blinds, that washed-in purplish-blue that never quite turns pink or lavender. Compared to , it's a touch more saturated and less crisp, so it feels more present than that cool, slightly desaturated periwinkle. Next to , it's deeper and more grounded, not as bright, with less "sky wash" energy. And unlike , it holds its calm without leaning as warm or arguable.

For me it's the one you reach for when you want a background that still reads as color, not near-white. It works in wellness onboarding panels and skincare product layouts where the design needs softness, but labels and cards still have to feel anchored. I also like it for feature callouts and chart surfaces in SaaS, especially where you want separation without visual shouting.

Pair it with creamier off-whites and gentle lilacs. Against icy grays it can look a little heavy, like the light is fading.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
1.99:1Fail

On Gray 100 #f5f5f5

Aa
1.83:1Fail

On Gray 900 #18181b

Aa
8.90:1AAA

On Black #000000

Aa
10.55:1AAA

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Over the Moon

Open the generator with this color pre-loaded.

Start creating