Palette

Misty Lagoon

A soothing progression of misty blues and grays, like a serene lagoon shrouded in soft fog.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9EB8D6#B1C6DC#C2D6EA#D5E1EF#E7EEF7

Palette guide

How to use Misty Lagoon

Overview

The Misty Lagoon palette offers a soothing monochrome progression of blues and grays, perfect for designs that aim to convey serenity and clarity. With shades ranging from the deeper '#9EB8D6' to the ethereal '#E7EEF7', and including the balanced '#B1C6DC' and '#C2D6EA', this palette evokes the peaceful calm of a fog-shrouded lagoon. It's a highly versatile choice for designers and developers seeking to establish a clean, professional, yet deeply tranquil aesthetic. The consistent blue-gray tones, such as '#D5E1EF', ensure harmonious transitions and a cohesive user experience, making it suitable for corporate, wellness, or technology-focused applications requiring a gentle touch.

Best used for

Corporate and financial services UI
Luxury spa and wellness platforms
Educational and knowledge base portals
Cloud computing service dashboards
Medical and healthcare applications
Minimalist branding and websites

Suggested color roles

primary

Utilize '#9EB8D6' as the core color for primary buttons, important headings, or key graphical elements.

secondary

Apply '#B1C6DC' for supporting information, secondary navigation, or subtle background sections.

accent

Use '#D5E1EF' for delicate highlights, hover states, or subtle UI indicators that require a gentle touch.

background

Employ '#E7EEF7' as the main background color to provide an expansive, clean, and airy base.

text

For optimal readability, use '#9EB8D6' or a dark charcoal for body text against the lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between text and background, particularly for '#9EB8D6' on '#E7EEF7'.
Avoid using '#D5E1EF' or '#C2D6EA' for small text, as contrast may be insufficient.
Provide clear focus indicators for interactive elements to aid navigation.
Test across various screen types and lighting conditions to ensure consistent readability.

Recommended combinations

Deep Blue Calm

Creates a cohesive, deep blue aesthetic suitable for main content blocks or prominent features.

#9EB8D6 · #B1C6DC · #C2D6EA

Light & Airy

Perfect for clean, open layouts and backgrounds where a sense of space and lightness is desired.

#E7EEF7 · #D5E1EF · #B1C6DC

Gradient Flow

Excellent for creating smooth visual transitions or subtle background gradients in modern interfaces.

#B1C6DC · #C2D6EA · #D5E1EF

CSS variables

:root {
  --misty-lagoon-1: #9EB8D6;
  --misty-lagoon-2: #B1C6DC;
  --misty-lagoon-3: #C2D6EA;
  --misty-lagoon-4: #D5E1EF;
  --misty-lagoon-5: #E7EEF7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-lagoon": {
        1: "#9EB8D6",
        2: "#B1C6DC",
        3: "#C2D6EA",
        4: "#D5E1EF",
        5: "#E7EEF7",
      }
    }
  }
}

Hex values

Color 1#9EB8D6

Color 2#B1C6DC

Color 3#C2D6EA

Color 4#D5E1EF

Color 5#E7EEF7

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.5:1Fail

1.7:1Fail

1.2:1Fail

1.3:1Fail

1.5:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.3:1Fail

1.1:1Fail

1.7:1Fail

1.5:1Fail

1.3:1Fail

1.1:1Fail

Similar palettes

More like Misty Lagoon

Misty Lagoon

See it in context.

Ready when you are.

Built with Misty Lagoon.

How to use Misty Lagoon

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Blue Calm

Light & Airy

Gradient Flow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Misty Lagoon