Palette

Zen Sand Garden

Peaceful and balanced tones reminiscent of a meticulously raked Japanese zen garden.

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

#EAE7DC#D8C8B1#B7A99A#8F8C86#6D6965

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette offers peaceful and balanced tones reminiscent of a meticulously raked Japanese zen garden. This collection, featuring `#EAE7DC`, `#D8C8B1`, `#B7A99A`, `#8F8C86`, and `#6D6965`, combines sophisticated warm grays and beiges. Designers and developers will find it excellent for creating grounded, elegant, and timeless digital experiences. The palette's subtle depth and natural feel make it versatile for various applications, promoting a sense of calm and refined simplicity. It's ideal for projects aiming to convey luxury, tradition, and a quiet sense of enduring quality.

Best used for

Luxury hospitality branding
High-end fashion websites
Traditional craftsmanship showcases
Editorial and publishing layouts
Sophisticated web design
Minimalist interior decor apps

Suggested color roles

primary

Utilize `#B7A99A` as an elegant, muted beige-gray for main content or primary UI elements, providing a sophisticated foundation.

secondary

Employ `#8F8C86` for headings, important details, or secondary navigation, adding a balanced, medium-dark tone.

accent

Reserve `#6D6965` for strong emphasis, calls to action, or critical text, ensuring maximum impact and readability.

background

Apply `#EAE7DC` as a light, creamy off-white background, creating a clean and inviting canvas.

text

For optimal readability, use `#6D6965` or a dark charcoal for body text on lighter backgrounds like `#EAE7DC` or `#D8C8B1`.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter shades like `#D8C8B1` or `#B7A99A` for text.
Text in `#6D6965` on `#EAE7DC` provides excellent contrast, suitable for primary content and WCAG compliance.
Avoid placing light gray text on backgrounds with insufficient luminance difference to prevent legibility issues.
Interactive elements should have clear visual states, using darker tones for active/hover states for clarity.

Recommended combinations

Elegant Foundation

Ideal for main content areas: `#EAE7DC` as background, `#B7A99A` for body text, and `#6D6965` for headings.

#EAE7DC · #B7A99A · #6D6965

Muted Layers

Great for card layouts or distinct content blocks, providing a sophisticated layered effect with subtle transitions.

#D8C8B1 · #8F8C86 · #B7A99A

Deep Grounding

Effective for a prominent header or footer: `#6D6965` as a solid background, `#EAE7DC` for clear text, and `#8F8C86` for icons.

#6D6965 · #EAE7DC · #8F8C86

CSS variables

:root {
  --zen-sand-garden-11-1: #EAE7DC;
  --zen-sand-garden-11-2: #D8C8B1;
  --zen-sand-garden-11-3: #B7A99A;
  --zen-sand-garden-11-4: #8F8C86;
  --zen-sand-garden-11-5: #6D6965;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden-11": {
        1: "#EAE7DC",
        2: "#D8C8B1",
        3: "#B7A99A",
        4: "#8F8C86",
        5: "#6D6965",
      }
    }
  }
}

Hex values

Color 1#EAE7DC

Color 2#D8C8B1

Color 3#B7A99A

Color 4#8F8C86

Color 5#6D6965

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

2.7:1Fail

4.4:1AA18

1.3:1Fail

1.4:1Fail

2:1Fail

3.3:1AA18

1.9:1Fail

1.4:1Fail

1.5:1Fail

2.4:1Fail

2.7:1Fail

2:1Fail

1.5:1Fail

1.6:1Fail

4.4:1AA18

3.3:1AA18

2.4:1Fail

1.6:1Fail

Similar palettes

More like Zen Sand Garden

View all neutral

Calm Stone Pathway

River Stone Whisper

Riverbed Smooth Stone

Silent Zen Cairn

Smooth Pebble Gradient

Stone Garden Zen