Palette

Zen Garden Pebble

Serene, understated tones reflecting the quiet harmony of a meticulously crafted Zen garden.

neutralcalm5 colors

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

#E8E9E4#D5D8D0#B0B6AA#8B958B#4A524A

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette offers a serene collection of understated green-grey tones, perfect for creating a calm and harmonious digital experience. With shades ranging from the light and airy #E8E9E4 to the deep, grounding #4A524A, this palette provides a balanced foundation for minimalist designs. Developers and designers can leverage its natural feel, using #B0B6AA as a versatile primary hue and #D5D8D0 for subtle background variations. The palette evokes quiet harmony, making it ideal for projects that aim for tranquility and subtle sophistication without being overtly colorful.

Best used for

Minimalist UI design for wellness apps
Branding for eco-conscious products
Serene website themes and landing pages
Architectural visualization and interior design concepts
Content platforms focused on mindfulness or nature
Subtle corporate identity systems

Suggested color roles

primary

Use #B0B6AA as the main color for interactive elements, primary buttons, or key headings to convey a balanced and natural feel.

secondary

Apply #D5D8D0 for supporting elements, secondary backgrounds, or subtle dividers, providing gentle visual separation.

accent

Incorporate #8B958B for subtle accents, progress bars, or icons that require a touch more depth without being overly bold.

background

Utilize #E8E9E4 as a clean, light background for expansive areas, offering an airy and inviting canvas.

text

The darkest shade, #4A524A, provides excellent contrast for body text and critical information, ensuring readability across all elements.

Accessibility notes

Ensure #4A524A text on #E8E9E4 backgrounds meets AA or AAA contrast standards for optimal readability.
Use #B0B6AA for larger text or headings on lighter backgrounds like #D5D8D0 to maintain good contrast.
Avoid placing light grey text on light grey backgrounds; always test contrast ratios.
Consider using a slightly darker charcoal or black for very small text elements if #4A524A doesn't suffice for specific contexts.

Recommended combinations

Clean & Readable

Ideal for primary content areas: light background, balanced heading, dark body text.

#E8E9E4 · #B0B6AA · #4A524A

Subtle Depth

Use for secondary content blocks or cards, offering a gentle layered appearance.

#D5D8D0 · #8B958B · #4A524A

Monochromatic Focus

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

#B0B6AA · #4A524A · #E8E9E4

CSS variables

:root {
  --zen-garden-pebble-4-1: #E8E9E4;
  --zen-garden-pebble-4-2: #D5D8D0;
  --zen-garden-pebble-4-3: #B0B6AA;
  --zen-garden-pebble-4-4: #8B958B;
  --zen-garden-pebble-4-5: #4A524A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble-4": {
        1: "#E8E9E4",
        2: "#D5D8D0",
        3: "#B0B6AA",
        4: "#8B958B",
        5: "#4A524A",
      }
    }
  }
}

Hex values

Color 1#E8E9E4

Color 2#D5D8D0

Color 3#B0B6AA

Color 4#8B958B

Color 5#4A524A

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.5:1Fail

6.6:1AA

1.2:1Fail

1.4:1Fail

2.2:1Fail

5.6:1AA

1.7:1Fail

1.4:1Fail

1.5:1Fail

3.9:1AA18

2.5:1Fail

2.2:1Fail

1.5:1Fail

2.6:1Fail

6.6:1AA

5.6:1AA

3.9:1AA18

2.6:1Fail

Similar palettes

More like Zen Garden Pebble

Mindful Stone Serenity