Blue Bay

#619ad6

Lighter, periwinkle-leaning blue for airy UI panels

Save
Share

About Blue Bay

Blue Bay sits slightly warmer and more saturated than , 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 or . 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 will, and it won't feel withdrawn like 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
2.96:1Fail

On Gray 100 #f5f5f5

Aa
2.71:1Fail

On Gray 900 #18181b

Aa
5.99:1AAAAA Large

On Black #000000

Aa
7.10:1AAA

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Blue Bay

Open the generator with this color pre-loaded.

Start creating