Back to palettes

Palette

Zen Sand Garden

Muted, serene sandy tones that evoke the peaceful simplicity of a Japanese zen garden.

neutralcalm5 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

#D2B48C#F5DEB3#F5F5DC#BDB76B#C0C0C0

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette offers a serene and muted collection of sandy tones, perfect for evoking peace and simplicity in design. This neutral scheme features a comforting tan (#D2B48C), a soft wheat (#F5DEB3), and a light ivory (#F5F5DC), balanced by the earthy dark khaki (#BDB76B) and a cool silver-grey (#C0C0C0). Designers can leverage these hex codes to create harmonious digital or print environments, ideal for projects seeking a tranquil, uncluttered aesthetic. Its gentle character ensures a calming user experience, making it suitable for mindful branding or sophisticated, understated interfaces where subtlety is key.

Best used for

  • Wellness and spa websites
  • Minimalist interior design portfolios
  • Eco-friendly product branding
  • Yoga or meditation app interfaces
  • High-end artisanal craft packaging
  • Serene blog or personal website themes

Suggested color roles

primary

Use #D2B48C (Tan) for main content areas or large backgrounds to establish a warm, earthy foundation.

secondary

Apply #F5DEB3 (Wheat) for supporting sections, cards, or subtle highlights, maintaining softness.

accent

#BDB76B (Dark Khaki) can provide a gentle, natural accent for calls-to-action or important visual elements without being loud.

background

#F5F5DC (Ivory) is excellent for clean, light backgrounds, offering a pristine canvas.

text

For optimal readability, use a dark charcoal or black text against lighter shades like #F5F5DC or #F5DEB3.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter palette colors as backgrounds. Darker text, like charcoal, is recommended.
  • Avoid placing #D2B48C directly on #BDB76B for small text due to potential low contrast.
  • Use #F5F5DC or #F5DEB3 as backgrounds for body text to maximize readability against dark text.
  • Consider larger font sizes for any text set against medium tones like #C0C0C0 to improve legibility.

Recommended combinations

Earthy Calm

Ideal for creating a grounded, natural feel in headers or key visual blocks.

#D2B48C · #BDB76B · #F5F5DC

Soft Glow

Perfect for background gradients or layering elements to achieve a gentle, airy effect.

#F5DEB3 · #F5F5DC · #C0C0C0

Subtle Contrast

Useful for UI elements where distinction is needed without harshness, like borders or icons.

#D2B48C · #C0C0C0 · #BDB76B

CSS variables

:root {
  --zen-sand-garden-3-1: #D2B48C;
  --zen-sand-garden-3-2: #F5DEB3;
  --zen-sand-garden-3-3: #F5F5DC;
  --zen-sand-garden-3-4: #BDB76B;
  --zen-sand-garden-3-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden-3": {
        1: "#D2B48C",
        2: "#F5DEB3",
        3: "#F5F5DC",
        4: "#BDB76B",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

zen garden color schemecalm neutral palettesandy beige color codesminimalist earth tonestranquil design colors

Palette colors

Hex values

Color 1#D2B48C
·
Color 2#F5DEB3
·
Color 3#F5F5DC
·
Color 4#BDB76B
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

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

Similar palettes

More like Zen Sand Garden

View all neutral
Zen Sand Garden
Coastal Dune Whispers
Zen Garden Calm
Zen Garden Calm
Zen Garden Pebble
Zen Garden Pebble