Harbour Blue
#417491
Harbour calm blue with balanced teal warmth
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 Calypso, 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 Crashing Waves 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 Calypso, 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.
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
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
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
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.