Back to palettes

Palette

Zen Garden Pebble

Simple, harmonious grays that evoke the tranquil artistry of a raked pebble garden.

monochromeminimal5 colors
More monochrome 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

#BCC2C1#E0E2E1#909493#636564#3B3C3B

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette presents a simple yet harmonious range of grays, designed to evoke the tranquil artistry of a raked pebble garden. With shades from the near-white #E0E2E1 to the deep, impactful #3B3C3B, this monochrome palette offers exceptional versatility for modern, minimalist designs. Developers and designers can leverage #909493 as a balanced primary color, grounding the interface, while #636564 adds subtle depth. This collection is perfect for creating sophisticated, clean, and highly readable digital experiences that prioritize clarity and timeless elegance.

Best used for

  • High-end minimalist branding and web design
  • Tech product interfaces requiring a sleek look
  • Luxury fashion e-commerce platforms
  • Architectural portfolios and design showcases
  • Photography websites emphasizing content
  • Professional services requiring a serious, refined aesthetic

Suggested color roles

primary

Utilize #909493 for primary interactive elements, main headings, or key graphical components, providing a solid and versatile foundation.

secondary

Apply #BCC2C1 for supportive UI elements, subtle background sections, or borders, offering a gentle visual separation.

accent

Incorporate #636564 for subtle accents, hover states, or icons that need a stronger, yet still muted, visual emphasis.

background

The lightest shade, #E0E2E1, serves as an incredibly clean and expansive background, enhancing all content placed upon it.

text

The darkest shade, #3B3C3B, provides optimal contrast for body text and critical information, ensuring superb readability.

Accessibility notes

  • Text in #3B3C3B on #E0E2E1 offers excellent contrast, exceeding WCAG AA standards.
  • Ensure sufficient contrast for interactive elements using #909493 or #BCC2C1 against their backgrounds.
  • Avoid using #BCC2C1 for small text on #E0E2E1, as contrast might be insufficient.
  • Always test legibility for all text sizes and interactive states.

Recommended combinations

High Contrast Clarity

A powerful combination for main content: bright background, clear headings, dark body text.

#E0E2E1 · #909493 · #3B3C3B

Subtle Layers

Create gentle depth and hierarchy within secondary content blocks or card designs.

#BCC2C1 · #636564 · #E0E2E1

Balanced Professionalism

Focus on a mid-tone with dark text and light support for a sophisticated, structured look.

#909493 · #3B3C3B · #BCC2C1

CSS variables

:root {
  --zen-garden-pebble-8-1: #BCC2C1;
  --zen-garden-pebble-8-2: #E0E2E1;
  --zen-garden-pebble-8-3: #909493;
  --zen-garden-pebble-8-4: #636564;
  --zen-garden-pebble-8-5: #3B3C3B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble-8": {
        1: "#BCC2C1",
        2: "#E0E2E1",
        3: "#909493",
        4: "#636564",
        5: "#3B3C3B",
      }
    }
  }
}

Related searches

monochrome gray paletteminimalist stone colorszen dark grey schemeelegant neutral uiprofessional grey branding

Palette colors

Hex values

Color 1#BCC2C1
·
Color 2#E0E2E1
·
Color 3#909493
·
Color 4#636564
·
Color 5#3B3C3B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.7:1Fail
3.3:1AA18
6.1:1AA
2
1.4:1Fail
2.4:1Fail
4.5:1AA
8.5:1AAA
3
1.7:1Fail
2.4:1Fail
1.9:1Fail
3.6:1AA18
4
3.3:1AA18
4.5:1AA
1.9:1Fail
1.9:1Fail
5
6.1:1AA
8.5:1AAA
3.6:1AA18
1.9:1Fail

Similar palettes

More like Zen Garden Pebble

View all monochrome
Minimalist Stone Garden
Zen Rock Garden
Zen Stone Garden
Calm Stone Meditate
Monochrome Stone Garden
Stone Garden Meditation