Palette

Silent Harbor Mist

A quiet blend of muted tones, capturing the gentle serenity of a foggy harbor at dawn.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Silent Harbor Mist 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 Silent Harbor Mist.

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

Data visualization

#778899#A9A9A9#9FB8AD#F8F8FF#2F4F4F

Palette guide

How to use Silent Harbor Mist

Overview

The Silent Harbor Mist palette offers a sophisticated blend of muted, cool tones, perfect for designs seeking a serene and understated elegance. This neutral collection features the gentle grey-blue of #778899 (Light Slate Gray) as a versatile primary, complemented by the balanced mid-tone #A9A9A9 (Dark Gray). A hint of soft green-grey emerges with #9FB8AD, providing a subtle accent. Anchoring the palette are the near-white #F8F8FF (Ghost White) for clean backgrounds and the deep, grounding #2F4F4F (Dark Slate Gray) for strong contrast. Designers and developers can leverage this palette to create calm, professional, and highly readable interfaces that evoke a sense of tranquility.

Best used for

High-end spa or wellness branding
Minimalist web and app interfaces
Coastal or nature-inspired design projects
Luxury real estate presentations
Photography portfolios
Environmental awareness campaigns

Suggested color roles

primary

#778899 (Light Slate Gray) - Ideal for main content blocks, navigation bars, or large background sections to establish a calm, professional base.

secondary

#A9A9A9 (Dark Gray) - Excellent for secondary headings, borders, dividers, or inactive UI elements, offering subtle visual separation.

accent

#9FB8AD (Cadet Blue/Slate Gray variant) - Use this delicate, slightly green-tinged grey for subtle interactive elements, iconography, or to highlight key information without overpowering the design.

background

#F8F8FF (Ghost White) - A soft, off-white choice for primary page backgrounds, providing a clean canvas that enhances readability and allows other muted tones to subtly emerge.

text

#2F4F4F (Dark Slate Gray) - The optimal choice for primary body text, ensuring high readability against lighter backgrounds like #F8F8FF while maintaining the palette's sophisticated, muted aesthetic.

Accessibility notes

Ensure #2F4F4F text on #F8F8FF background meets WCAG AA contrast standards for all text sizes.
Avoid using #A9A9A9 for small text on #778899 backgrounds, as contrast may be insufficient.
When using #9FB8AD for interactive elements, ensure sufficient touch target size and consider an additional visual cue if contrast is marginal.
For very small text or critical information, always default to #2F4F4F on #F8F8FF or a similarly high-contrast pairing.

Recommended combinations

Clarity & Calm

A foundational combination for clean layouts: light background, a calming primary section color, and strong, readable dark text.

#F8F8FF · #778899 · #2F4F4F

Subtle Depth

Layered greys and blue-greys creating subtle visual hierarchy for cards, panels, or detailed UI components, offering understated sophistication.

#778899 · #A9A9A9 · #9FB8AD

Gentle Highlight

Utilize a clean background with dark text, and the soft green-grey for subtle highlights, interactive elements, or secondary calls to action.

#F8F8FF · #2F4F4F · #9FB8AD

CSS variables

:root {
  --silent-harbor-mist-1: #778899;
  --silent-harbor-mist-2: #A9A9A9;
  --silent-harbor-mist-3: #9FB8AD;
  --silent-harbor-mist-4: #F8F8FF;
  --silent-harbor-mist-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "silent-harbor-mist": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#9FB8AD",
        4: "#F8F8FF",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#778899

Color 2#A9A9A9

Color 3#9FB8AD

Color 4#F8F8FF

Color 5#2F4F4F

Accessibility

Contrast checker

1.5:1Fail

1.7:1Fail

3.4:1AA18

2.5:1Fail

1.5:1Fail

1.1:1Fail

2.2:1Fail

3.8:1AA18

1.7:1Fail

1.1:1Fail

2:1Fail

4.2:1AA18