Harbour Mist
#88aaaa
Lighter, gray-leaning blue-gray for calm UI framing
About Harbour Mist
Harbour Mist is what happens when you want blue to feel settled instead of sharp. It sits noticeably lighter and grayer than Cool or Castaway, which means it won't compete for attention the way those colors do. There's blue in there, real blue, but it's the kind that's been left out in fog long enough to lose its edge.
You'll land on it in health dashboards, fintech apps, and SaaS platforms where a secondary surface needs to breathe without disappearing entirely. Card backgrounds, section headers, disabled states, anything that should recede but stay readable. It pairs well with dark text and doesn't flicker across different monitor temperatures. Unlike Glacier's earned lightness or Castaway's deliberate warmth, this one just feels calm. Muted, but not weak.
The catch: because it's desaturated, it can feel a touch flat on some screens. Pair it with charcoal or deep blue accents to give it definition. Test early if you're using it for interactive elements, you want enough contrast that it doesn't vanish when someone hovers over it.
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.