Back to palettes

Palette

Misty Lagoon Serene

Hazy, calming greens and greys capturing the peaceful atmosphere of a mist-shrouded lagoon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Lagoon Serene 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 Lagoon Serene.

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

Data visualization

#AECDCB#8AA4A1#5C7573#D2E0DF#E6F0F0

Palette guide

How to use Misty Lagoon Serene

Overview

The Misty Lagoon Serene palette offers a tranquil collection of grey-greens, ideal for creating calm and earthy digital experiences. Featuring shades like the muted '#AECDCB', the grounding '#8AA4A1', and the deep '#5C7573', this palette evokes the peaceful atmosphere of a mist-shrouded natural landscape. Its lighter counterparts, '#D2E0DF' and '#E6F0F0', provide airy backdrops, making it perfect for designs seeking a serene yet sophisticated feel. Designers and developers will find these colors versatile for conveying natural harmony and understated elegance across various applications, from wellness platforms to eco-conscious branding. This palette consistently promotes a sense of quietude and balance.

Best used for

  • Wellness and spa branding
  • Nature-themed websites and apps
  • Eco-friendly product packaging
  • Minimalist user interfaces
  • Interior design mood boards
  • Calm corporate communication

Suggested color roles

primary

Use '#5C7573' as a strong, grounding primary color for headers or main calls to action, conveying stability.

secondary

Employ '#8AA4A1' for supporting elements, subheadings, or secondary buttons, maintaining a cohesive flow.

accent

Apply '#AECDCB' for subtle accents like icons, progress bars, or hover states, adding a gentle lift.

background

Utilize '#E6F0F0' as the main background for a clean, airy canvas that allows content to breathe.

text

For optimal readability, use '#5C7573' or a dark charcoal for primary body text against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between '#5C7573' text on '#E6F0F0' backgrounds for readability.
  • Avoid using lighter shades like '#AECDCB' for small text, as it may lack contrast.
  • Provide clear visual cues beyond color, especially for interactive elements.
  • Test color combinations with accessibility tools to meet WCAG guidelines.

Recommended combinations

Deep Calm

Ideal for creating depth and a natural, grounding feel in hero sections or detailed illustrations.

#5C7573 · #8AA4A1 · #AECDCB

Light Serenity

Perfect for airy layouts, clean interfaces, and backgrounds that emphasize spaciousness and light.

#E6F0F0 · #D2E0DF · #AECDCB

Subtle Depth

Excellent for balanced designs where a softer main tone is supported by a darker grounding element.

#8AA4A1 · #D2E0DF · #5C7573

CSS variables

:root {
  --misty-lagoon-serene-1: #AECDCB;
  --misty-lagoon-serene-2: #8AA4A1;
  --misty-lagoon-serene-3: #5C7573;
  --misty-lagoon-serene-4: #D2E0DF;
  --misty-lagoon-serene-5: #E6F0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-lagoon-serene": {
        1: "#AECDCB",
        2: "#8AA4A1",
        3: "#5C7573",
        4: "#D2E0DF",
        5: "#E6F0F0",
      }
    }
  }
}

Related searches

calm green grey paletteserene web design colorsnature inspired uitranquil color schemesubtle branding colors

Palette colors

Hex values

Color 1#AECDCB
·
Color 2#8AA4A1
·
Color 3#5C7573
·
Color 4#D2E0DF
·
Color 5#E6F0F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
1.2:1Fail
1.5:1Fail
2
1.6:1Fail
1.9:1Fail
2:1Fail
2.3:1Fail
3
2.9:1Fail
1.9:1Fail
3.6:1AA18
4.3:1AA18
4
1.2:1Fail
2:1Fail
3.6:1AA18
1.2:1Fail
5
1.5:1Fail
2.3:1Fail
4.3:1AA18
1.2:1Fail

Similar palettes

More like Misty Lagoon Serene

View all cool
Aqua Dream Glow
Aqua Stillness Mood
Aqua Tile Spa
Calm Ocean Swell
Coastal Breeze Mist
Fjord Mist Morning