Back to palettes

Palette

Zen Sand Garden

A soothing arrangement of light, sandy neutrals, promoting tranquility and mindfulness in a Japanese rock 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

#F5DEB3#D2B48C#B7A79C#A7978D#D0C0B0

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette is a soothing arrangement of light, sandy neutrals, designed to promote tranquility and mindfulness. With warm tones like `#F5DEB3`, `#D2B48C`, `#B7A79C`, `#A7978D`, and `#D0C0B0`, this collection is perfect for designers and developers seeking to create natural, calming, and inviting digital spaces. It evokes the feeling of a meticulously raked Japanese rock garden, offering a gentle yet sophisticated aesthetic. This palette is ideal for projects that aim to convey organic beauty, understated elegance, and a sense of peaceful grounding through its earthy harmony.

Best used for

  • Eco-friendly brand identity
  • Natural product packaging
  • Serene interior design concepts
  • Wellness and mindfulness apps
  • Artisan craft websites
  • Gentle e-commerce platforms

Suggested color roles

primary

Utilize `#D2B48C` as a warm, inviting primary color for key elements, embodying the natural sand tone.

secondary

Employ `#B7A79C` for sub-headings, secondary details, or subtle background variations, adding a touch of muted elegance.

accent

Reserve `#A7978D` for strong emphasis, calls to action, or important text, providing a grounding, darker contrast.

background

Apply `#F5DEB3` as a light, creamy background, creating an open and welcoming canvas for content.

text

For optimal readability, use `#A7978D` or a dark brown/charcoal for body text on lighter backgrounds like `#F5DEB3` or `#D0C0B0`.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades like `#D0C0B0` or `#F5DEB3` for text.
  • Text in `#A7978D` on `#F5DEB3` offers good contrast, suitable for primary content and meeting WCAG standards.
  • Avoid placing light text on light backgrounds without verifying contrast ratios, as this palette has many subtle variations.
  • Interactive elements should have clear visual states, using darker tones for active/hover states.

Recommended combinations

Soft Horizon

Ideal for main content areas: `#F5DEB3` as background, `#D2B48C` for body text, and `#A7978D` for headings.

#F5DEB3 · #D2B48C · #A7978D

Earthy Layers

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

#D0C0B0 · #B7A79C · #D2B48C

Grounding Accent

Effective for a prominent header or footer: `#A7978D` as a solid background, `#F5DEB3` for text, and `#B7A79C` for subtle details.

#A7978D · #F5DEB3 · #B7A79C

CSS variables

:root {
  --zen-sand-garden-10-1: #F5DEB3;
  --zen-sand-garden-10-2: #D2B48C;
  --zen-sand-garden-10-3: #B7A79C;
  --zen-sand-garden-10-4: #A7978D;
  --zen-sand-garden-10-5: #D0C0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden-10": {
        1: "#F5DEB3",
        2: "#D2B48C",
        3: "#B7A79C",
        4: "#A7978D",
        5: "#D0C0B0",
      }
    }
  }
}

Related searches

zen sand paletteearthy neutral colorswarm beige schemenatural design tonescalm sand garden

Palette colors

Hex values

Color 1#F5DEB3
·
Color 2#D2B48C
·
Color 3#B7A79C
·
Color 4#A7978D
·
Color 5#D0C0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.8:1Fail
2.1:1Fail
1.3:1Fail
2
1.5:1Fail
1.2:1Fail
1.4:1Fail
1.1:1Fail
3
1.8:1Fail
1.2:1Fail
1.2:1Fail
1.3:1Fail
4
2.1:1Fail
1.4:1Fail
1.2:1Fail
1.6:1Fail
5
1.3:1Fail
1.1:1Fail
1.3:1Fail
1.6:1Fail

Similar palettes

More like Zen Sand Garden

View all neutral