Back to palettes

Palette

Zen Garden Pebbles

Serene and balanced, these muted grey-browns reflect the tranquil stillness of raked garden pebbles.

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

#CDC9C0#B0AC9B#959286#7C7A6E#64625A

Palette guide

How to use Zen Garden Pebbles

Overview

The Zen Garden Pebbles palette offers a serene and balanced collection of muted grey-browns, reflecting the tranquil stillness of raked garden pebbles. Ranging from the light #CDC9C0 to the deep, grounding #64625A, this monochrome palette is perfect for creating digital experiences that exude calm and natural elegance. Developers and designers can leverage #B0AC9B as a versatile primary hue, providing a warm yet neutral anchor, while #959286 adds subtle depth. This collection is ideal for projects that seek to convey a sense of natural authenticity, quiet sophistication, and meditative peace.

Best used for

  • Eco-conscious and sustainable brand identities
  • Minimalist product design and packaging
  • Historical preservation or cultural institution websites
  • Natural material showcase platforms
  • Meditative and mindfulness application interfaces
  • Organic food and beverage branding

Suggested color roles

primary

Utilize #B0AC9B for primary interactive elements, main headings, or key UI components, providing a warm and stable presence.

secondary

Apply #CDC9C0 for supportive UI elements, subtle background sections, or borders, offering a gentle, light layer.

accent

Incorporate #959286 for subtle accents, hover states, or icons that need a stronger, yet still muted, visual emphasis.

background

The lightest shade, #CDC9C0, serves as a soft, inviting background, creating an expansive and calm canvas.

text

The darkest shade, #64625A, provides excellent contrast for body text and critical information, ensuring strong readability.

Accessibility notes

  • Text in #64625A on #CDC9C0 provides good contrast; verify it meets WCAG AA standards for all text sizes.
  • Be cautious when using #B0AC9B for small text on #CDC9C0, as contrast may be insufficient.
  • Ensure interactive elements are clearly distinguishable through color and visual cues.
  • For very small print or legal text, consider a darker charcoal if #64625A doesn't provide enough contrast on the lightest shades.

Recommended combinations

Natural Contrast

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

#CDC9C0 · #B0AC9B · #64625A

Subtle Gradients

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

#B0AC9B · #959286 · #7C7A6E

Grounded Focus

Highlight key information with a dominant mid-tone, dark text, and a light surrounding element.

#959286 · #64625A · #CDC9C0

CSS variables

:root {
  --zen-garden-pebbles-2-1: #CDC9C0;
  --zen-garden-pebbles-2-2: #B0AC9B;
  --zen-garden-pebbles-2-3: #959286;
  --zen-garden-pebbles-2-4: #7C7A6E;
  --zen-garden-pebbles-2-5: #64625A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebbles-2": {
        1: "#CDC9C0",
        2: "#B0AC9B",
        3: "#959286",
        4: "#7C7A6E",
        5: "#64625A",
      }
    }
  }
}

Related searches

warm grey brown palettezen stone colorsearthy minimalist schemenatural neutral uicalm monochrome browns

Palette colors

Hex values

Color 1#CDC9C0
·
Color 2#B0AC9B
·
Color 3#959286
·
Color 4#7C7A6E
·
Color 5#64625A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
2.6:1Fail
3.7:1AA18
2
1.4:1Fail
1.4:1Fail
1.9:1Fail
2.7:1Fail
3
1.9:1Fail
1.4:1Fail
1.4:1Fail
2:1Fail
4
2.6:1Fail
1.9:1Fail
1.4:1Fail
1.4:1Fail
5
3.7:1AA18
2.7:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Zen Garden Pebbles

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