Palette

Dusky Harbor Stone

Cool, understated greys and blues reflecting the muted light and stone textures of a quiet harbor at dusk.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dusky Harbor Stone 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 Dusky Harbor Stone.

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

Data visualization

#3D4A5C#6B7B8F#A0AFC0#D2D8E0#EAEFF4

Palette guide

How to use Dusky Harbor Stone

Overview

The "Dusky Harbor Stone" palette features cool, understated greys and blues, reflecting the muted light and stone textures of a quiet harbor at dusk. This neutral-cool collection ranges from a deep slate blue #3D4A5C to a light, airy off-white #EAEFF4. Shades like #6B7B8F, #A0AFC0, and #D2D8E0 provide a smooth, subtle gradient, making it ideal for designs seeking a minimalist, sophisticated, and tranquil aesthetic. Designers can utilize this palette for corporate branding, modern architectural projects, or clean digital interfaces. Developers will find these hex codes excellent for creating harmonious user experiences that convey professionalism, clarity, and a serene, grounded atmosphere.

Best used for

Minimalist corporate branding and websites
Modern architectural visualization
High-tech product interfaces or dashboards
Luxury automotive or marine industry branding
Professional services websites (e.g., law, finance)
Clean, data-heavy analytical dashboards

Suggested color roles

primary

#6B7B8F - A medium blue-gray, excellent for main content areas, headers, or to establish a professional, calm base.

secondary

#3D4A5C - A deep slate blue, perfect for strong headings, important information, or to add grounded depth and sophistication.

accent

#A0AFC0 - A lighter blue-gray, ideal for subtle highlights, interactive states, or to provide delicate visual interest.

background

#EAEFF4 - The lightest, almost pure white-blue, offering an expansive, clean, and airy canvas.

text

#3D4A5C - The darkest color in the palette, ensuring excellent readability on lighter backgrounds. For dark backgrounds, use #EAEFF4 or white.

Accessibility notes

For text on #EAEFF4 and #D2D8E0, use #3D4A5C or #6B7B8F for sufficient contrast.
When using #3D4A5C or #6B7B8F as backgrounds, use #EAEFF4 or pure white for text readability.
Avoid using #A0AFC0 as text on #D2D8E0 due to potential low contrast, especially for small fonts.
Always test contrast ratios for interactive elements to meet WCAG guidelines, particularly with subtle blue-gray shifts.

Recommended combinations

Harbor Gradient

Creates a soft, atmospheric background gradient or subtle UI elements, evoking muted light and depth.

#EAEFF4 · #D2D8E0 · #A0AFC0

Stone Contrast

Use for primary branding, strong text, and a light background to highlight the professional grays and blues.

#3D4A5C · #6B7B8F · #EAEFF4

Minimal Depth

Ideal for content blocks, card backgrounds, or subtle visual hierarchy with a clean, grounded feel.

#A0AFC0 · #6B7B8F · #3D4A5C

CSS variables

:root {
  --dusky-harbor-stone-1: #3D4A5C;
  --dusky-harbor-stone-2: #6B7B8F;
  --dusky-harbor-stone-3: #A0AFC0;
  --dusky-harbor-stone-4: #D2D8E0;
  --dusky-harbor-stone-5: #EAEFF4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusky-harbor-stone": {
        1: "#3D4A5C",
        2: "#6B7B8F",
        3: "#A0AFC0",
        4: "#D2D8E0",
        5: "#EAEFF4",
      }
    }
  }
}

Hex values

Color 1#3D4A5C

Color 2#6B7B8F

Color 3#A0AFC0

Color 4#D2D8E0

Color 5#EAEFF4

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

6.3:1AA

7.8:1AAA

2.1:1Fail

1.9:1Fail

3:1AA18

3.7:1AA18

4:1AA18

1.9:1Fail

1.6:1Fail

1.9:1Fail

6.3:1AA

3:1AA18

1.6:1Fail

1.2:1Fail

7.8:1AAA

3.7:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like Dusky Harbor Stone

Dusky Harbor Stone

See it in context.

Ready when you are.

Built with Dusky Harbor Stone.

How to use Dusky Harbor Stone

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Harbor Gradient

Stone Contrast

Minimal Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Dusky Harbor Stone