Back to palettes

Palette

Zen Pebble Garden

A serene grayscale palette inspired by the tranquil arrangement of smooth pebbles in a minimalist Zen garden.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8F8F8F#B8B8B8#D8D8D8#EEEEEE#6C6C6C

Palette guide

How to use Zen Pebble Garden

Overview

The Zen Pebble Garden palette presents a serene grayscale collection, inspired by the tranquil arrangement of smooth pebbles in a minimalist Zen garden. This palette, featuring #8F8F8F, #B8B8B8, #D8D8D8, #EEEEEE, and #6C6C6C, offers a calm and sophisticated foundation for any design project. Developers and designers can leverage these harmonious shades to create minimalist graphic design, architectural visualizations, or calm web interfaces. The subtle tonal variations allow for nuanced depth and a sense of quiet contemplation, making it ideal for conveying understated elegance and a peaceful, uncluttered aesthetic across various media.

Best used for

  • Minimalist graphic design and branding
  • Architectural visualization and renders
  • Calm web interfaces and user experiences
  • Photography backdrops and portfolios
  • Luxury product presentations and packaging
  • Editorial layouts for sophisticated content

Suggested color roles

primary

Use #6C6C6C for strong headings, primary UI elements, or important calls to action, providing a solid, grounding presence.

secondary

Apply #8F8F8F for supporting text, subtle borders, or secondary graphic elements, offering a gentle yet clear distinction.

accent

Utilize #D8D8D8 for light highlights, hover states, or subtle background textures, adding a touch of understated brilliance.

background

Employ #EEEEEE as a very light grey background, creating a clean, expansive, and airy canvas that promotes focus.

text

For subheadings on darker backgrounds, use #B8B8B8. For main body text on #EEEEEE, a dark charcoal or black is recommended for readability.

Accessibility notes

  • Ensure sufficient contrast for #6C6C6C text on #EEEEEE background to meet WCAG AA standards for readability.
  • Colors like #B8B8B8 and #D8D8D8 will have very low contrast for small text on #EEEEEE; use for large decorative elements.
  • When using #6C6C6C as a background, ensure text (e.g., #D8D8D8 or #EEEEEE) provides sufficient contrast.
  • Avoid pairing #8F8F8F with #B8B8B8 for body text, as contrast will likely be insufficient for comfortable reading.

Recommended combinations

Pebble Layers

Creates a subtle, clean background with depth for modern designs, ideal for layered card components or sections.

#EEEEEE · #D8D8D8 · #B8B8B8

Deep Stone

Use #6C6C6C for prominent text, #8F8F8F for secondary, and #D8D8D8 for highlights, for a structured yet serene design.

#6C6C6C · #8F8F8F · #D8D8D8

Minimal Contrast

Pair #6C6C6C for primary text on #EEEEEE, with #8F8F8F for secondary information, maintaining a clean and readable aesthetic.

#EEEEEE · #6C6C6C · #8F8F8F

CSS variables

:root {
  --zen-pebble-garden-1: #8F8F8F;
  --zen-pebble-garden-2: #B8B8B8;
  --zen-pebble-garden-3: #D8D8D8;
  --zen-pebble-garden-4: #EEEEEE;
  --zen-pebble-garden-5: #6C6C6C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-pebble-garden": {
        1: "#8F8F8F",
        2: "#B8B8B8",
        3: "#D8D8D8",
        4: "#EEEEEE",
        5: "#6C6C6C",
      }
    }
  }
}

Related searches

zen grey color schememinimalist pebble palettecalm grayscale UIstone inspired designserene neutral colors

Palette colors

Hex values

Color 1#8F8F8F
·
Color 2#B8B8B8
·
Color 3#D8D8D8
·
Color 4#EEEEEE
·
Color 5#6C6C6C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
2.8:1Fail
1.6:1Fail
2
1.6:1Fail
1.4:1Fail
1.7:1Fail
2.6:1Fail
3
2.3:1Fail
1.4:1Fail
1.2:1Fail
3.7:1AA18
4
2.8:1Fail
1.7:1Fail
1.2:1Fail
4.5:1AA
5
1.6:1Fail
2.6:1Fail
3.7:1AA18
4.5:1AA

Similar palettes

More like Zen Pebble Garden

View all neutral
Calm Stone Pathway
Smooth Pebble Gradient
Stone Garden Zen
Tranquil Pebble Path
Zen Sandstone Calm
Minimalist Zen Calm