Back to palettes

Palette

Zen Sand Garden

Soft, monochromatic whites and greys reflecting the tranquil purity of a minimalist zen garden.

monochromeminimal5 colors
More monochrome 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

#F8F8F8#ECECE2#DEDEDA#C2C2BB#A6A69A

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette offers a pristine, monochromatic blend of soft whites and greys, embodying the tranquil purity of a minimalist zen garden. Featuring crisp #F8F8F8, gentle #ECECE2, balanced #DEDEDA, and sophisticated greiges like #C2C2BB and #A6A69A, this palette provides a refined foundation for designers. These hex codes are perfect for crafting clean, airy interfaces, elegant branding, or editorial layouts that prioritize clarity and calm. Its understated elegance ensures a timeless aesthetic, making it ideal for projects that require a sense of spaciousness, focus, and quiet sophistication.

Best used for

  • Luxury lifestyle magazines
  • High-end skincare product packaging
  • Minimalist web design portfolios
  • Architectural firm branding
  • Clean e-commerce platforms
  • Digital art and photography showcases

Suggested color roles

primary

Use #ECECE2 for main content backgrounds or large blocks, offering a soft, inviting canvas.

secondary

Apply #DEDEDA for supporting panels, card backgrounds, or subtle divisions, maintaining visual flow.

accent

#A6A69A provides a grounding accent for key interactive elements, icons, or subtle borders, adding depth.

background

#F8F8F8 is excellent for expansive, pure backgrounds, creating an airy and clean aesthetic.

text

For optimal readability, use a dark charcoal or near-black text against the lighter shades like #F8F8F8 or #ECECE2.

Accessibility notes

  • Ensure sufficient contrast for all text, especially when using lighter shades for backgrounds.
  • #A6A69A on #F8F8F8 or #ECECE2 provides reasonable contrast for larger text; check WCAG AA for body text.
  • Avoid using #DEDEDA on #ECECE2 for small text due to very low contrast.
  • For interactive elements, ensure a clear visual cue beyond just color, such as an underline or icon, especially with similar tones.

Recommended combinations

Pure Serenity

Ideal for clean website layouts, using the lightest for background, darkest for text, and mid-tone for accents.

#F8F8F8 · #ECECE2 · #A6A69A

Layered Greige

Perfect for creating subtle depth in UI cards, panels, or layered photographic effects.

#ECECE2 · #DEDEDA · #C2C2BB

Anchored Clean

Use the lightest as a base, the darkest for prominent elements, and the mid-greige for secondary details.

#F8F8F8 · #A6A69A · #C2C2BB

CSS variables

:root {
  --zen-sand-garden-5-1: #F8F8F8;
  --zen-sand-garden-5-2: #ECECE2;
  --zen-sand-garden-5-3: #DEDEDA;
  --zen-sand-garden-5-4: #C2C2BB;
  --zen-sand-garden-5-5: #A6A69A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden-5": {
        1: "#F8F8F8",
        2: "#ECECE2",
        3: "#DEDEDA",
        4: "#C2C2BB",
        5: "#A6A69A",
      }
    }
  }
}

Related searches

minimalist white grey palettetranquil pure colorszen monochrome designsophisticated neutral schemelight greige web design

Palette colors

Hex values

Color 1#F8F8F8
·
Color 2#ECECE2
·
Color 3#DEDEDA
·
Color 4#C2C2BB
·
Color 5#A6A69A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.7:1Fail
2.3:1Fail
2
1.1:1Fail
1.1:1Fail
1.5:1Fail
2.1:1Fail
3
1.3:1Fail
1.1:1Fail
1.3:1Fail
1.8:1Fail
4
1.7:1Fail
1.5:1Fail
1.3:1Fail
1.4:1Fail
5
2.3:1Fail
2.1:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Zen Sand Garden

View all monochrome