Haddock’s Sweater

#277aba

Soft, midlight knit blue for approachable UI blocks

Save
Share

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 and less austere than , cooler in temperature than 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 demands the room's attention and asks politely, this one just belongs there.

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
4.59:1AAAAA Large

On Gray 100 #f5f5f5

Aa
4.21:1FailAA Large

On Gray 900 #18181b

Aa
3.86:1FailAA Large

On Black #000000

Aa
4.58:1AAAAA Large

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 Haddock’s Sweater

Open the generator with this color pre-loaded.

Start creating