Palette

Calm Pebble Path

The quiet simplicity of a Japanese garden, inviting peaceful contemplation among smooth stones.

Neutralminimal5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Calm Pebble Path 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 Calm Pebble Path.

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

Data visualization

#A9A9A9#8B4513#8FBC8F#F8F8F8#36454F

Palette guide

How to use Calm Pebble Path

Overview

The Calm Pebble Path palette evokes the tranquil simplicity of a Japanese garden, perfect for creating serene digital and physical spaces. This neutral collection features grounding tones like a sophisticated grey, #A9A9A9, alongside the rich, earthy brown of #8B4513. A soft sage green, #8FBC8F, introduces a touch of nature, while the off-white #F8F8F8 provides an airy, clean base. Finally, #36454F, a deep charcoal, offers excellent readability and depth. Designers and developers can leverage this palette to craft minimalist, contemplative experiences that prioritize peace and clarity.

Best used for

Meditation and wellness apps
Minimalist branding and websites
Spa and holistic retreat designs
Eco-friendly product packaging
Serene interior design mood boards
Calm educational platforms

Suggested color roles

primary

Use #A9A9A9 (mid-tone grey) as a balanced, sophisticated foundation for main sections or large UI elements.

secondary

Employ #8B4513 (earthy brown) for grounding accents, navigation elements, or rich content blocks.

accent

Introduce #8FBC8F (soft sage green) sparingly for natural touches, icons, or subtle highlights.

background

Utilize #F8F8F8 (off-white) as a clean, airy background, providing ample breathing room for content.

text

Apply #36454F (dark charcoal) for all primary text to ensure optimal readability against lighter backgrounds.

Accessibility notes

Ensure #36454F text on #F8F8F8 background meets WCAG AA contrast standards for readability.
Avoid using #A9A9A9 for small text on #F8F8F8; reserve it for larger headings or decorative elements.
When using #8B4513 for text, ensure it's on a light background like #F8F8F8 for sufficient contrast.
Lighter colors like #8FBC8F should be used for large graphical elements or backgrounds, not small text.

Recommended combinations

Zen Harmony

Ideal for clean, minimalist layouts, providing excellent contrast and a sophisticated feel.

#F8F8F8 · #A9A9A9 · #36454F

Earthy Balance

Perfect for natural product designs, organic themes, or creating a grounded, eco-conscious aesthetic.

#8B4513 · #F8F8F8 · #8FBC8F

Subtle Contrast

Great for sophisticated branding, corporate reports, or UI elements requiring clear visual hierarchy.

#36454F · #A9A9A9 · #8B4513

CSS variables

:root {
  --calm-pebble-path-1: #A9A9A9;
  --calm-pebble-path-2: #8B4513;
  --calm-pebble-path-3: #8FBC8F;
  --calm-pebble-path-4: #F8F8F8;
  --calm-pebble-path-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "calm-pebble-path": {
        1: "#A9A9A9",
        2: "#8B4513",
        3: "#8FBC8F",
        4: "#F8F8F8",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#8B4513

Color 3#8FBC8F

Color 4#F8F8F8

Color 5#36454F

Accessibility

Contrast checker

3:1AA18

1.1:1Fail

2.2:1Fail

4.2:1AA18

3:1AA18

3.3:1AA18

6.7:1AA

1.4:1Fail

1.1:1Fail

3.3:1AA18

2:1Fail

4.6:1AA

2.2:1Fail

6.7:1AA

2:1Fail

9.3:1AAA

4.2:1AA18

1.4:1Fail

4.6:1AA

9.3:1AAA

Similar palettes

More like Calm Pebble Path