Quiet Harbour

#5a789a

Softer, desaturated harbor blue for calm body text

Save
Share

About Quiet Harbour

Quiet Harbour looks like a harbor mist settling over a dock at late afternoon. The is notably more restrained than , not that denim-mid register, and it doesn't carry the "made-you-decide" punch of . Compared to Into the , it's less sky-clear and more cloud-soft, so the surface feels quieter and slightly less saturated.

I use it when the UI needs clarity without feeling like it's pushing. Think air-traffic control for content in newsrooms, review queues in e-commerce ops, and dashboards and finance apps where you want links and statuses to read as active, but not press the user. It also works well on secondary buttons, table dividers, and chart series labels when the rest of the palette is already busy with grays.

One quirk: this shade can feel a touch cool next to warm whites, so I'll often pair it with neutrals that have a hint of cream, not stark paper. It's the one you reach for when you need to settle the page instead of steering it.

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

On Gray 100 #f5f5f5

Aa
4.20:1FailAA Large

On Gray 900 #18181b

Aa
3.87:1FailAA Large

On Black #000000

Aa
4.59: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 Quiet Harbour

Open the generator with this color pre-loaded.

Start creating