Hadfield Blue
#1177ff
Lighter, violet-leaning blue for secondary UI links
About Hadfield Blue
I keep catching Hadfield Blue in UI mockups that look too "almost-blue" to be confidence-inducing. Next to Azure, it doesn't shove forward as cyan-bright. Next to Blue Ribbon, it doesn't read as the no-compromise primary. It's more composed, with a calmer purple-blue undertone that stays smooth instead of jumping at you.
In practice, I reach for it when the header needs to feel authoritative without turning icy, especially in dashboards and finance apps where you want clarity but not that "pure primary" harshness. It also plays well in B2B admin screens and design system components when the emphasis is hierarchy and legibility on dense layouts, like risk tables and workflow statuses. The saturation is high enough to hold its lane like Bluerocratic does, but the temperature stays slightly cooler and more restrained, so it lands cleaner against white.
Pair it with warm neutrals and it will still stay blue-leaning, but if you push it with other cool accents, it can start to feel a bit formal fast.
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.
