Palette

Misty Lagoon Dream

Soft blues and muted purples evoke the tranquil and ethereal beauty of a misty lagoon at dawn.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0C4DE#87CEFA#ADD8E6#E0FFFF#6A5ACD

Palette guide

How to use Misty Lagoon Dream

Overview

The Misty Lagoon Dream palette is a captivating blend of soft blues and muted purples, evoking the tranquil and ethereal beauty of a misty lagoon at dawn. With enchanting shades like #B0C4DE, the clear #87CEFA, and the deep #6A5ACD, this palette offers a dreamy and imaginative aesthetic. It’s perfect for designs that aim to convey creativity, serenity, and a touch of fantasy. Designers will find its harmonious blend ideal for crafting immersive digital experiences and captivating visual narratives, while developers can appreciate the distinct yet complementary colors for building engaging and visually appealing interfaces. This palette truly inspires a sense of wonder.

Best used for

Creative portfolios and artistic websites
Fantasy-themed digital illustrations
Children's brands and educational apps
Wellness and relaxation platforms
Dreamy fashion and beauty campaigns
Serene digital interfaces

Suggested color roles

primary

Utilize #6A5ACD as a deep, enchanting primary color for headers, important calls to action, or brand logos, conveying sophistication.

secondary

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

accent

Introduce #ADD8E6 as a light, playful accent for interactive elements, highlights, or graphic details to add a touch of whimsy.

background

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

text

For body text, use #6A5ACD or a dark blue/charcoal for optimal readability against lighter backgrounds. #87CEFA can be used for larger headings.

Accessibility notes

Ensure strong contrast between #6A5ACD and #E0FFFF for all text to meet WCAG AA standards.
Be cautious when placing lighter shades like #ADD8E6 on #B0C4DE for small text due to potential low contrast.
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 Dream

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

#6A5ACD · #B0C4DE · #87CEFA

Lagoon Light

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

#E0FFFF · #ADD8E6 · #87CEFA

Vibrant Accent

A balanced trio for strong visual hierarchy, perfect for text on background with a vibrant accent.

#6A5ACD · #E0FFFF · #B0C4DE

CSS variables

:root {
  --misty-lagoon-dream-1: #B0C4DE;
  --misty-lagoon-dream-2: #87CEFA;
  --misty-lagoon-dream-3: #ADD8E6;
  --misty-lagoon-dream-4: #E0FFFF;
  --misty-lagoon-dream-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-lagoon-dream": {
        1: "#B0C4DE",
        2: "#87CEFA",
        3: "#ADD8E6",
        4: "#E0FFFF",
        5: "#6A5ACD",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#87CEFA

Color 3#ADD8E6

Color 4#E0FFFF

Color 5#6A5ACD

Accessibility

Contrast checker

1:1Fail

1.2:1Fail

1.7:1Fail

3:1Fail

1:1Fail

1.1:1Fail

1.6:1Fail

3.1:1AA18

1.2:1Fail

1.1:1Fail

1.4:1Fail

3.5:1AA18

1.7:1Fail

1.6:1Fail

1.4:1Fail

5:1AA

3:1Fail

3.1:1AA18

3.5:1AA18

5:1AA

Similar palettes

More like Misty Lagoon Dream

View all cool

Celestial Oasis Dream