Malibu

#66b7e1

Softer coastal blue for calm, airy UI

Save
Share

About Malibu

On a white canvas, Malibu reads like sunlight on sea glass: light, airy, but not thin. It has that friendly sky-bright lift, with a calmer saturation than and , so it feels more "open" than "defined." Compared to , it sits a touch less upper-register and more balanced, so you don't get that crisp, high-contrast pop.

I use Malibu as the one you reach for when you want a primary action or link that feels breathable. It shows up in dashboards and finance apps for secondary CTAs, notification accents, and lightweight data highlights, and it works well across SaaS UI where you need a color that stays pleasant over time. In product media like onboarding screens and explainer cards, it gives clarity without leaning as cyan-leaned as the busier blues nearby.

One quirk: on very cool display profiles it can lose some warmth and flatten slightly, so I like it paired with mid-tone grays or charcoal for headings and labels. If you need more punch, go richer and tighter like .

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
2.23:1Fail

On Gray 100 #f5f5f5

Aa
2.04:1Fail

On Gray 900 #18181b

Aa
7.95:1AAA

On Black #000000

Aa
9.43: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

#60bfd3
#7dabd8
#59b9cc
#68c2f5

Create a gradient with Malibu

Open the generator with this color pre-loaded.

Start creating