Arctic

#648589

Soft blue-gray for frosted, neutral UI bars

Save
Share

About Arctic

Arctic is the blue that doesn't announce itself. It sits quieter than , refusing the brightness that makes cooler teals feel sharp. There's restraint here, the kind that works harder than it looks because it knows when to step back and let the layout breathe.

You'll land on it in product dashboards, SaaS interfaces, and healthcare apps where you need a secondary blue that reads calm instead of clinical. Section backgrounds, disabled states, supporting UI elements. It's less weighty than (which anchors everything it touches) and more neutral than (which leans warm). Arctic just sits there, collected, the one you reach for when a color needs to support without stealing attention.

The trade here is presence. It won't pop off the screen, and that's the point. On light backgrounds it'll feel almost invisible until you need it. Pair it with your typography hierarchy and test it early against mid-tone grays, that's where Arctic actually settles into place.

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
3.99:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.66:1FailAA Large

On Gray 900 #18181b

Aa
4.44:1FailAA Large

On Black #000000

Aa
5.26:1AAAAA 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

#698890
#648894
#6e8082
#6b7f81
#6a7f8b

Create a gradient with Arctic

Open the generator with this color pre-loaded.

Start creating