Crystal

#a7d8de

Dusty light blue for restful, primary UI

Save
Share

About Crystal

Crystal sits somewhere between the restraint of and the saturation of , but it doesn't feel like a compromise. It's fractionally warmer and more saturated than , which means it reads with more intention without tipping into the teal territory stakes out. The blue is present enough to feel intentional on screen, but not so bright it demands attention.

This is the one I reach for in fintech dashboards, health apps, and design systems where you need a secondary surface that doesn't disappear. Card backgrounds, subtle hover states, breathing room behind form fields. It pairs solidly with dark slate or charcoal, and unlike 's delicate whisper, it doesn't ghost out next to mid-tone text. It won't shift warm depending on your monitor either.

The thing: it needs the right company. Pair it with darker type and it reads confident. Sit it next to something warm-gray and it holds its ground. It's the kind of color that works harder than it looks when you treat it like an anchor instead of a whisper.

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

On Gray 100 #f5f5f5

Aa
1.42:1Fail

On Gray 900 #18181b

Aa
11.41:1AAA

On Black #000000

Aa
13.52: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 Crystal

Open the generator with this color pre-loaded.

Start creating