Back to palettes

Palette

Zen Sandstone Calm

A harmonious selection of soft greys, inspired by the tranquil arrangements of sand and stone 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 Sandstone Calm 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 Sandstone Calm.

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

Data visualization

#D3D3D3#C0C0C0#808080#A9A9A9#BEBEBE

Palette guide

How to use Zen Sandstone Calm

Overview

The Zen Sandstone Calm palette offers a harmonious selection of soft greys, inspired by the tranquil arrangements of sand and stone in a Zen garden. This minimalist scheme features a range from the airy #D3D3D3 and #BEBEBE to the balanced #C0C0C0, #A9A9A9, and the grounding #808080. Designers can leverage these hex codes to craft sophisticated, uncluttered interfaces, refined branding, or elegant print materials that embody calm and focus. Its neutral, monochromatic nature provides a versatile foundation, perfect for projects seeking a serene, modern, and timeless aesthetic with understated elegance.

Best used for

  • Modern corporate websites
  • Luxury automotive branding
  • High-tech gadget interfaces
  • Architectural firm portfolios
  • Minimalist art exhibitions
  • Clean e-commerce platforms

Suggested color roles

primary

Use #C0C0C0 (Silver) for main content areas or large UI components to establish a balanced, neutral base.

secondary

Apply #BEBEBE (Light Grey) for supporting elements, cards, or subtle divisions, maintaining visual harmony.

accent

#808080 (Grey) serves as a strong, grounding accent for key interactive elements, icons, or important text.

background

#D3D3D3 (Light Grey) is excellent for clean, expansive backgrounds, promoting a sense of openness.

text

For optimal readability, use #808080 or a dark charcoal against the lighter shades like #D3D3D3 and #C0C0C0.

Accessibility notes

  • Ensure sufficient contrast for text; #808080 on #D3D3D3 or #C0C0C0 provides good readability.
  • Avoid using #D3D3D3 on #BEBEBE for small text due to their very low contrast.
  • #A9A9A9 can be used for secondary text on the lightest backgrounds, but always check contrast.
  • For interactive elements, ensure distinct visual cues, such as a subtle border or hover state, in addition to color.

Recommended combinations

Stone Layers

Ideal for creating layered background effects or card designs with clear textual contrast.

#D3D3D3 · #C0C0C0 · #808080

Grey Scale Depth

Perfect for building visual hierarchy in navigation or complex data displays with subtle shifts.

#C0C0C0 · #A9A9A9 · #BEBEBE

Anchored Modern

Use the lightest for the canvas, the darkest for primary actions/text, and the mid-tone for supporting details.

#D3D3D3 · #808080 · #A9A9A9

CSS variables

:root {
  --zen-sandstone-calm-1: #D3D3D3;
  --zen-sandstone-calm-2: #C0C0C0;
  --zen-sandstone-calm-3: #808080;
  --zen-sandstone-calm-4: #A9A9A9;
  --zen-sandstone-calm-5: #BEBEBE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sandstone-calm": {
        1: "#D3D3D3",
        2: "#C0C0C0",
        3: "#808080",
        4: "#A9A9A9",
        5: "#BEBEBE",
      }
    }
  }
}

Related searches

modern grey palettezen stone colorsminimalist neutral schemecalm grey designsandstone ui colors

Palette colors

Hex values

Color 1#D3D3D3
·
Color 2#C0C0C0
·
Color 3#808080
·
Color 4#A9A9A9
·
Color 5#BEBEBE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
2.6:1Fail
1.6:1Fail
1.2:1Fail
2
1.2:1Fail
2.2:1Fail
1.3:1Fail
1:1Fail
3
2.6:1Fail
2.2:1Fail
1.7:1Fail
2.1:1Fail
4
1.6:1Fail
1.3:1Fail
1.7:1Fail
1.3:1Fail
5
1.2:1Fail
1:1Fail
2.1:1Fail
1.3:1Fail

Similar palettes

More like Zen Sandstone Calm

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