Palette

Zen Garden Pebble

A peaceful range of cool greys, inspired by the smooth, calming 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

#4F5B62#707C80#97A5AA#BECDCA#E2E8E6

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette offers a peaceful range of cool grays with subtle blue undertones, inspired by smooth, calming pebbles. This palette, featuring shades from the light and airy #E2E8E6 to the deep, grounding #4F5B62, is perfect for creating serene and sophisticated digital environments. Developers and designers can leverage #97A5AA as a versatile primary color, bringing a sense of calm elegance, while #BECDCA provides a soft, supportive backdrop. Its cool, tranquil nature makes it ideal for projects aiming for a modern, clean, and refreshing aesthetic.

Best used for

Spa and wellness brand identity
Healthcare platform interfaces
Modern tech dashboards and analytics tools
Serene home decor e-commerce sites
Educational content platforms requiring a calm focus
Nature-inspired digital art and photography

Suggested color roles

primary

Use #97A5AA for primary calls to action, important headings, or key UI components to convey a balanced and inviting feel.

secondary

Apply #BECDCA for secondary elements, subtle dividers, or backgrounds of content cards, providing a gentle visual break.

accent

Incorporate #707C80 for subtle accents, progress indicators, or icons that need a touch more depth and cool grounding.

background

Utilize #E2E8E6 as a clean, light background for expansive areas, offering an airy and refreshing canvas.

text

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

Accessibility notes

Ensure #4F5B62 text on #E2E8E6 backgrounds meets AA or AAA contrast standards for optimal legibility.
Be mindful of contrast when using #BECDCA for text on #E2E8E6; it may not be sufficient for small fonts.
Always test interactive elements (buttons, links) to ensure they are easily perceivable.
For very small or fine print, consider a true black if #4F5B62 on the lightest shades doesn't provide enough contrast.

Recommended combinations

Cool & Crisp

Ideal for main content areas: light background, balanced headings, dark body text for clarity.

#E2E8E6 · #97A5AA · #4F5B62

Subtle Transition

Use for secondary content blocks or layered UI elements, offering smooth visual flow.

#BECDCA · #707C80 · #E2E8E6

Deep Focus

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

#97A5AA · #4F5B62 · #BECDCA

CSS variables

:root {
  --zen-garden-pebble-7-1: #4F5B62;
  --zen-garden-pebble-7-2: #707C80;
  --zen-garden-pebble-7-3: #97A5AA;
  --zen-garden-pebble-7-4: #BECDCA;
  --zen-garden-pebble-7-5: #E2E8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble-7": {
        1: "#4F5B62",
        2: "#707C80",
        3: "#97A5AA",
        4: "#BECDCA",
        5: "#E2E8E6",
      }
    }
  }
}

Hex values

Color 1#4F5B62

Color 2#707C80

Color 3#97A5AA

Color 4#BECDCA

Color 5#E2E8E6

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

4.3:1AA18

5.6:1AA

1.6:1Fail

1.7:1Fail

2.6:1Fail

3.5:1AA18

2.8:1Fail

1.7:1Fail

1.5:1Fail

2:1Fail

4.3:1AA18

2.6:1Fail

1.5:1Fail

1.3:1Fail

5.6:1AA

3.5:1AA18

2:1Fail

1.3:1Fail

Similar palettes

More like Zen Garden Pebble

Smooth Pebble Gradient

Stone Garden Zen

Tranquil Pebble Path