Back to palettes

Palette

Misty Morning Lake

Gentle, diffused blues and grays, like a tranquil lake on a misty morning.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A7E8C#8DA7B5#AFC2D0#D2DFE8#3A5C6A

Palette guide

How to use Misty Morning Lake

Overview

The Misty Morning Lake palette offers a collection of gentle, diffused blues and grays, reminiscent of a tranquil lake at dawn. Featuring deep tones like #5A7E8C and #3A5C6A, balanced by lighter shades such as #D2DFE8, this palette creates a serene and grounded atmosphere. It's an excellent choice for designers and developers seeking to convey calm, depth, and professionalism in their projects. The cool, muted hues are versatile for both digital interfaces and print, providing a sophisticated yet approachable feel.

Best used for

  • Environmental or nature-themed applications
  • Corporate and professional websites
  • Wellness and mental health platforms
  • Travel and tourism branding
  • High-end home decor visualization
  • Clean and modern UI design

Suggested color roles

primary

Utilize #5A7E8C as a strong brand color or for main content areas, conveying a sense of depth and stability.

secondary

Apply #8DA7B5 for supporting graphics, subheadings, or as a background for secondary information, offering a softer presence.

accent

Reserve #3A5C6A for impactful elements like calls to action, important icons, or bold text, providing a clear focal point.

background

Employ #D2DFE8 as a clean, light background to ensure readability and an airy feel across your design.

text

For optimal readability, use #3A5C6A for body text on light backgrounds like #D2DFE8, ensuring strong contrast while maintaining palette harmony.

Accessibility notes

  • Ensure #3A5C6A text on #D2DFE8 meets WCAG AAA contrast for body text; it offers excellent readability.
  • Avoid using #AFC2D0 or #8DA7B5 for small text on light backgrounds as they may not provide sufficient contrast.
  • Always test contrast ratios for interactive elements to ensure they are easily discernible by all users.
  • Use the darker colors, #5A7E8C and #3A5C6A, for critical text elements against lighter backgrounds.

Recommended combinations

Deep Water

Effective for creating strong, layered sections or elegant footers with a gradient-like depth.

#3A5C6A · #5A7E8C · #8DA7B5

Misty Layers

Perfect for backgrounds, cards, or containers that need a soft, ethereal visual separation.

#D2DFE8 · #AFC2D0 · #8DA7B5

Accent Splash

Combine the light background with a primary and a dark accent for impactful buttons or calls to action.

#D2DFE8 · #5A7E8C · #3A5C6A

CSS variables

:root {
  --misty-morning-lake-1: #5A7E8C;
  --misty-morning-lake-2: #8DA7B5;
  --misty-morning-lake-3: #AFC2D0;
  --misty-morning-lake-4: #D2DFE8;
  --misty-morning-lake-5: #3A5C6A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-morning-lake": {
        1: "#5A7E8C",
        2: "#8DA7B5",
        3: "#AFC2D0",
        4: "#D2DFE8",
        5: "#3A5C6A",
      }
    }
  }
}

Related searches

serene lake palettedeep misty bluestranquil color schemecool nature tonescorporate blue grey

Palette colors

Hex values

Color 1#5A7E8C
·
Color 2#8DA7B5
·
Color 3#AFC2D0
·
Color 4#D2DFE8
·
Color 5#3A5C6A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.4:1Fail
3.2:1AA18
1.6:1Fail
2
1.7:1Fail
1.4:1Fail
1.9:1Fail
2.9:1Fail
3
2.4:1Fail
1.4:1Fail
1.4:1Fail
3.9:1AA18
4
3.2:1AA18
1.9:1Fail
1.4:1Fail
5.3:1AA
5
1.6:1Fail
2.9:1Fail
3.9:1AA18
5.3:1AA

Similar palettes

More like Misty Morning Lake

View all cool
Calm Lake Reflections
Frosty Morning Lake
Gentle Lake Mist
Stillwater Surface Calm
Alpine Lake Reflection
Aqua Stillness Mood