Astral

#376f89

Astral's lighter, slightly muted blue for airy structure

Save
Share

About Astral

Astral sits where blue stops being purely cool and picks up just enough teal to feel grounded. It's darker than but less austere than , 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 , 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

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

On Gray 100 #f5f5f5

Aa
5.07:1AAAAA Large

On Gray 900 #18181b

Aa
3.20:1FailAA Large

On Black #000000

Aa
3.80: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 Astral

Open the generator with this color pre-loaded.

Start creating