Back to palettes

Palette

Zen Garden Pebble

Subtle shades of grey, reflecting the smooth, calming presence of river stones in a zen 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

#DCDCDC#C0C0C0#A9A9A9#808080#696969

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette offers a sophisticated range of subtle grays, evoking the smooth, calming presence of river stones. With shades from the soft #DCDCDC to the deep, grounding #696969, this monochrome palette is ideal for designs requiring understated elegance and a strong sense of calm. Developers and designers can utilize #A9A9A9 as a versatile primary tone, providing a balanced visual anchor, while #808080 can add depth to interactive elements. This collection is perfect for creating professional, minimalist interfaces that prioritize clarity and refined aesthetics.

Best used for

  • Professional service websites and corporate branding
  • Architectural and interior design portfolios
  • Sophisticated mobile application interfaces
  • Art gallery and museum digital experiences
  • High-end fashion or luxury product showcases
  • Minimalist editorial layouts

Suggested color roles

primary

Assign #A9A9A9 for primary buttons, navigation links, or section headings, providing a solid yet unobtrusive presence.

secondary

Use #C0C0C0 for secondary UI elements, borders, or subtle background variations to add gentle layering.

accent

Apply #808080 for subtle accents, hover states, or icons that need a slightly stronger visual weight without being overpowering.

background

The light and neutral #DCDCDC serves as an excellent background, offering a clean canvas that enhances content.

text

The darkest shade, #696969, ensures optimal readability for body text and important information, providing clear contrast.

Accessibility notes

  • Text in #696969 on #DCDCDC offers good contrast; verify it meets WCAG AA standards for all text sizes.
  • Ensure interactive elements using #A9A9A9 or #C0C0C0 have sufficient contrast against their backgrounds.
  • Avoid using #C0C0C0 for small text on #DCDCDC as contrast might be insufficient.
  • For critical alerts or tiny text, consider a pure black if #696969 doesn't provide enough contrast on lighter shades.

Recommended combinations

Classic Readability

A timeless combination for main content: light background, mid-tone headings, dark body text.

#DCDCDC · #A9A9A9 · #696969

Layered Sophistication

Ideal for cards, secondary navigation, or subtle content sections requiring depth.

#C0C0C0 · #808080 · #DCDCDC

Strong Visual Anchor

Use a dominant mid-gray with dark text and a light surround for focused information blocks.

#A9A9A9 · #696969 · #DCDCDC

CSS variables

:root {
  --zen-garden-pebble-6-1: #DCDCDC;
  --zen-garden-pebble-6-2: #C0C0C0;
  --zen-garden-pebble-6-3: #A9A9A9;
  --zen-garden-pebble-6-4: #808080;
  --zen-garden-pebble-6-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble-6": {
        1: "#DCDCDC",
        2: "#C0C0C0",
        3: "#A9A9A9",
        4: "#808080",
        5: "#696969",
      }
    }
  }
}

Related searches

stone grey color palettedark zen gray schememinimalist grey uiprofessional neutral colorsserene dark greys

Palette colors

Hex values

Color 1#DCDCDC
·
Color 2#C0C0C0
·
Color 3#A9A9A9
·
Color 4#808080
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.9:1Fail
4:1AA18
2
1.3:1Fail
1.3:1Fail
2.2:1Fail
3:1AA18
3
1.7:1Fail
1.3:1Fail
1.7:1Fail
2.3:1Fail
4
2.9:1Fail
2.2:1Fail
1.7:1Fail
1.4:1Fail
5
4:1AA18
3:1AA18
2.3:1Fail
1.4:1Fail

Similar palettes

More like Zen Garden Pebble

View all monochrome
Tranquil Stone Path
Zen Stone Garden
Calm Stone Meditate
Quiet Pebble Stream
Zen Garden Stone
Zen Garden Stone