Harbour Blue

#417491

Harbour calm blue with balanced teal warmth

Save
Share

About Harbour Blue

Harbour Blue sits in that middle ground where a blue stops being decorative and starts doing actual work. It's darker and more saturated than , which means it won't fade into the background when you pair it with anything except pure white. But it's not trying to be authoritative the way does, there's still warmth underneath, enough gray to keep it from reading cold. You get presence without the austere edge.

This is the blue for fintech dashboards, healthcare interfaces, and data products where a secondary action or persistent element needs weight but shouldn't dominate. Navigation states, chart accents, button fills, status indicators, anything that should hold its own without competing for hierarchy. It stays legible against both light and mid-tone backgrounds and pairs cleanly with white type. It reads solid without the clinical precision of its cooler neighbors.

One thing: because it's got more saturation than , it works harder on cleaner layouts. On dense screens, it can start to fight instead of support. Give it breathing room, or you'll be fighting for attention in ways you didn't expect.

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

On Gray 100 #f5f5f5

Aa
4.66:1AAAAA Large

On Gray 900 #18181b

Aa
3.49:1FailAA Large

On Black #000000

Aa
4.13: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

#3d7188
#4f7694
#376f89
#4f6f85
#41729f

Create a gradient with Harbour Blue

Open the generator with this color pre-loaded.

Start creating