Back to palettes

Palette

Zen Garden Pebble

A serene palette inspired by the ordered simplicity of a Zen garden, promoting tranquility and balance.

neutralcalm5 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

#D8D8D8#A8A8A8#616154#C7B9A3#F0E8D7

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette (zen-garden-pebble-10) offers a serene and balanced collection of neutral tones, drawing inspiration from the ordered simplicity of a Zen garden. Featuring cool grays like #D8D8D8 and #A8A8A8, complemented by warm, earthy tones such as the light beige #F0E8D7 and the subtle stone brown #C7B9A3, this palette promotes tranquility. The unique deep olive-gray #616154 provides an excellent anchor. Designers will find these exact hex codes perfect for creating minimalist, elegant, and calming digital or physical designs, from web interfaces to branding, ensuring a harmonious and grounded aesthetic.

Best used for

  • Minimalist web design and app interfaces
  • Eco-friendly and natural product branding
  • Spa or wellness center marketing materials
  • Interior design visualizations for serene spaces
  • Artistic portfolios with an earthy, calm aesthetic
  • Packaging for artisan goods

Suggested color roles

primary

#A8A8A8 - A balanced medium gray, ideal for main content blocks, headings, or primary UI elements, providing a stable foundation.

secondary

#C7B9A3 - A warm, muted stone beige, perfect for supporting content, secondary backgrounds, or subtle accents that add warmth.

accent

#616154 - A deep, earthy olive-gray, excellent for strong calls-to-action, important icons, or prominent textual emphasis.

background

#F0E8D7 - The lightest, warmest shade, providing a gentle, inviting canvas that enhances readability and promotes an airy feel.

text

#A8A8A8 - A versatile medium gray, suitable for body text on lighter backgrounds like #F0E8D7, offering good readability. For darker text, use #616154.

Accessibility notes

  • Ensure #A8A8A8 text on #F0E8D7 backgrounds meets WCAG AA contrast standards for body text.
  • The darkest color, #616154, provides strong contrast against #F0E8D7, making it suitable for critical information and interactive elements.
  • Avoid using #D8D8D8 and #F0E8D7 for text against each other due to insufficient contrast; reserve them for backgrounds or subtle UI elements.
  • For interactive elements, ensure sufficient contrast and clear visual cues when using #C7B9A3 or #A8A8A8.

Recommended combinations

Warm Stone

Ideal for a soft, inviting website background with #F0E8D7, content blocks in #C7B9A3, and subtle text in #A8A8A8.

#F0E8D7 · #C7B9A3 · #A8A8A8

Pebble Contrast

Use #D8D8D8 as a clean card background, #616154 for a strong heading or button, and #A8A8A8 for supporting text.

#D8D8D8 · #616154 · #A8A8A8

Earthy Layers

Excellent for creating a sense of depth in layered UI components or for a natural brand identity, moving from light to dark.

#C7B9A3 · #A8A8A8 · #616154

CSS variables

:root {
  --zen-garden-pebble-10-1: #D8D8D8;
  --zen-garden-pebble-10-2: #A8A8A8;
  --zen-garden-pebble-10-3: #616154;
  --zen-garden-pebble-10-4: #C7B9A3;
  --zen-garden-pebble-10-5: #F0E8D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble-10": {
        1: "#D8D8D8",
        2: "#A8A8A8",
        3: "#616154",
        4: "#C7B9A3",
        5: "#F0E8D7",
      }
    }
  }
}

Related searches

zen pebble color schemecalm neutral earth tonesminimalist stone palettenatural beige gray colorsserene web design neutrals

Palette colors

Hex values

Color 1#D8D8D8
·
Color 2#A8A8A8
·
Color 3#616154
·
Color 4#C7B9A3
·
Color 5#F0E8D7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
4.4:1AA18
1.4:1Fail
1.2:1Fail
2
1.7:1Fail
2.6:1Fail
1.2:1Fail
2:1Fail
3
4.4:1AA18
2.6:1Fail
3.3:1AA18
5.1:1AA
4
1.4:1Fail
1.2:1Fail
3.3:1AA18
1.6:1Fail
5
1.2:1Fail
2:1Fail
5.1:1AA
1.6:1Fail

Similar palettes

More like Zen Garden Pebble

View all neutral
Zen Garden Calm
Zen Garden Ryoanji
Zen Garden Stone
Mindful Stone Serenity
Serene Pebble Path
Zen Garden Calm