Palette

Monsoon Lake Calm

Quiet blues and greens mirror the still surface of a lake during a gentle monsoon, reflecting a misty, tranquil sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monsoon Lake Calm 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 Monsoon Lake Calm.

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

Data visualization

#5A7A8A#8DA4B8#4A6F5A#B4C8D8#6F8090

Palette guide

How to use Monsoon Lake Calm

Overview

The Monsoon Lake Calm palette offers a tranquil blend of muted blues and greens, perfectly mirroring the still surface of a lake during a gentle monsoon. With core colors like the calming #5A7A8A and the grounding #4A6F5A, this palette evokes a profound sense of peace and quiet. The lighter #8DA4B8 and #B4C8D8 introduce an ethereal, misty sky quality, ideal for serene designs. Designers will find this collection excellent for conveying tranquility, contemplation, and natural harmony. Developers can leverage these hex codes to create soothing, minimalist interfaces for meditation apps, wellness retreats, or luxury travel platforms, ensuring a truly calm user experience.

Best used for

Meditation and mindfulness app interfaces
Wellness retreats and spa branding
Serene home decor and interior design
Luxury travel and experiential tourism
Contemplative art and photography displays
Minimalist website and app design

Suggested color roles

primary

Use #5A7A8A as the calming, stable anchor for branding, main navigation, or impactful headings.

secondary

Apply #4A6F5A for supportive content, subheadings, or illustrations, offering an earthy green complement.

accent

Highlight interactive elements, subtle details, or secondary text with #8DA4B8, providing a soft focal point.

background

The lightest #B4C8D8 serves as an excellent, expansive background, allowing darker elements to stand out beautifully.

text

For dark text on light backgrounds, #5A7A8A or #6F8090 offer good readability. For light text on darks, a light grey or near-white works well.

Accessibility notes

The contrast between #5A7A8A text and #B4C8D8 background is decent for body text, but larger sizes are recommended.
Avoid using #8DA4B8 or #6F8090 for small text on #B4C8D8 due to potential low contrast, impacting readability.
For critical information, use the darkest color, #4A6F5A, on the lightest, #B4C8D8, for maximum visibility.
Ensure sufficient contrast for interactive elements; consider a slightly brighter hue for focus states if needed.

Recommended combinations

Misty Waters

Creates a serene, layered effect of blues, ideal for backgrounds or header sections.

#5A7A8A · #8DA4B8 · #B4C8D8

Shoreline Greens

Combines earthy greens with blue-grey for grounding elements and natural accents.

#4A6F5A · #6F8090 · #5A7A8A

Calm Reflection

Provides a strong base with a light blue accent and an airy background for balanced tranquility.

#4A6F5A · #8DA4B8 · #B4C8D8

CSS variables

:root {
  --monsoon-lake-calm-1: #5A7A8A;
  --monsoon-lake-calm-2: #8DA4B8;
  --monsoon-lake-calm-3: #4A6F5A;
  --monsoon-lake-calm-4: #B4C8D8;
  --monsoon-lake-calm-5: #6F8090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monsoon-lake-calm": {
        1: "#5A7A8A",
        2: "#8DA4B8",
        3: "#4A6F5A",
        4: "#B4C8D8",
        5: "#6F8090",
      }
    }
  }
}

Hex values

Color 1#5A7A8A

Color 2#8DA4B8

Color 3#4A6F5A

Color 4#B4C8D8

Color 5#6F8090

Accessibility

Contrast checker

1.8:1Fail

1.2:1Fail

2.7:1Fail

1.1:1Fail

1.8:1Fail

2.2:1Fail

1.5:1Fail

1.6:1Fail

1.2:1Fail

2.2:1Fail

3.3:1AA18

1.4:1Fail

2.7:1Fail

1.5:1Fail

3.3:1AA18

2.4:1Fail

1.1:1Fail

1.6:1Fail

1.4:1Fail

2.4:1Fail

Similar palettes

More like Monsoon Lake Calm

Calm Lake Reflections