Palette

Zen Garden Pond

Muted, watery greens and greys creating a tranquil reflection of a serene, carefully tended pond.

CoolMinimal5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1D2D2D#374F4F#5D7A7A#85A3A3#B1C4C4

Palette guide

How to use Zen Garden Pond

Overview

The Zen Garden Pond palette offers a deeply tranquil and reflective aesthetic, drawing inspiration from serene water features. This cool-toned collection features muted greens and greys, perfect for creating calm digital environments. Key colors include the deep, grounding #1D2D2D and the soft, ethereal #B1C4C4. Designers will find its subtle variations, like the mid-tone #5D7A7A, excellent for establishing depth without harsh contrasts. Developers can leverage these precise hex codes to ensure consistent visual harmony across interfaces, promoting a sense of peace and contemplative quiet. This palette is ideal for projects requiring a sophisticated, understated elegance.

Best used for

Spa and wellness app interfaces
Minimalist website designs
Yoga studio branding
Luxury home decor e-commerce
Nature-themed educational content
Digital journaling applications

Suggested color roles

primary

#374F4F - A balanced, deep teal-grey, excellent for main navigation elements or large content blocks, conveying stability.

secondary

#5D7A7A - A versatile mid-tone, perfect for subheadings, secondary buttons, or background panels, offering visual relief.

accent

#85A3A3 - A lighter, airy tone that can be used sparingly for interactive elements or subtle highlight features to draw attention gently.

background

#B1C4C4 - A very light, almost white, cool grey, ideal for spacious main backgrounds, promoting a sense of openness and calm.

text

#1D2D2D - The darkest shade provides excellent contrast for primary body text against lighter backgrounds, ensuring readability.

Accessibility notes

Ensure sufficient contrast when using #85A3A3 for text against #B1C4C4 backgrounds; consider larger font sizes.
#1D2D2D on #B1C4C4 offers strong contrast, suitable for all body text.
Avoid using #85A3A3 text directly on #5D7A7A without careful contrast checking.
Use a tool to verify WCAG AA compliance for all text and interactive element contrasts.

Recommended combinations

Deep Calm

For high-contrast, elegant layouts in headers or footers.

#1D2D2D · #374F4F · #B1C4C4

Misty Water

Soft, harmonious blend for content areas or subtle card backgrounds.

#5D7A7A · #85A3A3 · #B1C4C4

Reflective Surface

Creates depth and sophistication for layered UI components.

#374F4F · #5D7A7A · #1D2D2D

CSS variables

:root {
  --zen-garden-pond-1: #1D2D2D;
  --zen-garden-pond-2: #374F4F;
  --zen-garden-pond-3: #5D7A7A;
  --zen-garden-pond-4: #85A3A3;
  --zen-garden-pond-5: #B1C4C4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pond": {
        1: "#1D2D2D",
        2: "#374F4F",
        3: "#5D7A7A",
        4: "#85A3A3",
        5: "#B1C4C4",
      }
    }
  }
}

Hex values

Color 1#1D2D2D

Color 2#374F4F

Color 3#5D7A7A

Color 4#85A3A3

Color 5#B1C4C4

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

5.3:1AA

7.9:1AAA

1.6:1Fail

1.9:1Fail

3.2:1AA18

4.8:1AA

3.1:1AA18

1.9:1Fail

1.7:1Fail

2.6:1Fail

5.3:1AA

3.2:1AA18

1.7:1Fail

1.5:1Fail

7.9:1AAA

4.8:1AA

2.6:1Fail

1.5:1Fail

Similar palettes

More like Zen Garden Pond

View all Cool

Frosted Juniper Berries

Arctic Fox Camouflage