Clear Water

#aad5db

Lighter, calmer water-blue for subtle backgrounds and gutters

Save
Share

About Clear Water

Clear Water sits between whisper and presence. It's got enough blue in it to feel deliberate, but it won't compete with anything else on the screen, there's a softness here that neither 's restraint nor 's saturation can claim. The saturation is slightly warmer and more grounded than Blizzard, which means it reads less clinical. It's also noticeably less saturated than , so it won't steal focus when you need it to behave.

This is the one I reach for in product dashboards, fintech apps, and health interfaces where you're building secondary surfaces that have to anchor without shouting. Card backgrounds, subtle dividers, the breathing room behind form fields or onboarding steps. It pairs clean with dark slate or navy, stays true across different monitor temperatures, and won't ghost out next to mid-tone text the way paler blues sometimes do.

The trade-off: it needs decent contrast to hold its own. Throw it behind dark charcoal type and it reads solid. Pair it with something warm-gray and you've got presence. Treat it like the quiet anchor it is, and it works harder than it looks.

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.58:1Fail

On Gray 100 #f5f5f5

Aa
1.45:1Fail

On Gray 900 #18181b

Aa
11.18:1AAA

On Black #000000

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

#a7d8de
#add8e6
#b6d3df
#a5ced5
#aed7ea

Create a gradient with Clear Water

Open the generator with this color pre-loaded.

Start creating