Back to palettes

Palette

Misty Morning Shore

A calm and refreshing palette inspired by the tranquil beauty of a misty lake shore at dawn, with cool, soft tones.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Morning Shore 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 Misty Morning Shore.

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

Data visualization

#DCE9F1#C2D6E4#A8C3D8#8EAFC8#E8EEED

Palette guide

How to use Misty Morning Shore

Overview

The Misty Morning Shore palette captures the calm and refreshing essence of a tranquil lake shore at dawn, offering cool, soft tones. With serene blues like #A8C3D8 and #8EAFC8, complemented by the light, airy #DCE9F1 and #E8EEED, this palette is perfect for designers and developers aiming for a peaceful and clean aesthetic. It provides a gentle visual experience, ideal for interfaces or branding that seeks to evoke serenity, clarity, and a touch of natural elegance, reminiscent of a quiet coastal sunrise.

Best used for

  • Travel and coastal-themed websites
  • Spa and wellness brand identities
  • Clean technology interfaces
  • Educational platforms with a calming feel
  • Digital art and photography portfolios
  • Minimalist interior design concepts

Suggested color roles

primary

Utilize #A8C3D8 as a central color for main UI elements or prominent brand features, conveying calm and clarity.

secondary

Employ #C2D6E4 for supporting sections, secondary headers, or subtle accents, maintaining a soft visual flow.

accent

Apply #8EAFC8 for interactive elements, calls to action, or important text, offering a slightly deeper anchor.

background

Choose #DCE9F1 as a light, expansive background, providing a crisp and clean canvas for content.

text

For optimal legibility, use #8EAFC8 for body text on light backgrounds like #DCE9F1, ensuring good contrast and a harmonious feel.

Accessibility notes

  • Ensure #8EAFC8 text on #DCE9F1 meets WCAG AA contrast for body text; a darker neutral might be needed for small text.
  • Avoid using #E8EEED for any text, as its extremely light value will not provide sufficient contrast on most backgrounds.
  • Always verify contrast ratios for critical information and interactive components to ensure universal usability.
  • The lighter colors like #DCE9F1 and #E8EEED work best as backgrounds or subtle graphic elements, not for text.

Recommended combinations

Shoreline Layers

Excellent for creating layered backgrounds, card elements, or soft visual hierarchies in UI design.

#DCE9F1 · #C2D6E4 · #A8C3D8

Deep Water Contrast

Combine for impactful buttons, calls to action, or headings that stand out against a lighter base.

#8EAFC8 · #A8C3D8 · #DCE9F1

Subtle Shift

Use for delicate dividers, hover states, or secondary information panels, maintaining a gentle flow.

#E8EEED · #C2D6E4 · #8EAFC8

CSS variables

:root {
  --misty-morning-shore-1: #DCE9F1;
  --misty-morning-shore-2: #C2D6E4;
  --misty-morning-shore-3: #A8C3D8;
  --misty-morning-shore-4: #8EAFC8;
  --misty-morning-shore-5: #E8EEED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-morning-shore": {
        1: "#DCE9F1",
        2: "#C2D6E4",
        3: "#A8C3D8",
        4: "#8EAFC8",
        5: "#E8EEED",
      }
    }
  }
}

Related searches

misty shore colorstranquil blue palettecool serene tonescoastal ui colorslight nautical theme

Palette colors

Hex values

Color 1#DCE9F1
·
Color 2#C2D6E4
·
Color 3#A8C3D8
·
Color 4#8EAFC8
·
Color 5#E8EEED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.9:1Fail
1.1:1Fail
2
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.3:1Fail
3
1.5:1Fail
1.2:1Fail
1.3:1Fail
1.6:1Fail
4
1.9:1Fail
1.5:1Fail
1.3:1Fail
2:1Fail
5
1.1:1Fail
1.3:1Fail
1.6:1Fail
2:1Fail

Similar palettes

More like Misty Morning Shore

View all cool