Sail On
#4575ad
Sail On is a lighter, cooler, airy blue
About Sail On
On a white header bar, Sail On reads like a confident medium blue, not the washed-in calm you'd expect from lighter family members. It's slightly deeper and a touch more saturated than Campanula, so it holds its shape instead of floating. Compared with Naval, it feels less anchored and more friendly, with a smoother, sky-leaning undertone rather than a chart-table cool.
I use Sail On for fintech dashboards and SaaS tools where the primary button and key metric highlights need to pop without turning heavy. It sits nicely on mid-tone grays for active states and selected filters, and it stays legible without the "too bright, too airy" problem you get when the blue is closer to Bay View.
Quirk: because it's warmer than cooler workspace blues, it can look a bit flat next to crisp teal accents. I usually pair it with cleaner neutrals and a slightly brighter secondary blue so the hierarchy stays sharp.
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.