Back to palettes

Palette

Calm Stone Pathway

Soft, tranquil grays and beiges reflecting the simplicity and peace of a Japanese stone garden.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Calm Stone Pathway 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 Stone Pathway.

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

Data visualization

#BCB8B1#DCD9D5#8E8A84#6C6863#E8E6E3

Palette guide

How to use Calm Stone Pathway

Overview

The Calm Stone Pathway palette offers soft, tranquil grays and beiges, reflecting the peace and simplicity of a Japanese stone garden. This sophisticated collection features a warm grey #BCB8B1, a lighter beige-grey #DCD9D5, and a deeper greige #8E8A84. The darkest shade, #6C6863, provides a strong anchor, while #E8E6E3 serves as an ethereal, nearly white background. Designers and developers can utilize these versatile neutrals to create elegant, minimalist, and serene digital environments or brand identities that exude understated luxury and calm.

Best used for

  • Luxury spa and wellness branding
  • Minimalist interior design websites
  • High-end product packaging
  • Serene web and app interfaces
  • Editorial photography backdrops
  • Natural beauty and skincare brands

Suggested color roles

primary

Use #BCB8B1 (warm grey) as an inviting and balanced base for main content sections.

secondary

Employ #8E8A84 (deeper greige) for grounding elements, subheadings, or subtle dividers.

accent

Apply #6C6863 (dark grey-brown) as a strong accent for important calls to action or key textual elements.

background

Utilize #E8E6E3 (light beige-grey) as a soft, expansive background, creating an airy and clean canvas.

text

Use #6C6863 (dark grey-brown) for optimal readability, especially against the lighter background tones.

Accessibility notes

  • Ensure #6C6863 text on #E8E6E3 background meets WCAG AA contrast standards for readability.
  • Lighter shades like #DCD9D5 and #BCB8B1 are best for backgrounds or large UI elements, not small text.
  • For interactive elements, use #8E8A84 or #6C6863 to clearly indicate clickability against lighter backgrounds.
  • Avoid using #DCD9D5 or #E8E6E3 for text unless it's very large, decorative type due to low contrast.

Recommended combinations

Zen Foundation

Creates clean, sophisticated layouts with excellent readability, ideal for professional websites.

#E8E6E3 · #BCB8B1 · #6C6863

Subtle Depth

Perfect for elegant branding, background textures, or to add gentle visual interest without harsh contrasts.

#DCD9D5 · #8E8A84 · #BCB8B1

Pathway Contrast

Effective for headlines, call-to-action buttons, or elements requiring a strong, clear visual presence.

#6C6863 · #E8E6E3 · #8E8A84

CSS variables

:root {
  --calm-stone-pathway-1: #BCB8B1;
  --calm-stone-pathway-2: #DCD9D5;
  --calm-stone-pathway-3: #8E8A84;
  --calm-stone-pathway-4: #6C6863;
  --calm-stone-pathway-5: #E8E6E3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "calm-stone-pathway": {
        1: "#BCB8B1",
        2: "#DCD9D5",
        3: "#8E8A84",
        4: "#6C6863",
        5: "#E8E6E3",
      }
    }
  }
}

Related searches

tranquil neutral palettesoft grey beige colorsminimalist zen aestheticstone garden color schemecalm elegant design

Palette colors

Hex values

Color 1#BCB8B1
·
Color 2#DCD9D5
·
Color 3#8E8A84
·
Color 4#6C6863
·
Color 5#E8E6E3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.7:1Fail
2.8:1Fail
1.6:1Fail
2
1.4:1Fail
2.4:1Fail
3.9:1AA18
1.1:1Fail
3
1.7:1Fail
2.4:1Fail
1.6:1Fail
2.8:1Fail
4
2.8:1Fail
3.9:1AA18
1.6:1Fail
4.4:1AA18
5
1.6:1Fail
1.1:1Fail
2.8:1Fail
4.4:1AA18

Similar palettes

More like Calm Stone Pathway

View all neutral
Smooth Pebble Gradient
Stone Garden Zen
Tranquil Pebble Path
Zen Pebble Garden
Zen Sandstone Calm
Minimalist Zen Calm