Back to palettes

Palette

Seaside Fog Whisper

Gentle and hazy, evoking the soft, diffused light of a quiet coastline enveloped in a cool fog.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Fog Whisper 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 Seaside Fog Whisper.

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

Data visualization

#607B8B#A7B9C7#CED8E1#DCE4E9#E8EEF1

Palette guide

How to use Seaside Fog Whisper

Overview

The Seaside Fog Whisper palette evokes the soft, diffused light of a quiet coastline enveloped in a cool fog. Its gentle blue-greys, including muted #607B8B, softer #A7B9C7, and airy #CED8E1, #DCE4E9, and #E8EEF1, create a remarkably serene and hazy atmosphere. This collection is perfect for designers and developers aiming to convey calmness, understated elegance, and a sense of peaceful introspection. It offers a subtle gradient from a deeper, anchoring blue-grey to almost-white, ideal for minimalist designs that prioritize clarity and tranquility.

Best used for

  • Minimalist website interfaces
  • Serene interior design projects
  • Photography backdrop themes
  • Wellness and meditation app UIs
  • Understated luxury branding
  • Editorial layouts requiring calm

Suggested color roles

primary

Use #607B8B as the primary grounding color for strong headings or important interactive elements, providing a clear anchor.

secondary

Apply #A7B9C7 for supportive text, secondary navigation, or subtle graphic elements, maintaining the palette's soft feel.

accent

Introduce #CED8E1 as a delicate accent for hover states, subtle dividers, or background textures, adding depth without intensity.

background

Employ #E8EEF1 as the predominant background color to create an open, airy canvas that enhances the sense of calm and space.

text

For optimal readability on light backgrounds, use #607B8B for body text and essential information. A dark charcoal can also be used for better contrast.

Accessibility notes

  • Text in #607B8B on #E8EEF1 should provide sufficient contrast for body text readability.
  • Exercise caution when using #A7B9C7 for text on #CED8E1; ensure WCAG AA contrast standards are met.
  • The lighter shades like #DCE4E9 and #E8EEF1 are best reserved for backgrounds or large graphical elements.
  • Interactive elements should have distinct visual states with adequate contrast from surrounding elements.

Recommended combinations

Deep Fog

Creates a professional yet calm aesthetic, suitable for corporate or clean branding.

#607B8B · #E8EEF1 · #A7B9C7

Hazy Morning

Ideal for a very airy, soft look, perfect for wellness or relaxation-focused designs.

#A7B9C7 · #CED8E1 · #E8EEF1

Subtle Layers

Provides a sophisticated, layered appearance, excellent for subtle UI depth or background patterns.

#607B8B · #DCE4E9 · #CED8E1

CSS variables

:root {
  --seaside-fog-whisper-1: #607B8B;
  --seaside-fog-whisper-2: #A7B9C7;
  --seaside-fog-whisper-3: #CED8E1;
  --seaside-fog-whisper-4: #DCE4E9;
  --seaside-fog-whisper-5: #E8EEF1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-fog-whisper": {
        1: "#607B8B",
        2: "#A7B9C7",
        3: "#CED8E1",
        4: "#DCE4E9",
        5: "#E8EEF1",
      }
    }
  }
}

Related searches

calm blue grey color paletteserene fog inspired colorsminimalist coastal aestheticneutral website color schemesoft muted blue tones

Palette colors

Hex values

Color 1#607B8B
·
Color 2#A7B9C7
·
Color 3#CED8E1
·
Color 4#DCE4E9
·
Color 5#E8EEF1
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.1:1AA18
3.5:1AA18
3.8:1AA18
2
2.2:1Fail
1.4:1Fail
1.6:1Fail
1.7:1Fail
3
3.1:1AA18
1.4:1Fail
1.1:1Fail
1.2:1Fail
4
3.5:1AA18
1.6:1Fail
1.1:1Fail
1.1:1Fail
5
3.8:1AA18
1.7:1Fail
1.2:1Fail
1.1:1Fail

Similar palettes

More like Seaside Fog Whisper

View all neutral