Back to palettes

Palette

Zen Garden Pebbles

A soothing, understated selection reflecting the smooth, natural hues of pebbles in a peaceful 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 Pebbles 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 Pebbles.

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

Data visualization

#4D4E4E#7A7C7C#A0A2A2#CACBCB#DCDDDD

Palette guide

How to use Zen Garden Pebbles

Overview

The Zen Garden Pebbles palette offers a soothing, understated selection reflecting the smooth, natural hues of pebbles in a peaceful Zen garden. This cool gray collection, ranging from the very light #DCDDDD to the deep, impactful #4D4E4E, provides a sleek and modern foundation for any design project. Developers and designers can leverage #7A7C7C as a strong, balanced primary color, grounding the interface, while #A0A2A2 offers a lighter, supportive tone. This palette is ideal for creating minimalist, professional, and tranquil digital experiences that prioritize clarity and refined aesthetics.

Best used for

  • Modern tech interfaces and corporate branding
  • Architectural firm websites and presentations
  • Luxury automotive digital experiences
  • Minimalist fashion e-commerce platforms
  • Professional services requiring a clean, serious aesthetic
  • High-end product showcases and portfolios

Suggested color roles

primary

Utilize #7A7C7C for primary calls to action, main headings, or key UI components, providing a strong and balanced presence.

secondary

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

accent

Incorporate #4D4E4E for deep, impactful accents, hover states, or icons that require a strong visual emphasis.

background

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

text

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

Accessibility notes

  • Text in #4D4E4E on #DCDDDD offers excellent contrast, exceeding WCAG AA standards.
  • Ensure sufficient contrast for interactive elements using #7A7C7C or #A0A2A2 against their backgrounds.
  • Avoid using #CACBCB for small text on #DCDDDD, as contrast might be insufficient.
  • Always test legibility for all text sizes and interactive states.

Recommended combinations

Modern Clarity

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

#DCDDDD · #A0A2A2 · #4D4E4E

Layered Depth

Create smooth visual transitions and depth within content blocks or layered UI elements.

#CACBCB · #7A7C7C · #A0A2A2

Strong Foundation

Focus on a strong mid-tone with deep text and light support for a bold, stable look.

#7A7C7C · #4D4E4E · #DCDDDD

CSS variables

:root {
  --zen-garden-pebbles-3-1: #4D4E4E;
  --zen-garden-pebbles-3-2: #7A7C7C;
  --zen-garden-pebbles-3-3: #A0A2A2;
  --zen-garden-pebbles-3-4: #CACBCB;
  --zen-garden-pebbles-3-5: #DCDDDD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebbles-3": {
        1: "#4D4E4E",
        2: "#7A7C7C",
        3: "#A0A2A2",
        4: "#CACBCB",
        5: "#DCDDDD",
      }
    }
  }
}

Related searches

cool grey minimalist palettemodern neutral greyzen dark grey schemeprofessional ui colorssleek monochrome grey

Palette colors

Hex values

Color 1#4D4E4E
·
Color 2#7A7C7C
·
Color 3#A0A2A2
·
Color 4#CACBCB
·
Color 5#DCDDDD
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.3:1AA18
5.1:1AA
6.1:1AA
2
2:1Fail
1.6:1Fail
2.6:1Fail
3.1:1AA18
3
3.3:1AA18
1.6:1Fail
1.6:1Fail
1.9:1Fail
4
5.1:1AA
2.6:1Fail
1.6:1Fail
1.2:1Fail
5
6.1:1AA
3.1:1AA18
1.9:1Fail
1.2:1Fail

Similar palettes

More like Zen Garden Pebbles

View all neutral
Cloud Forest Mist
Coastal Driftwood Grey
Coastal Pebble Beach
Coastal Seagrass Sway
Gentle River Stones
Highlands Fog Hike