Back to palettes

Palette

Zen Sand Garden

A serene, calming palette inspired by the subtle textures and simplicity of a Japanese Zen 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

#F5F5DC#D2B48C#BDB76B#8B4513#F8F8FF

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette offers a serene and calming collection of earth tones, inspired by the subtle textures and simplicity of a Japanese Zen garden. This palette features the crisp #F5F5DC (Ivory) and #F8F8FF (GhostWhite) for airy bases, complemented by the warm #D2B48C (Tan), earthy #BDB76B (Dark Khaki), and deep #8B4513 (Saddle Brown). Designers can leverage these hex codes to create tranquil digital environments, natural product branding, or sophisticated print layouts that evoke peace and groundedness. Its balanced blend of light and dark ensures versatility for a range of minimalist and nature-inspired applications.

Best used for

  • Meditation and mindfulness apps
  • Eco-friendly and sustainable brand identities
  • Rustic or natural home decor websites
  • Botanical garden informational displays
  • Yoga studio branding
  • Artisanal food packaging

Suggested color roles

primary

Use #D2B48C (Tan) for main content areas or large sections, providing a warm, stable foundation.

secondary

Apply #BDB76B (Dark Khaki) for supporting elements, headers, or distinct content blocks, adding natural depth.

accent

#8B4513 (Saddle Brown) serves as a strong, grounding accent for calls-to-action, icons, or important text.

background

#F5F5DC (Ivory) or #F8F8FF (GhostWhite) are excellent for clean, expansive backgrounds, promoting lightness.

text

For optimal readability, use #8B4513 or a deep charcoal against the lighter shades like #F5F5DC and #F8F8FF.

Accessibility notes

  • Ensure high contrast for text, especially when using lighter colors as backgrounds. #8B4513 provides excellent contrast.
  • #D2B48C and #BDB76B may have insufficient contrast for small text when placed on each other.
  • Use #8B4513 for primary text on #F5F5DC or #F8F8FF to meet WCAG AA readability standards.
  • Background elements using #F5F5DC and #F8F8FF should be carefully evaluated for distinction if adjacent.

Recommended combinations

Earthy Ground

Ideal for creating a strong, natural focal point with clear hierarchy, good for headings and body.

#D2B48C · #8B4513 · #F5F5DC

Natural Layers

Perfect for subtle background variations, card designs, or layered UI elements.

#F5F5DC · #BDB76B · #D2B48C

Deep Contrast

Use the lightest for a clean canvas, the darkest for impactful text/buttons, and the mid-tone for secondary details.

#F8F8FF · #8B4513 · #D2B48C

CSS variables

:root {
  --zen-sand-garden-7-1: #F5F5DC;
  --zen-sand-garden-7-2: #D2B48C;
  --zen-sand-garden-7-3: #BDB76B;
  --zen-sand-garden-7-4: #8B4513;
  --zen-sand-garden-7-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden-7": {
        1: "#F5F5DC",
        2: "#D2B48C",
        3: "#BDB76B",
        4: "#8B4513",
        5: "#F8F8FF",
      }
    }
  }
}

Related searches

tranquil earth tone palettezen garden color schemenatural minimalist colorscalm brown beige palettemeditation app colors

Palette colors

Hex values

Color 1#F5F5DC
·
Color 2#D2B48C
·
Color 3#BDB76B
·
Color 4#8B4513
·
Color 5#F8F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
1.9:1Fail
6.4:1AA
1:1Fail
2
1.8:1Fail
1:1Fail
3.6:1AA18
1.9:1Fail
3
1.9:1Fail
1:1Fail
3.4:1AA18
2:1Fail
4
6.4:1AA
3.6:1AA18
3.4:1AA18
6.7:1AA
5
1:1Fail
1.9:1Fail
2:1Fail
6.7:1AA

Similar palettes

More like Zen Sand Garden

View all Neutral