Mermaid Blues
#004477
Coastal teal-leaning blue for focused, gentle contrast
About Mermaid Blues
I keep seeing Mermaid Blues on modern product screenshots where the design team wants "blue, but not heavy." It reads as a deep sea tone that's more saturated than the softer UI blues around it, yet it doesn't carry the navy seriousness of Aegean Blue or the heavier anchor feel of Grand Bleu. Compared to Pacific Depths, this one holds its color a bit tighter and feels slightly cleaner, like the lights are still crisp under the surface.
For me, it's the one you reach for when you want a primary brand blue that stays legible in dense interfaces without turning cold. I've used it for dashboards and finance apps, but also for onboarding steps, policy panels, and form CTAs where the emphasis needs to feel steady, not commanding. Think app headers, selected-row states, and active toggle colors that should look intentional even at a glance.
Pair it with light neutrals and medium grays, and give it room next to other saturated accents. On very dark compositions, it can flatten sooner than you'd expect, so test it against your actual UI layers before you commit.
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.