Haddock’s Sweater
#277aba
Soft, midlight knit blue for approachable UI blocks
About Haddock’s Sweater
Haddock's Sweater is what happens when you want blue to feel lived-in instead of fresh off the rack. It's darker than Campanula and less austere than Brilliant Blue, cooler in temperature than Blue Triumph but without that pulled-back restraint. This is a blue that sits comfortable in its own skin, the kind you'd actually wear.
It lands in product dashboards, fintech interfaces, and healthcare apps where you need blue to anchor the layout without making everything feel like an emergency. It reads serious enough for data-heavy screens, warm enough that it doesn't read clinical or sterile. Works as your primary button, your key metric highlight, your sidebar accent, basically anywhere you'd put a blue that actually earns its place instead of filling a slot. Against white it settles in cleanly. Against grays it holds presence without strain.
The thing: it's saturated but not loud, which means it plays better with adjacent colors than the brighter options do. If Brilliant Blue demands the room's attention and Campanula asks politely, this one just belongs there.
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.
Similar colors
Create a gradient with Haddock’s Sweater
Open the generator with this color pre-loaded.
Start creating