Palette

Seaside Morning Fog

Muted greys and soft blues capturing the serene, cool embrace of a foggy morning by the sea.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#696969#778899#B0C4DE#D3D3D3#F5F5F5

Palette guide

How to use Seaside Morning Fog

Overview

The Seaside Morning Fog palette captures the serene, cool embrace of a foggy morning by the sea with its muted greys and soft blues. Featuring a strong #696969, a cool #778899, a gentle #B0C4DE, and light grays #D3D3D3 and #F5F5F5, this collection is both grounding and airy. Designers and developers can utilize these versatile tones to create clean, modern digital experiences, professional branding, or calming physical spaces. It's an excellent choice for projects that demand a sophisticated yet understated aesthetic, emphasizing clarity and peacefulness.

Best used for

Corporate and business website design
Tech startup branding and interfaces
Photography portfolios and galleries
Urban planning and architectural presentations
Minimalist product design
Professional and clean presentations

Suggested color roles

primary

Use #696969 as a strong, grounding primary color for bold headings, main calls to action, or navigation, ensuring clear emphasis.

secondary

Apply #778899 for supportive elements like subheadings, secondary buttons, or background sections, providing a cool, cohesive tone.

accent

Introduce #B0C4DE as a soft blue accent for interactive elements, subtle highlights, or graphic details, adding a touch of calm.

background

Employ #F5F5F5 as the lightest background color, creating a clean, crisp, and expansive canvas that allows other colors to stand out.

text

For excellent readability, use #696969 for body text and critical information on lighter backgrounds. A pure white can be used for text on #696969.

Accessibility notes

Text in #696969 on #F5F5F5 will provide excellent contrast, meeting WCAG AA or AAA for readability.
Ensure #778899 has sufficient contrast when used for text on lighter backgrounds like #D3D3D3.
Avoid using #D3D3D3 or #F5F5F5 for text; they are best for backgrounds or large decorative elements.
Interactive elements should have distinct visual states and adequate contrast, possibly using #696969 or #778899.

Recommended combinations

Deep Fog

Creates a modern, crisp, and professional look, ideal for tech or corporate branding.

#696969 · #B0C4DE · #F5F5F5

Muted Horizon

Perfect for a soft, professional, and minimalist aesthetic, suitable for photography or calm interfaces.

#778899 · #D3D3D3 · #F5F5F5

Cool Layers

Offers a balanced, calm, and sophisticated feel, excellent for presentations or layered UI designs.

#696969 · #778899 · #B0C4DE

CSS variables

:root {
  --seaside-morning-fog-1: #696969;
  --seaside-morning-fog-2: #778899;
  --seaside-morning-fog-3: #B0C4DE;
  --seaside-morning-fog-4: #D3D3D3;
  --seaside-morning-fog-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-morning-fog": {
        1: "#696969",
        2: "#778899",
        3: "#B0C4DE",
        4: "#D3D3D3",
        5: "#F5F5F5",
      }
    }
  }
}

Hex values

Color 1#696969

Color 2#778899

Color 3#B0C4DE

Color 4#D3D3D3

Color 5#F5F5F5

Accessibility

Contrast checker

1.5:1Fail

3.1:1AA18

3.7:1AA18

5:1AA

1.5:1Fail

2:1Fail

2.4:1Fail

3.3:1AA18

3.1:1AA18

2:1Fail

1.2:1Fail

1.6:1Fail

3.7:1AA18

2.4:1Fail

1.2:1Fail

1.4:1Fail

5:1AA

3.3:1AA18

1.6:1Fail

1.4:1Fail

Similar palettes

More like Seaside Morning Fog