Palette

Zen Garden Pebble

A harmonious blend of muted tones, inspired by the serene and balanced elements of a Japanese Zen garden.

earthcalm5 colors

More earth 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

#BDB76B#F5DEB3#D2B48C#A9A9A9#708090

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette is a harmonious blend of muted earth tones, inspired by the serene and balanced elements of a Japanese Zen garden. Featuring shades like the subtly golden #BDB76B and the soft, warm beige #F5DEB3, alongside the cool grounding of #708090, this palette creates a tranquil and natural aesthetic. Developers and designers can leverage #D2B48C as a versatile primary color, offering warmth and stability, making it ideal for projects that aim to evoke a sense of calm, balance, and natural elegance.

Best used for

Natural product packaging and branding
Artisanal craft websites and portfolios
Spa and relaxation service digital presence
Traditional or rustic-chic interior design visuals
Content platforms focused on mindfulness or slow living
Earthy, sophisticated e-commerce themes

Suggested color roles

primary

Utilize #D2B48C for primary calls to action, main headings, or key UI elements, providing a warm and grounding presence.

secondary

Apply #BDB76B for subtle accents, subheadings, or decorative elements, adding a touch of muted golden warmth.

accent

Incorporate #A9A9A9 for neutral accents, borders, or icons, providing balance and a modern touch.

background

The soft and inviting #F5DEB3 serves as an excellent background, creating a warm, approachable canvas.

text

The cool slate gray, #708090, offers good contrast for body text and critical information, ensuring clear readability against warmer tones.

Accessibility notes

Ensure #708090 text on #F5DEB3 backgrounds meets WCAG AA contrast standards for optimal legibility.
Be cautious when using #BDB76B or #D2B48C for small text on #F5DEB3, as contrast might be insufficient.
Always test interactive elements to ensure they are easily distinguishable.
For very small or fine print, consider a darker charcoal or black if #708090 doesn't provide enough contrast on the lightest shades.

Recommended combinations

Warm & Grounded

Ideal for main content: warm background, inviting headings, legible cool-gray text.

#F5DEB3 · #D2B48C · #708090

Balanced Harmony

Create subtle visual interest with a mix of warm and neutral tones for secondary elements.

#BDB76B · #A9A9A9 · #D2B48C

Sophisticated Contrast

Highlight key sections with a warm dominant color, dark text, and a soft background.

#D2B48C · #708090 · #F5DEB3

CSS variables

:root {
  --zen-garden-pebble-1: #BDB76B;
  --zen-garden-pebble-2: #F5DEB3;
  --zen-garden-pebble-3: #D2B48C;
  --zen-garden-pebble-4: #A9A9A9;
  --zen-garden-pebble-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble": {
        1: "#BDB76B",
        2: "#F5DEB3",
        3: "#D2B48C",
        4: "#A9A9A9",
        5: "#708090",
      }
    }
  }
}

Hex values

Color 1#BDB76B

Color 2#F5DEB3

Color 3#D2B48C

Color 4#A9A9A9

Color 5#708090

Accessibility

Contrast checker

1.6:1Fail

1:1Fail

1.1:1Fail

2:1Fail

1.6:1Fail

1.5:1Fail

1.8:1Fail

3.1:1AA18

1:1Fail

1.5:1Fail

1.2:1Fail

2.1:1Fail

1.1:1Fail

1.8:1Fail

1.2:1Fail

1.7:1Fail

2:1Fail

3.1:1AA18

2.1:1Fail

1.7:1Fail

Similar palettes

More like Zen Garden Pebble

View all earth

Clay Desert Rose

Enchanted Garden Gate

Matcha Tea Ceremony

Matcha Tea Zen

Misty Forest Clearing

Whispering Cypress Grove