Back to palettes

Palette

Zen Sand Garden

Subtle, tranquil grays and beiges designed to inspire serenity and quiet contemplation.

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

#A1A19D#C6C6C1#EBEBE6#7A7A77#B7B7B2

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette offers subtle, tranquil grays and beiges designed to inspire serenity and quiet contemplation. Featuring tones like the soft gray-green of `#A1A19D`, the lighter `#C6C6C1`, the near-white `#EBEBE6`, and the grounding `#7A7A77`, this collection is perfect for designers and developers aiming for an understated, calming aesthetic. Its gentle, muted quality makes it versatile for applications requiring a sense of peace, balance, and modern simplicity. The palette is ideal for creating clean, focused interfaces and branding that emphasize natural harmony and quiet sophistication.

Best used for

  • Wellness and mindfulness branding
  • Sustainable fashion websites
  • Minimalist art and design portfolios
  • Architectural renderings and presentations
  • Serene digital interfaces and apps
  • Understated corporate communications

Suggested color roles

primary

Utilize `#A1A19D` as a stable, subtle gray-green for primary elements, offering a grounded yet fresh feel.

secondary

Employ `#B7B7B2` for secondary information, subtle borders, or background variations, adding gentle visual interest.

accent

Reserve `#7A7A77` for strong emphasis, calls to action, or critical text, providing a clear, grounding contrast.

background

Apply `#EBEBE6` as a very light, near-white background, creating an open and clean canvas for content.

text

For optimal readability, use `#7A7A77` or a dark charcoal for body text on lighter backgrounds like `#EBEBE6` or `#C6C6C1`.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter grays like `#C6C6C1` or `#B7B7B2` for text.
  • Text in `#7A7A77` on `#EBEBE6` provides good contrast, suitable for primary content and meeting WCAG standards.
  • Avoid placing light 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

Calm Clarity

Ideal for main content areas: `#EBEBE6` as background, `#A1A19D` for body text, and `#7A7A77` for headings.

#EBEBE6 · #A1A19D · #7A7A77

Subtle Structure

Great for card layouts or secondary information panels, creating a harmonious layered effect with soft transitions.

#C6C6C1 · #B7B7B2 · #A1A19D

Grounding Accent

Effective for a prominent header or footer: `#7A7A77` as a solid background, `#EBEBE6` for clear text, and `#B7B7B2` for icons.

#7A7A77 · #EBEBE6 · #B7B7B2

CSS variables

:root {
  --zen-sand-garden-12-1: #A1A19D;
  --zen-sand-garden-12-2: #C6C6C1;
  --zen-sand-garden-12-3: #EBEBE6;
  --zen-sand-garden-12-4: #7A7A77;
  --zen-sand-garden-12-5: #B7B7B2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden-12": {
        1: "#A1A19D",
        2: "#C6C6C1",
        3: "#EBEBE6",
        4: "#7A7A77",
        5: "#B7B7B2",
      }
    }
  }
}

Related searches

cool neutral palettezen gray greensubtle earth tonescalm minimalist colorsunderstated design scheme

Palette colors

Hex values

Color 1#A1A19D
·
Color 2#C6C6C1
·
Color 3#EBEBE6
·
Color 4#7A7A77
·
Color 5#B7B7B2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
1.7:1Fail
1.3:1Fail
2
1.5:1Fail
1.4:1Fail
2.5:1Fail
1.2:1Fail
3
2.2:1Fail
1.4:1Fail
3.6:1AA18
1.7:1Fail
4
1.7:1Fail
2.5:1Fail
3.6:1AA18
2.1:1Fail
5
1.3:1Fail
1.2:1Fail
1.7:1Fail
2.1:1Fail

Similar palettes

More like Zen Sand Garden

View all neutral
Zen Sand Garden
Zen Sandstone Garden
Calm Stone Pathway
Earthy Clay Stillness
Minimalist Zen Calm
Pebble Zen Garden