Back to palettes

Palette

Zen Garden Pebble

A serene collection of grays, mirroring the tranquil simplicity of raked pebbles in a Zen garden.

neutralminimal5 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

#A2A2A2#BFBFBF#DCDCDC#E8E8E8#7F7F7F

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette presents a tranquil collection of pure grays, embodying minimalist sophistication. Ranging from the almost white #E8E8E8 to the balanced medium gray #7F7F7F, this palette offers a clean, modern foundation for any project. Designers can leverage these shades to create interfaces that are both understated and highly functional, using #A2A2A2 as a versatile primary color and #DCDCDC for elegant backdrops. Its serene nature makes it perfect for conveying professionalism, luxury, or a sense of quiet strength without relying on vibrant hues.

Best used for

  • High-tech product interfaces and dashboards
  • Luxury brand identity and packaging
  • Modern corporate websites and presentations
  • Photography portfolios and art gallery layouts
  • Minimalist e-commerce platforms
  • Sleek mobile application designs

Suggested color roles

primary

Employ #A2A2A2 as a central color for main navigation, active states, or prominent graphical elements, offering a strong yet neutral presence.

secondary

Utilize #BFBFBF for supporting information, subheadings, or secondary buttons, providing a softer contrast.

accent

Apply #7F7F7F sparingly for subtle highlights, borders, or icons where a slightly darker tone is needed to draw attention.

background

The lightest shade, #E8E8E8, creates a clean, bright, and expansive canvas for backgrounds, enhancing content visibility.

text

For optimal readability, use #7F7F7F for body text and critical information, ensuring clear contrast against lighter backgrounds.

Accessibility notes

  • Text in #7F7F7F on #E8E8E8 provides good contrast; ensure it meets WCAG AA standards.
  • Be cautious when placing #A2A2A2 text on #DCDCDC backgrounds, as contrast may be borderline for smaller fonts.
  • Always test contrast for interactive elements to ensure they are easily distinguishable.
  • Consider a true black for very small or fine print text if #7F7F7F doesn't provide enough contrast on the lightest shades.

Recommended combinations

Crisp Contrast

A classic setup for clear readability: light background, mid-tone headings, dark body text.

#E8E8E8 · #A2A2A2 · #7F7F7F

Soft Layers

Create subtle visual hierarchy and depth within content blocks or card designs.

#DCDCDC · #BFBFBF · #A2A2A2

Focused Accent

Use a darker accent on a lighter base to draw attention to specific UI elements.

#BFBFBF · #7F7F7F · #E8E8E8

CSS variables

:root {
  --zen-garden-pebble-5-1: #A2A2A2;
  --zen-garden-pebble-5-2: #BFBFBF;
  --zen-garden-pebble-5-3: #DCDCDC;
  --zen-garden-pebble-5-4: #E8E8E8;
  --zen-garden-pebble-5-5: #7F7F7F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble-5": {
        1: "#A2A2A2",
        2: "#BFBFBF",
        3: "#DCDCDC",
        4: "#E8E8E8",
        5: "#7F7F7F",
      }
    }
  }
}

Related searches

minimalist gray palettezen gray colorsmodern neutral schemeserene monochromatic grayselegant ui gray

Palette colors

Hex values

Color 1#A2A2A2
·
Color 2#BFBFBF
·
Color 3#DCDCDC
·
Color 4#E8E8E8
·
Color 5#7F7F7F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
2.1:1Fail
1.6:1Fail
2
1.4:1Fail
1.3:1Fail
1.5:1Fail
2.2:1Fail
3
1.9:1Fail
1.3:1Fail
1.1:1Fail
2.9:1Fail
4
2.1:1Fail
1.5:1Fail
1.1:1Fail
3.3:1AA18
5
1.6:1Fail
2.2:1Fail
2.9:1Fail
3.3:1AA18

Similar palettes

More like Zen Garden Pebble

View all neutral
Zen Garden
Zen Garden Pebble
Zen Garden Stillness
Zen Pebble Garden
Zen Stone Garden
Calm Stone Pathway