Palette

Zen Garden Pebble

A tranquil range of greys, inspired by the smooth, natural elements of a serene Japanese garden.

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

#5A5C5E#838587#AEB0B2#DCDCDC#424446

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette (zen-garden-pebble-2) offers a tranquil range of cool grays, reflecting the smooth, natural elements of a serene Japanese garden. From the very light #DCDCDC to the deep, grounding charcoal #424446, with balanced mid-tones like #AEB0B2, #838587, and #5A5C5E, this palette is perfect for creating minimalist, calm, and sophisticated designs. Designers will find these exact hex codes ideal for establishing a professional yet peaceful aesthetic in web interfaces, branding, or architectural visualizations. It provides a versatile foundation for projects seeking clarity, structure, and understated elegance.

Best used for

Minimalist corporate branding
Modern architectural visualization
High-end technology UI/UX
Photography and art gallery websites
Serene digital experience design
Professional report and presentation templates

Suggested color roles

primary

#5A5C5E - A deep, balanced charcoal gray, ideal for main headings, prominent UI elements, or strong content blocks that ground the design.

secondary

#838587 - A versatile medium gray, perfect for supporting content, secondary navigation, or subtle dividers.

accent

#424446 - The darkest, most impactful charcoal, excellent for calls-to-action, important icons, or strong textual emphasis, offering maximum contrast.

background

#DCDCDC - The lightest shade, providing a clean, bright, and expansive canvas that enhances readability and promotes an airy feel.

text

#5A5C5E - A dark gray, highly suitable for body text on lighter backgrounds like #DCDCDC or #AEB0B2, offering excellent readability. For darker text, use #424446.

Accessibility notes

Ensure #5A5C5E text on #DCDCDC backgrounds meets WCAG AAA contrast standards for readability.
The darkest color, #424446, provides excellent contrast against all lighter shades, making it ideal for critical information.
Avoid using #AEB0B2 and #DCDCDC for text against each other due to insufficient contrast; reserve them for backgrounds or subtle UI elements.
For interactive elements, use #424446 or #5A5C5E to ensure clear visibility and affordance.

Recommended combinations

Deep Contrast

A strong, professional combination for web layouts, with #DCDCDC as the background, #5A5C5E for text, and #424446 for headings or buttons.

#DCDCDC · #5A5C5E · #424446

Layered Grays

Ideal for creating subtle visual hierarchy in UI components like cards or panels, using progressive shades of gray.

#AEB0B2 · #838587 · #5A5C5E

Clean & Calm

Excellent for subtle background gradients or sectioning content, providing an understated and serene visual flow.

#DCDCDC · #AEB0B2 · #838587

CSS variables

:root {
  --zen-garden-pebble-2-1: #5A5C5E;
  --zen-garden-pebble-2-2: #838587;
  --zen-garden-pebble-2-3: #AEB0B2;
  --zen-garden-pebble-2-4: #DCDCDC;
  --zen-garden-pebble-2-5: #424446;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble-2": {
        1: "#5A5C5E",
        2: "#838587",
        3: "#AEB0B2",
        4: "#DCDCDC",
        5: "#424446",
      }
    }
  }
}

Hex values

Color 1#5A5C5E

Color 2#838587

Color 3#AEB0B2

Color 4#DCDCDC

Color 5#424446

Accessibility

Contrast checker

1.8:1Fail

3.1:1AA18

4.9:1AA

1.5:1Fail

1.8:1Fail

1.7:1Fail

2.7:1Fail

2.6:1Fail

3.1:1AA18

1.7:1Fail

1.6:1Fail

4.5:1AA18