Palette

Zen Garden Pebble

Soft, muted greens and greys inspired by smooth river stones and raked sand in a peaceful Zen garden.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#506764#7B9691#C7D4D0#EDF3F2#3E514E

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette features soft, muted greens and greys, inspired by smooth river stones and raked sand in a peaceful Zen garden. This collection, ranging from the delicate #EDF3F2 to the deep, grounding #3E514E, creates a tranquil and natural aesthetic. Developers and designers can effectively use #7B9691 as a calming primary color, while #C7D4D0 offers a light, airy backdrop. This palette is ideal for projects that seek to evoke serenity, natural harmony, and a meditative mood, perfect for eco-friendly or wellness-focused applications.

Best used for

Eco-friendly brand identity and packaging
Wellness and meditation application interfaces
Nature-inspired website themes and blogs
Sustainable fashion or home goods e-commerce
Environmental non-profit digital presence
Relaxation and mindfulness content platforms

Suggested color roles

primary

Utilize #7B9691 for main calls to action, primary navigation, or prominent headings, conveying a sense of calm and nature.

secondary

Apply #C7D4D0 for supporting elements, subtle borders, or secondary backgrounds, providing a soft, unobtrusive layer.

accent

Incorporate #506764 for subtle accents, interactive elements, or icons that require a touch more grounding and depth.

background

The lightest shade, #EDF3F2, offers a clean, almost off-white background, creating an expansive and fresh canvas.

text

The darkest shade, #3E514E, ensures excellent contrast for body text and critical information, promoting clear legibility.

Accessibility notes

Text in #3E514E on #EDF3F2 provides strong contrast, meeting WCAG AA standards.
Be mindful of contrast when using #C7D4D0 for text on #EDF3F2; it may not be sufficient for small fonts.
Ensure interactive elements are clearly distinguishable through color and visual cues.
For very small print or legal text, consider a darker charcoal if #3E514E doesn't provide enough contrast on the lightest shades.

Recommended combinations

Nature's Calm

Perfect for main content: light, airy background, calming headings, dark readable text.

#EDF3F2 · #7B9691 · #3E514E

Subtle Earth Tones

Use for secondary content blocks or layered sections, creating a harmonious and organic feel.

#C7D4D0 · #506764 · #EDF3F2

Grounded Focus

Highlight key information with a dominant mid-tone, dark text, and a light supporting element.

#7B9691 · #3E514E · #C7D4D0

CSS variables

:root {
  --zen-garden-pebble-9-1: #506764;
  --zen-garden-pebble-9-2: #7B9691;
  --zen-garden-pebble-9-3: #C7D4D0;
  --zen-garden-pebble-9-4: #EDF3F2;
  --zen-garden-pebble-9-5: #3E514E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble-9": {
        1: "#506764",
        2: "#7B9691",
        3: "#C7D4D0",
        4: "#EDF3F2",
        5: "#3E514E",
      }
    }
  }
}

Hex values

Color 1#506764

Color 2#7B9691

Color 3#C7D4D0

Color 4#EDF3F2

Color 5#3E514E

Accessibility

Contrast checker

1.9:1Fail

4:1AA18

5.4:1AA

1.4:1Fail

1.9:1Fail

2.1:1Fail

2.8:1Fail

2.7:1Fail

4:1AA18

2.1:1Fail

1.4:1Fail

5.5:1AA

5.4:1AA

2.8:1Fail

1.4:1Fail

7.5:1AAA

1.4:1Fail

2.7:1Fail

5.5:1AA

7.5:1AAA

Similar palettes

More like Zen Garden Pebble

Zen Garden Pebble

See it in context.

Ready when you are.

Built with Zen Garden Pebble.

How to use Zen Garden Pebble

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Nature's Calm

Subtle Earth Tones

Grounded Focus

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Zen Garden Pebble