Palette

Misty Lagoon Echo

A calming, ethereal palette that mirrors the soft, veiled tones of a misty, hidden lagoon.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7E9B9A#A4C0BF#D0E0E0#638180#B9D3D2

Palette guide

How to use Misty Lagoon Echo

Overview

The Misty Lagoon Echo palette offers a calming, ethereal blend of cool grey-greens, mirroring the soft, veiled tones of a hidden lagoon. With shades like the deep #638180, the supportive #7E9B9A, and the airy #D0E0E0, this palette evokes a sense of tranquility and natural harmony. It's ideal for designs that aim to convey eco-friendliness, serenity, and understated elegance. Designers will find its muted tones excellent for crafting peaceful user interfaces and organic branding. Developers can leverage its cohesive range for building robust and visually appealing digital experiences that maintain a consistent, soothing aesthetic. This palette truly promotes a calm and grounded user experience.

Best used for

Eco-friendly and sustainable brand identity
Spa and wellness retreat websites
Minimalist interior design concepts
Nature photography showcases
Calm and informative UI designs
Organic product packaging

Suggested color roles

primary

Use #638180 as a deep, grounding primary color for headers, important calls to action, or brand logos, conveying stability.

secondary

Apply #7E9B9A for supportive elements like subheadings or navigation, maintaining a cool and cohesive feel.

accent

Introduce #A4C0BF for subtle highlights, borders, or inactive states, adding gentle visual interest without disruption.

background

Utilize #D0E0E0 as a light, airy background color, providing a clean canvas that enhances readability and the overall sense of tranquility.

text

For body text, use #638180 or a dark charcoal to ensure excellent readability against lighter backgrounds. #7E9B9A can also work for headings.

Accessibility notes

Ensure sufficient contrast between #638180 and #D0E0E0 for all text to meet WCAG AA standards.
Be cautious when placing lighter shades like #B9D3D2 on #D0E0E0 for small text; reserve for larger elements or decorative purposes.
Provide clear visual cues for interactive elements and focus states using distinct color changes.
Test color pairings across different devices to ensure consistent legibility and aesthetic appeal.

Recommended combinations

Deep Echo

Ideal for creating a strong, immersive visual, suitable for hero sections or impactful content blocks.

#638180 · #7E9B9A · #A4C0BF

Lagoon Mist

Excellent for spacious layouts, content backgrounds, or subtle UI elements requiring softness.

#D0E0E0 · #B9D3D2 · #A4C0BF

Balanced Calm

A balanced trio for strong visual hierarchy, perfect for text on background with a supportive element.

#638180 · #D0E0E0 · #7E9B9A

CSS variables

:root {
  --misty-lagoon-echo-1: #7E9B9A;
  --misty-lagoon-echo-2: #A4C0BF;
  --misty-lagoon-echo-3: #D0E0E0;
  --misty-lagoon-echo-4: #638180;
  --misty-lagoon-echo-5: #B9D3D2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-lagoon-echo": {
        1: "#7E9B9A",
        2: "#A4C0BF",
        3: "#D0E0E0",
        4: "#638180",
        5: "#B9D3D2",
      }
    }
  }
}

Hex values

Color 1#7E9B9A

Color 2#A4C0BF

Color 3#D0E0E0

Color 4#638180

Color 5#B9D3D2

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

1.4:1Fail

1.9:1Fail

1.5:1Fail

1.4:1Fail

2.2:1Fail

1.2:1Fail

2.2:1Fail

1.4:1Fail

3.1:1AA18

1.2:1Fail

1.4:1Fail

2.2:1Fail

3.1:1AA18

2.7:1Fail

1.9:1Fail

1.2:1Fail

2.7:1Fail

Similar palettes

More like Misty Lagoon Echo

Misty Lagoon Echo

See it in context.

Ready when you are.

Built with Misty Lagoon Echo.

How to use Misty Lagoon Echo

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Echo

Lagoon Mist

Balanced Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Misty Lagoon Echo