Palette

Serene Lake Mist

Tranquil and cool hues reflecting a placid lake, gently shrouded in an early morning mist.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serene Lake Mist 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 Serene Lake Mist.

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

Data visualization

#F0FFFF#AFEEEE#7FFFD4#40E0D0#20B2AA

Palette guide

How to use Serene Lake Mist

Overview

The Serene Lake Mist palette reflects a placid lake, gently shrouded in an early morning mist, through its tranquil and cool hues. Ranging from the almost white #F0FFFF to the deep, grounding #20B2AA, and featuring refreshing aquas like #AFEEEE and #7FFFD4, this palette is inherently soothing and airy. It's an ideal choice for designers aiming to create serene, fresh, and minimalist visual experiences. Developers can leverage these harmonious cool tones for applications related to meditation, environmental themes, or any digital space where a gentle, clean, and refreshing aesthetic is desired, promoting a sense of calm and clarity.

Best used for

Meditation and mindfulness apps
Eco-conscious product design
Spa and wellness retreats branding
Winter or misty landscape photography
Minimalist web interfaces
Gentle baby product packaging

Suggested color roles

primary

#40E0D0 - A vibrant yet serene aqua, perfect for establishing a fresh and inviting brand presence.

secondary

#7FFFD4 - A lighter, luminous aqua for subheadings, active states, or supporting graphic elements.

accent

#AFEEEE - A soft, pale aqua that provides a gentle highlight, ideal for subtle interactive cues or dividers.

background

#F0FFFF - A very light, almost white tone (azure), ideal for clean, airy, and expansive backgrounds.

text

#20B2AA for primary text on light backgrounds, or a soft charcoal for text on mid-tones for readability.

Accessibility notes

Ensure sufficient contrast when using #AFEEEE for text against #F0FFFF; it may require larger font sizes.
#20B2AA offers excellent contrast for text on #F0FFFF, ensuring readability.
Avoid using #7FFFD4 on #AFEEEE for small text due to potential low contrast.
For interactive elements, ensure hover/focus states maintain contrast guidelines, possibly by darkening the color.

Recommended combinations

Misty Morning

A crisp, high-contrast pairing for clean headers or minimalist UI with a vibrant aqua accent.

#F0FFFF · #20B2AA · #40E0D0

Aqua Haze

Smooth, ethereal gradient for backgrounds or layered UI elements, evoking a soft, watery transition.

#AFEEEE · #7FFFD4 · #40E0D0

Deep Mist

A grounding dark background with a very light accent, balanced by a luminous mid-tone for content.

#20B2AA · #F0FFFF · #7FFFD4

CSS variables

:root {
  --serene-lake-mist-1: #F0FFFF;
  --serene-lake-mist-2: #AFEEEE;
  --serene-lake-mist-3: #7FFFD4;
  --serene-lake-mist-4: #40E0D0;
  --serene-lake-mist-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-lake-mist": {
        1: "#F0FFFF",
        2: "#AFEEEE",
        3: "#7FFFD4",
        4: "#40E0D0",
        5: "#20B2AA",
      }
    }
  }
}

Hex values

Color 1#F0FFFF

Color 2#AFEEEE

Color 3#7FFFD4

Color 4#40E0D0

Color 5#20B2AA

Accessibility

Contrast checker

1.3:1Fail

1.2:1Fail

1.6:1Fail

2.6:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

2:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

2.1:1Fail

1.6:1Fail

1.3:1Fail

1.6:1Fail

2.6:1Fail

2:1Fail

2.1:1Fail

1.6:1Fail

Similar palettes

More like Serene Lake Mist

Serene Lake Mist

See it in context.

Ready when you are.

Built with Serene Lake Mist.

How to use Serene Lake Mist

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Morning

Aqua Haze

Deep Mist

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Serene Lake Mist