Back to palettes

Palette

Zen Pond Whisper

The tranquil, reflective surface of a serene pond in a peaceful Japanese garden.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Zen Pond Whisper 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 Zen Pond Whisper.

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

Data visualization

#5F9EA0#A2D9D9#77BABA#3A5C5C#CDE7E7

Palette guide

How to use Zen Pond Whisper

Overview

The Zen Pond Whisper palette evokes the tranquil, reflective surface of a serene pond, offering a soothing collection of cool, aquatic tones. Designers and developers will find this palette ideal for creating calm and harmonious digital experiences. Key colors include the gentle teal of `#5F9EA0`, the airy lightness of `#A2D9D9`, the balanced `#77BABA`, and the deep, grounding `#3A5C5C`. The palest shade, `#CDE7E7`, provides a clean foundation. This palette is excellent for projects aiming to convey peace, nature, and understated elegance, promoting a sense of well-being through its cohesive, cool-toned harmony.

Best used for

  • Spa and wellness branding
  • Meditation apps and websites
  • Eco-friendly product packaging
  • Serene interior design concepts
  • Nature-inspired digital interfaces
  • Calm educational content

Suggested color roles

primary

Use `#5F9EA0` as the main brand color, representing tranquility and depth for headings or primary buttons.

secondary

Employ `#77BABA` for sub-headings, secondary calls to action, or decorative elements to add gentle variation.

accent

Apply `#3A5C5C` sparingly for strong emphasis, small icons, or crucial interactive elements, offering a grounding contrast.

background

Utilize `#CDE7E7` as a clean, airy background for main content areas, promoting readability and a sense of space.

text

For body text, use a dark charcoal or black on light backgrounds. For text on darker backgrounds like `#3A5C5C`, use `#CDE7E7` for clear contrast.

Accessibility notes

  • Ensure sufficient contrast when using `#A2D9D9` or `#CDE7E7` as text on light backgrounds; consider a darker text color.
  • Text in `#3A5C5C` on `#CDE7E7` provides good readability, but always test against WCAG guidelines.
  • Interactive elements should have a clear visual state change, especially when using similar shades like `#5F9EA0` and `#77BABA`.
  • Avoid placing light text like `#A2D9D9` directly on `#77BABA` without checking contrast ratios.

Recommended combinations

Deep Tranquility

Ideal for header sections or hero images, with `#CDE7E7` as background, `#5F9EA0` for titles, and `#3A5C5C` for key details.

#CDE7E7 · #5F9EA0 · #3A5C5C

Light Reflection

Perfect for secondary informational panels or subtle graphical elements, creating a soft, layered effect.

#A2D9D9 · #77BABA · #5F9EA0

Pond Depths

Use `#3A5C5C` for a dominant element, with `#A2D9D9` for text and `#77BABA` for subtle highlights on darker interfaces.

#3A5C5C · #A2D9D9 · #77BABA

CSS variables

:root {
  --zen-pond-whisper-1: #5F9EA0;
  --zen-pond-whisper-2: #A2D9D9;
  --zen-pond-whisper-3: #77BABA;
  --zen-pond-whisper-4: #3A5C5C;
  --zen-pond-whisper-5: #CDE7E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-pond-whisper": {
        1: "#5F9EA0",
        2: "#A2D9D9",
        3: "#77BABA",
        4: "#3A5C5C",
        5: "#CDE7E7",
      }
    }
  }
}

Related searches

calm blue green palettetranquil water colorszen design schemesoothing teal and aquanature inspired cool tones

Palette colors

Hex values

Color 1#5F9EA0
·
Color 2#A2D9D9
·
Color 3#77BABA
·
Color 4#3A5C5C
·
Color 5#CDE7E7
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
1.4:1Fail
2.4:1Fail
2.4:1Fail
2
2:1Fail
1.4:1Fail
4.7:1AA
1.2:1Fail
3
1.4:1Fail
1.4:1Fail
3.3:1AA18
1.7:1Fail
4
2.4:1Fail
4.7:1AA
3.3:1AA18
5.6:1AA
5
2.4:1Fail
1.2:1Fail
1.7:1Fail
5.6:1AA

Similar palettes

More like Zen Pond Whisper

View all cool