Bleu Ciel

#007ba1

Light sky-blue for airy, high-contrast UI

Save
Share

About Bleu Ciel

Bleu Ciel sits in the middle ground where you can actually see it work. It's lighter and less saturated than Ahoy! , which means it doesn't need to shout to land. There's air around it instead of density. On screen it stays calm, doesn't drift into teal territory the way some lighter blues do, and it won't read clinical because there's just enough warmth underneath to keep it human.

Reach for this in healthcare platforms, SaaS dashboards, and fintech apps where your primary actions need to feel approachable but capable. Active states, secondary navigation, data highlights. It's got more presence than a sky but trades the punch of and for accessibility, works on lighter backgrounds without demanding perfect contrast, pairs cleanly with both white and mid-tone grays without strain.

The trade-off: it's the shade that works hardest to stay visible on busy layouts. Give it some breathing room and it performs. Bury it in a sea of mid-grays and it'll fade. Test it early against your actual backgrounds, especially if your display runs warm.

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
4.83:1AAAAA Large

On Gray 100 #f5f5f5

Aa
4.43:1FailAA Large

On Gray 900 #18181b

Aa
3.67:1FailAA Large

On Black #000000

Aa
4.35:1FailAA Large

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 Bleu Ciel

Open the generator with this color pre-loaded.

Start creating