Back to palettes

Palette

Zen Sand Garden

Soft, contemplative grays and beiges for a calming, harmonious zen garden feel.

Neutralminimal5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Zen Sand Garden 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 Sand Garden.

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

Data visualization

#DEDCD5#BDBAAC#A2A197#7A7973#ECEBE5

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette offers soft, contemplative grays and beiges, creating a calming, harmonious zen garden feel. This refined scheme includes light greiges like #DEDCD5 and #ECEBE5, evolving into richer tones such as #BDBAAC, #A2A197, and the deep #7A7973. Designers can leverage these hex codes to craft serene digital interfaces, sophisticated branding, or print materials that embody tranquility and minimalist elegance. Its monochromatic yet subtly varied nature provides a versatile foundation, ideal for projects seeking a quiet, sophisticated, and natural aesthetic with a sense of grounded calm.

Best used for

  • Premium publishing platforms
  • Fine art gallery websites
  • Bespoke fashion brand identity
  • High-end architectural visualization
  • Serene corporate branding
  • Minimalist personal blogs

Suggested color roles

primary

Use #DEDCD5 (Light Greige) for main content areas or large UI components to establish a soft, inviting base.

secondary

Apply #BDBAAC (Greige) for supporting elements, card backgrounds, or subtle divisions, adding gentle depth.

accent

#7A7973 (Dark Greige) provides a strong, grounding accent for key interactive elements, icons, or important text.

background

#ECEBE5 (Very Light Greige) is excellent for clean, expansive backgrounds, promoting an airy, open feel.

text

For optimal readability, use #7A7973 or a dark charcoal against the lighter shades like #ECEBE5 and #DEDCD5.

Accessibility notes

  • Ensure sufficient contrast for text; #7A7973 on #ECEBE5 or #DEDCD5 provides good readability.
  • Avoid placing #DEDCD5 on #ECEBE5 for small text or critical elements due to very low contrast.
  • Use the darkest shade, #7A7973, for body text on light backgrounds to meet WCAG AA standards.
  • For interactive elements, ensure a clear visual distinction beyond just color, such as an outline or hover effect.

Recommended combinations

Stone Layers

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

#ECEBE5 · #DEDCD5 · #7A7973

Greige Depth

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

#DEDCD5 · #BDBAAC · #A2A197

Anchored Calm

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

#ECEBE5 · #7A7973 · #A2A197

CSS variables

:root {
  --zen-sand-garden-9-1: #DEDCD5;
  --zen-sand-garden-9-2: #BDBAAC;
  --zen-sand-garden-9-3: #A2A197;
  --zen-sand-garden-9-4: #7A7973;
  --zen-sand-garden-9-5: #ECEBE5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden-9": {
        1: "#DEDCD5",
        2: "#BDBAAC",
        3: "#A2A197",
        4: "#7A7973",
        5: "#ECEBE5",
      }
    }
  }
}

Related searches

contemplative grey beigezen stone paletteminimalist neutral schemecalming greige colorssoft earth tone ui

Palette colors

Hex values

Color 1#DEDCD5
·
Color 2#BDBAAC
·
Color 3#A2A197
·
Color 4#7A7973
·
Color 5#ECEBE5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
3.2:1AA18
1.1:1Fail
2
1.4:1Fail
1.3:1Fail
2.2:1Fail
1.6:1Fail
3
1.9:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
4
3.2:1AA18
2.2:1Fail
1.7:1Fail
3.7:1AA18
5
1.1:1Fail
1.6:1Fail
2.2:1Fail
3.7:1AA18

Similar palettes

More like Zen Sand Garden

View all Neutral
Calm Pebble Path
Cityscape Blueprint
Concrete Urbanity
Urban Zen Stone
Botanical Sketch Bloom
Minimalist Stone Garden