Back to palettes

Palette

Misty Lagoon Serene

The soft, ethereal blues of a tranquil lagoon veiled in morning mist, utterly peaceful.

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

#A2D4D8#C4E0E2#E0F2F4#B2DFEE#87CEEB

Palette guide

How to use Misty Lagoon Serene

Overview

The Misty Lagoon Serene palette is a collection of soft, ethereal blues that perfectly capture the tranquility of a lagoon veiled in morning mist. With colors like the gentle #A2D4D8, the clear #87CEEB, and the very light #E0F2F4, this palette offers a sense of ultimate peace and freshness. It is ideal for designs that aim to convey calmness, purity, and a connection to water. Designers will find its harmonious blend excellent for crafting serene user interfaces and soothing visual narratives, while developers can appreciate its cohesive nature for building engaging and visually appealing digital experiences that promote a sense of relaxation and clarity.

Best used for

  • Spa and wellness branding
  • Baby product and nursery design
  • Clean and minimalist UI design
  • Maritime and coastal themes
  • Relaxation and meditation apps
  • Environmental awareness campaigns

Suggested color roles

primary

Use #87CEEB as a clear, serene primary color for headings, important calls to action, or brand elements, conveying trust and calm.

secondary

Apply #A2D4D8 for supportive elements like subheadings or navigation, maintaining a gentle and cohesive feel.

accent

Introduce #B2DFEE for light highlights, interactive elements, or subtle graphic details to add a touch of ethereal glow.

background

Utilize #E0F2F4 as a very light, ethereal background color, offering maximum breathability and a sense of spaciousness.

text

For optimal readability, use a dark blue or charcoal for body text. #87CEEB can be effectively used for headings or larger display text on light backgrounds.

Accessibility notes

  • Ensure strong contrast for all text, especially when using lighter shades on #E0F2F4; prefer dark text.
  • Prioritize using #87CEEB for important text elements to meet WCAG AA standards against very light backgrounds.
  • Consider larger font sizes for text elements rendered in lighter palette colors to improve legibility.
  • Test interactive elements to ensure clear visual feedback, even with subtle color shifts within the palette.

Recommended combinations

Serene Blue

Creates a harmonious and calming blue gradient, suitable for content blocks or visual storytelling.

#87CEEB · #A2D4D8 · #B2DFEE

Ethereal Light

Perfect for clean, spacious layouts and minimalist designs where subtlety and lightness are key.

#E0F2F4 · #C4E0E2 · #B2DFEE

Gentle Contrast

Provides gentle contrast for readability, ideal for backgrounds with soft text or iconography.

#87CEEB · #E0F2F4 · #A2D4D8

CSS variables

:root {
  --misty-lagoon-serene-2-1: #A2D4D8;
  --misty-lagoon-serene-2-2: #C4E0E2;
  --misty-lagoon-serene-2-3: #E0F2F4;
  --misty-lagoon-serene-2-4: #B2DFEE;
  --misty-lagoon-serene-2-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-lagoon-serene-2": {
        1: "#A2D4D8",
        2: "#C4E0E2",
        3: "#E0F2F4",
        4: "#B2DFEE",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

light blue color paletteserene lagoon colorscalm water schemetranquil UI bluesethereal design palette

Palette colors

Hex values

Color 1#A2D4D8
·
Color 2#C4E0E2
·
Color 3#E0F2F4
·
Color 4#B2DFEE
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.1:1Fail
1.1:1Fail
2
1.2:1Fail
1.2:1Fail
1:1Fail
1.3:1Fail
3
1.4:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.1:1Fail
1:1Fail
1.2:1Fail
1.2:1Fail
5
1.1:1Fail
1.3:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Misty Lagoon Serene

View all Cool
Alpine Lake Dawn
Arctic Glacier Melt
Lagoon Glow
Muted Ocean Depth
Sea Spray Ocean
Serene Waterfall Mist