Back to palettes

Palette

Zen Sand Garden

A soothing grayscale blend inspired by the raked patterns and smooth stones of a serene Japanese 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

#EBEBEB#DCDCDC#CFCFCF#B8B8B8#A0A0A0

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette offers a deeply soothing grayscale blend, perfect for minimalist designs inspired by serene Japanese gardens. This monochromatic scheme features a range of elegant grays, from the airy #EBEBEB and soft #DCDCDC to the balanced #CFCFCF and #B8B8B8, culminating in the grounding #A0A0A0. Designers can leverage these hex codes to craft sophisticated, uncluttered interfaces and branding that embody calm and focus. Its neutral nature allows for versatility, providing a clean foundation for content-heavy applications or a subtle backdrop for vibrant accent colors if desired.

Best used for

  • High-end technology interfaces
  • Art gallery websites or portfolios
  • Luxury product packaging
  • Modern architectural presentations
  • Meditation or mindfulness applications
  • Minimalist fashion branding

Suggested color roles

primary

Use #DCDCDC (Gainsboro) for primary content areas or large UI components to establish a balanced, neutral base.

secondary

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

accent

#A0A0A0 (Dark Grey) can serve as a subtle accent for important interactive elements or icons, providing gentle contrast.

background

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

text

For optimal readability, use #A0A0A0 or a darker charcoal against lighter shades like #EBEBEB and #DCDCDC.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter shades for backgrounds and foregrounds.
  • #A0A0A0 provides good contrast against #EBEBEB for body text; aim for at least 4.5:1 WCAG AA.
  • Avoid using #DCDCDC on #CFCFCF for small text or critical UI elements due to very low contrast.
  • For interactive elements, ensure a clear visual distinction, potentially using a border or shadow with #A0A0A0.

Recommended combinations

Subtle Depth

Excellent for layered backgrounds or card designs needing gentle separation and clear text.

#EBEBEB · #DCDCDC · #A0A0A0

Grayscale Harmony

Ideal for creating a cohesive visual hierarchy in navigation or information panels.

#CFCFCF · #B8B8B8 · #A0A0A0

Base & Highlight

Use the lightest for background, darkest for text/icons, and mid-tone for secondary elements.

#EBEBEB · #A0A0A0 · #DCDCDC

CSS variables

:root {
  --zen-sand-garden-4-1: #EBEBEB;
  --zen-sand-garden-4-2: #DCDCDC;
  --zen-sand-garden-4-3: #CFCFCF;
  --zen-sand-garden-4-4: #B8B8B8;
  --zen-sand-garden-4-5: #A0A0A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden-4": {
        1: "#EBEBEB",
        2: "#DCDCDC",
        3: "#CFCFCF",
        4: "#B8B8B8",
        5: "#A0A0A0",
      }
    }
  }
}

Related searches

minimalist gray palettezen neutral colorscool grayscale schemepeaceful monochrome designsubtle grey ui colors

Palette colors

Hex values

Color 1#EBEBEB
·
Color 2#DCDCDC
·
Color 3#CFCFCF
·
Color 4#B8B8B8
·
Color 5#A0A0A0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
2
1.2:1Fail
1.1:1Fail
1.4:1Fail
1.9:1Fail
3
1.3:1Fail
1.1:1Fail
1.3:1Fail
1.7:1Fail
4
1.7:1Fail
1.4:1Fail
1.3:1Fail
1.3:1Fail
5
2.2:1Fail
1.9:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Zen Sand Garden

View all monochrome