Palette

Sea Mist Shadow

The muted, atmospheric shades of a coastline enveloped in a tranquil, early morning sea mist.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sea Mist Shadow 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 Sea Mist Shadow.

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

Data visualization

#1E2D38#3A5F7A#6C9BB5#B0D4E7#E0EEF5

Palette guide

How to use Sea Mist Shadow

Overview

The 'Sea Mist Shadow' palette captures the muted, atmospheric shades of a coastline enveloped in tranquil, early morning mist. This collection, transitioning from the deep, mysterious #1E2D38 to the soft, ethereal #E0EEF5, offers a sophisticated range for designers and developers. Shades like #3A5F7A, #6C9BB5, and #B0D4E7 provide excellent options for creating depth, conveying a sense of calm, and building professional, contemplative digital experiences. Utilize these cool, muted tones to evoke a sense of quiet strength and natural elegance.

Best used for

Luxury travel and hospitality branding
Sophisticated corporate websites and reports
Moody photography themes and portfolios
Contemplative art or cultural institution design
High-end menswear or lifestyle brands
Atmospheric digital interfaces and apps

Suggested color roles

primary

Use #1E2D38 as a deep, foundational color for strong headings, primary calls-to-action, or impactful hero sections.

secondary

Apply #3A5F7A for subheadings, secondary content blocks, or supportive graphics, offering a mid-tone, authoritative blue-grey.

accent

Incorporate #6C9BB5 for softer accents, interactive states, or subtle illustrations, adding a touch of atmospheric lightness.

background

Utilize #E0EEF5 as the primary background color for a light, misty canvas, ensuring excellent readability for darker text.

text

For body text, #1E2D38 provides optimal contrast against #E0EEF5 and other lighter shades, ensuring clear readability. Use white for text on #1E2D38 backgrounds.

Accessibility notes

Ensure high contrast for text by using #1E2D38 on #E0EEF5 backgrounds, or white text on #1E2D38 backgrounds.
Avoid using mid-tones like #B0D4E7 for small text on #E0EEF5 backgrounds due to potential low contrast; reserve for larger titles.
Verify contrast ratios for interactive elements to meet WCAG standards, especially when using mid-range blues and greys.
Consider increasing font weight for text using #6C9BB5 on a #B0D4E7 background to improve legibility.

Recommended combinations

Misty Depths

A light, misty background with a deep blue-grey primary and a mid-tone blue-grey secondary, creating depth and elegance.

#E0EEF5 · #1E2D38 · #3A5F7A

Shadowed Layers

Ideal for layered UI components, using a medium blue-grey background, a lighter shade for cards, and the darkest for headings.

#6C9BB5 · #B0D4E7 · #1E2D38

Atmospheric Contrast

Use the mid-tone blue-grey for a content block, the lightest shade for text, and a softer blue-grey for subtle accents.

#3A5F7A · #E0EEF5 · #6C9BB5

CSS variables

:root {
  --sea-mist-shadow-1: #1E2D38;
  --sea-mist-shadow-2: #3A5F7A;
  --sea-mist-shadow-3: #6C9BB5;
  --sea-mist-shadow-4: #B0D4E7;
  --sea-mist-shadow-5: #E0EEF5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sea-mist-shadow": {
        1: "#1E2D38",
        2: "#3A5F7A",
        3: "#6C9BB5",
        4: "#B0D4E7",
        5: "#E0EEF5",
      }
    }
  }
}

Hex values

Color 1#1E2D38

Color 2#3A5F7A

Color 3#6C9BB5

Color 4#B0D4E7

Color 5#E0EEF5

Accessibility

Contrast checker

2.1:1Fail

4.7:1AA

9:1AAA

11.9:1AAA

2.1:1Fail

2.3:1Fail

4.3:1AA18

5.7:1AA

4.7:1AA

2.3:1Fail

1.9:1Fail

2.5:1Fail

9:1AAA

4.3:1AA18

1.9:1Fail

1.3:1Fail

11.9:1AAA

5.7:1AA

2.5:1Fail

1.3:1Fail

Similar palettes

More like Sea Mist Shadow

Coastal Cliff Retreat

Coastal Fog Drift

Coastal Haze