Astral

#376f89

Save

About Astral

Astral sits where blue stops being purely cool and picks up just enough teal to feel grounded. It's darker than Calypso but less austere than Celestial, the middle ground when you need something that actually lands without the clinical bite. This is a blue that works in actual light, not just in your mockups.

Use it for primary UI in fintech platforms, healthcare dashboards, and product interfaces where the action needs to feel confident but not aggressive. Active buttons, key navigation states, data highlights that need weight without dominating the screen. It's saturated enough to hold itself on lighter backgrounds, but warm enough that it won't create that jarring contrast you sometimes get with pure teals. Pairs clean with white type and sits naturally next to grays without washing out.

The thing: it's warmer and slightly less saturated than Crashing Waves, which makes it feel more approachable and a touch less technical. That warmth is the difference between feeling trustworthy and feeling cold. It doesn't need as much breathing room as its cooler cousins, but it also won't muscle its way through a busy layout. Test it early against your actual background colors, the warmth shifts slightly depending on what sits next to it.

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 Astral

Open the generator with this color pre-loaded.

Start creating