Blue Ocean
#009dc4
Ocean-deep blue with steady saturation for maps
About Blue Ocean
Blue Ocean sits lower and warmer than Blue Burst, it's got the saturation to land on screen, but it doesn't have that electric snap. This is the blue that feels grounded without being dull, the one that actually belongs in an interface rather than just punching through it.
Reach for it in fintech dashboards, health apps, and SaaS platforms where you need an accent that reads confident and approachable at once. Active states, primary buttons, key data highlights, section headers. It pairs naturally with white space and mid-tone backgrounds because the warmth keeps it from feeling clinical the way cooler blues can. On standard monitors it holds steady. On warmer displays it edges toward teal without losing its blue identity.
The difference from Canadian Tuxedo: this one's more saturated, so it actually commands the space it occupies. The difference from Aquarius: it's warmer and more committed, less of a supporting player, more of a main character. It's the blue I reach for when I need something that feels both present and trustworthy.
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.