Crystal

#a7d8de

Save

About Crystal

Crystal sits somewhere between the restraint of Blizzard Blue and the saturation of Aqua Fiesta, but it doesn't feel like a compromise. It's fractionally warmer and more saturated than Clear Water, which means it reads with more intention without tipping into the teal territory Aqua Fiesta 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 Blizzard Blue'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

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

Create a gradient with Crystal

Open the generator with this color pre-loaded.

Start creating