Palette

Seascape Morning Mist

Soft, muted blues and greys depicting the gentle, foggy atmosphere of a serene coastal morning.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seascape Morning 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 Seascape Morning Mist.

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

Data visualization

#6A808C#9AB0BD#C2D4E0#E2F0F7#546772

Palette guide

How to use Seascape Morning Mist

Overview

The Seascape Morning Mist palette offers a soft, muted, and cool collection of blues and grays, depicting the gentle, foggy atmosphere of a serene coastal morning. With a grounding #6A808C, an airy #C2D4E0, and the lightest #E2F0F7, this palette is ideal for designs that prioritize calm, clarity, and understated elegance. Designers and developers can leverage these harmonious hues to create soothing user interfaces, minimalist branding, or tranquil digital experiences that evoke a sense of peace and quiet contemplation. Its gentle progression of tones fosters a relaxing visual journey.

Best used for

Wellness and meditation applications
Minimalist portfolios and personal websites
Serene home goods and decor branding
Calming user interfaces and dashboards
Subtle and sophisticated corporate communications
Photography websites with a soft aesthetic

Suggested color roles

primary

Use #6A808C as a calm, grounding main color for branding, primary headers, or significant graphic elements, conveying stability.

secondary

Employ #9AB0BD for lighter, supportive blue-gray elements, background sections, or secondary navigation, adding gentle depth.

accent

Apply #546772 as the deepest, subtle accent for emphasis, strong calls to action, or important interactive states, providing clarity.

background

Utilize #E2F0F7 as the lightest, airy base for pages or content blocks, ensuring ample whitespace and a clean, fresh feel.

text

For optimal legibility, #546772 serves as the darkest and most effective text color against the lighter backgrounds, ensuring content is easily digestible.

Accessibility notes

The combination of #546772 (text) on #E2F0F7 (background) offers excellent contrast for body text readability, meeting WCAG AA standards.
The lighter shades like #C2D4E0 and #E2F0F7 are generally unsuitable for small text; use them for backgrounds or larger elements.
Ensure sufficient contrast when using #6A808C or #9AB0BD as text colors on lighter backgrounds, especially for smaller font sizes.
Avoid using adjacent light shades for interactive elements if their differentiation is crucial for user experience.

Recommended combinations

Misty Base

Ideal for creating light, spacious backgrounds, subtle content divisions, and soft UI elements that evoke a gentle, airy feel.

#E2F0F7 · #C2D4E0 · #9AB0BD

Morning Depth

Excellent for headers, main text content, and secondary accents, providing a grounded yet serene visual hierarchy.

#6A808C · #546772 · #9AB0BD

Subtle Contrast

Creates a clean base, highlights primary elements with a mid-tone blue-gray, and provides strong calls to action with a deep, subtle accent.

#E2F0F7 · #6A808C · #546772

CSS variables

:root {
  --seascape-morning-mist-1: #6A808C;
  --seascape-morning-mist-2: #9AB0BD;
  --seascape-morning-mist-3: #C2D4E0;
  --seascape-morning-mist-4: #E2F0F7;
  --seascape-morning-mist-5: #546772;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seascape-morning-mist": {
        1: "#6A808C",
        2: "#9AB0BD",
        3: "#C2D4E0",
        4: "#E2F0F7",
        5: "#546772",
      }
    }
  }
}

Hex values

Color 1#6A808C

Color 2#9AB0BD

Color 3#C2D4E0

Color 4#E2F0F7

Color 5#546772

Accessibility

Contrast checker

1.8:1Fail

2.7:1Fail

3.6:1AA18

1.4:1Fail

1.8:1Fail

1.5:1Fail

1.9:1Fail

2.6:1Fail

2.7:1Fail

1.5:1Fail

1.3:1Fail

3.9:1AA18

3.6:1AA18

1.9:1Fail

1.3:1Fail

5.1:1AA

1.4:1Fail

2.6:1Fail

3.9:1AA18

5.1:1AA

Similar palettes

More like Seascape Morning Mist