Palette

Tranquil Lake Mist

The soft, calming shades of a quiet lake on a misty, early morning.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#556270#8797AB#B8C4D1#DFE4E8

Palette guide

How to use Tranquil Lake Mist

Overview

The Tranquil Lake Mist palette offers a sophisticated range of cool greys and muted blues, capturing the serene atmosphere of a misty morning by the lake. With shades from the deep #36454F to the soft #DFE4E8, including #556270, #8797AB, and #B8C4D1, this palette is ideal for designers and developers seeking a calm, minimalist, and elegant aesthetic. Its understated nature makes it highly versatile for corporate, luxury, or wellness-focused projects that require a sense of quiet professionalism and modern sophistication. These cool neutrals provide a solid foundation for clean layouts and timeless designs.

Best used for

Corporate websites and professional services branding
Luxury product packaging and marketing materials
Modern minimalist interior design concepts
High-end tech or software interfaces
Photography portfolios and art gallery websites
Wellness and mindfulness app design

Suggested color roles

primary

Assign #36454F as the primary color for strong headers, footers, or foundational elements. Its dark, cool tone provides gravitas.

secondary

Utilize #556270 for secondary content, subheadings, or background panels. It offers a softer depth, maintaining visual continuity.

accent

Employ #8797AB for subtle accents, interactive elements, or graphic details. This mid-tone adds character without being overtly bright.

background

Designate #DFE4E8 as the main background color. Its very light, almost white quality ensures excellent contrast for darker text.

text

For optimal readability on light backgrounds like #DFE4E8, use #36454F or #556270. On darker backgrounds, #DFE4E8 or a crisp white offers clear legibility.

Accessibility notes

Ensure sufficient contrast between #36454F or #556270 text and lighter backgrounds like #B8C4D1 or #DFE4E8.
Avoid pairing #DFE4E8 text directly with #B8C4D1 background without checking WCAG AA contrast ratios.
Use #DFE4E8 for critical information text only on sufficiently dark backgrounds like #36454F.
For body text, stick to the darkest colors on the lightest backgrounds to maximize readability.

Recommended combinations

Misty Foundation

Classic contrast for professional interfaces: dark text on light background, with a soft grey accent.

#36454F · #DFE4E8 · #8797AB

Gentle Transition

Ideal for subtle gradients, overlays, or layered UI elements, creating depth without harshness.

#556270 · #B8C4D1 · #DFE4E8

Reflective Surface

Use the lighter greys for cards or panels, with the darkest for clear, readable headings or icons.

#8797AB · #B8C4D1 · #36454F

CSS variables

:root {
  --tranquil-lake-mist-1: #36454F;
  --tranquil-lake-mist-2: #556270;
  --tranquil-lake-mist-3: #8797AB;
  --tranquil-lake-mist-4: #B8C4D1;
  --tranquil-lake-mist-5: #DFE4E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-lake-mist": {
        1: "#36454F",
        2: "#556270",
        3: "#8797AB",
        4: "#B8C4D1",
        5: "#DFE4E8",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#556270

Color 3#8797AB

Color 4#B8C4D1

Color 5#DFE4E8

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

5.6:1AA

7.7:1AAA

1.6:1Fail

2.1:1Fail

3.5:1AA18

4.9:1AA

3.3:1AA18

2.1:1Fail

1.7:1Fail

2.3:1Fail

5.6:1AA

3.5:1AA18

1.7:1Fail

1.4:1Fail

7.7:1AAA

4.9:1AA

2.3:1Fail

1.4:1Fail

Similar palettes

More like Tranquil Lake Mist

Alpine Lake Reflection

Alpine Lake Shimmer