Blue Bay
#619ad6
Lighter, periwinkle-leaning blue for airy UI panels
About Blue Bay
Blue Bay sits slightly warmer and more saturated than Cousteau, which means it actually anchors instead of recedes. It's got more presence than the support players without tipping into the aggression you get from Acapulco Dive or Cerulean. This is the blue that feels substantial the moment you place it.
Reach for this in fintech dashboards, SaaS products, and health interfaces where you need a primary accent that doesn't exhaust. Primary buttons, active states, key data highlights, card borders, it does the heavy lifting. Pair it with white and it commands without shouting. Pair it with darker backgrounds and it stays legible without needing extra brightness to fight back.
The practical note: it's denser in tone than its neighbors, so it won't disappear into busy layouts the way Cousteau will, and it won't feel withdrawn like Cerulean can on warmer screens. Test it early against your actual interface hierarchy. This is the one you reach for when the lighter blues feel insubstantial and you need something that reads as a decision, not a default.
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.