Back to palettes

Palette

Zen Sand Garden

Inspired by the raked patterns of a tranquil Zen garden, with soft, serene sandy and beige tones.

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

#C2B280#D2B48C#E4D09F#F5DEB3#FAEBD7

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette is inspired by the raked patterns of a tranquil Zen garden, featuring soft, serene sandy and beige tones. With colors like `#C2B280`, `#D2B48C`, `#E4D09F`, `#F5DEB3`, and `#FAEBD7`, this collection offers designers and developers a light, airy, and inviting aesthetic. It's perfect for creating warm, gentle, and harmonious digital experiences that evoke a sense of calm and natural beauty. The subtle variations in light beiges provide depth while maintaining an overall luminous quality, ideal for projects seeking to convey softness, comfort, and peaceful minimalism.

Best used for

  • Spa and wellness branding
  • Natural beauty product websites
  • Gentle e-commerce platforms
  • Cozy home decor inspiration
  • Educational content for children
  • Calm personal blogs and portfolios

Suggested color roles

primary

Utilize `#D2B48C` as a classic sand tone for primary elements, offering warmth and approachability.

secondary

Employ `#C2B280` for headings, important details, or borders, providing a slightly deeper, grounding contrast.

accent

Apply `#F5DEB3` for subtle highlights, interactive states, or decorative elements, adding a luminous touch.

background

Use `#FAEBD7` as the lightest, almost cream background, creating an airy, soft, and expansive canvas.

text

For optimal readability, use `#C2B280` or a dark brown/charcoal for body text on lighter backgrounds like `#FAEBD7` or `#E4D09F`.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades like `#E4D09F` or `#F5DEB3` for text.
  • Text in `#C2B280` on `#FAEBD7` provides good contrast, suitable for primary content and meeting WCAG standards.
  • Avoid placing light text on backgrounds with insufficient luminance difference to prevent legibility issues.
  • Interactive elements should have clear visual states, using darker tones for active/hover states for clarity.

Recommended combinations

Airy Calm

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

#FAEBD7 · #D2B48C · #C2B280

Soft Layers

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

#E4D09F · #F5DEB3 · #D2B48C

Warm Accent

Effective for a prominent header or footer: `#C2B280` as a solid background, `#FAEBD7` for clear text, and `#E4D09F` for icons.

#C2B280 · #FAEBD7 · #E4D09F

CSS variables

:root {
  --zen-sand-garden-2-1: #C2B280;
  --zen-sand-garden-2-2: #D2B48C;
  --zen-sand-garden-2-3: #E4D09F;
  --zen-sand-garden-2-4: #F5DEB3;
  --zen-sand-garden-2-5: #FAEBD7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden-2": {
        1: "#C2B280",
        2: "#D2B48C",
        3: "#E4D09F",
        4: "#F5DEB3",
        5: "#FAEBD7",
      }
    }
  }
}

Related searches

light sand palettewarm beige colorszen garden neutralssoft minimalist schemenatural soothing tones

Palette colors

Hex values

Color 1#C2B280
·
Color 2#D2B48C
·
Color 3#E4D09F
·
Color 4#F5DEB3
·
Color 5#FAEBD7
·

Accessibility

Contrast checker

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

Similar palettes

More like Zen Sand Garden

View all neutral