Palette

Quiet Harbor Dusk

The tranquil and muted blues and grays of a quiet harbor as twilight descends.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Quiet Harbor Dusk reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Quiet Harbor Dusk.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#2F4F4F#778899#B0C4DE#F0F8FF#4682B4

Palette guide

How to use Quiet Harbor Dusk

Overview

The Quiet Harbor Dusk palette captures the tranquil and muted blues and grays of a coastal scene as twilight descends. Ranging from the deep, sophisticated #2F4F4F to the ethereal, near-white #F0F8FF, this collection offers a calm and sophisticated aesthetic. Designers can leverage these hex codes to evoke a sense of peace and maritime serenity, creating elegant and understated designs. Developers will find the distinct shades, including the stable blue of #4682B4 and the versatile #778899, easy to implement for a cohesive and visually appealing user interface. This palette is perfect for conveying calmness and quiet contemplation.

Best used for

Coastal living or travel brands
Maritime and yachting services websites
Minimalist and sophisticated tech interfaces
Spa and wellness resort branding
Interior design focusing on serene, cool tones
Photography portfolios featuring seascapes

Suggested color roles

primary

Use #4682B4 as a stable, calming blue for main content areas, headers, or prominent brand elements.

secondary

Employ #778899 for supporting sections, sub-headers, or UI elements, providing a versatile mid-grey blue.

accent

Apply #2F4F4F sparingly for strong contrasts, icons, or calls-to-action, adding depth and sophistication.

background

The airy #F0F8FF serves as an excellent, almost-white base, ensuring optimal readability for darker text.

text

Utilize #2F4F4F for primary text, offering superb legibility against lighter backgrounds like #F0F8FF.

Accessibility notes

Ensure #2F4F4F text has strong contrast against #F0F8FF, meeting WCAG AA requirements for all text sizes.
Avoid using #B0C4DE for small text on #F0F8FF backgrounds; contrast may be insufficient.
When placing #4682B4 on #F0F8FF, verify contrast for readability, especially for body text.
For interactive elements, always check contrast ratios when combining different shades within this palette.

Recommended combinations

Twilight Sky

Creates a soft, ethereal gradient for hero sections or headers, moving from light to muted blue-grey.

#F0F8FF · #B0C4DE · #778899

Deep Water

Excellent for defining strong content blocks, footers, or navigation, with #2F4F4F for depth.

#2F4F4F · #4682B4 · #778899

Harbor Lights

Provides a clean, crisp look for calls-to-action or key information, ensuring high visibility.

#F0F8FF · #4682B4 · #2F4F4F

CSS variables

:root {
  --quiet-harbor-dusk-1: #2F4F4F;
  --quiet-harbor-dusk-2: #778899;
  --quiet-harbor-dusk-3: #B0C4DE;
  --quiet-harbor-dusk-4: #F0F8FF;
  --quiet-harbor-dusk-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-harbor-dusk": {
        1: "#2F4F4F",
        2: "#778899",
        3: "#B0C4DE",
        4: "#F0F8FF",
        5: "#4682B4",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#778899

Color 3#B0C4DE

Color 4#F0F8FF

Color 5#4682B4

Accessibility

Contrast checker

2.5:1Fail

5:1AA

8.3:1AAA

2.2:1Fail

2.5:1Fail

2:1Fail

3.4:1AA18

1.1:1Fail

5:1AA

2:1Fail

1.7:1Fail

2.3:1Fail