Back to palettes

Palette

Zen Sand Garden

Calming beiges and pale creams offer a serene, uncluttered feel, reminiscent of a raked sand garden's quiet beauty.

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

#CCBBAA#E6D4C2#FFF2E0#A3978B#7A7066

Palette guide

How to use Zen Sand Garden

Overview

The Zen Sand Garden palette offers calming beiges and pale creams, creating a serene, uncluttered feel reminiscent of a raked sand garden's quiet beauty. This natural scheme features a warm #CCBBAA, a delicate #E6D4C2, and a luminous #FFF2E0. Grounding these are the sophisticated #A3978B and deep #7A7066. Designers can leverage these hex codes to craft tranquil digital experiences, elegant branding, or sophisticated print materials that embody peace and natural simplicity. Its harmonious blend of warm neutrals ensures a versatile foundation for projects seeking a serene, understated elegance with an Porganic touch.

Best used for

  • Sustainable fashion e-commerce
  • Yoga and meditation retreat websites
  • Natural cosmetics branding
  • Minimalist home decor blogs
  • Spa and wellness center design
  • Eco-conscious product packaging

Suggested color roles

primary

Use #CCBBAA (Light Brown/Beige) for main content areas or large UI blocks, establishing a warm, stable base.

secondary

Apply #E6D4C2 (Very Light Beige) for supporting elements, cards, or subtle divisions, maintaining lightness.

accent

#7A7066 (Dark Brown/Greige) serves as a strong, grounding accent for calls-to-action, icons, or important text.

background

#FFF2E0 (Near White/Cream) is excellent for clean, expansive backgrounds, promoting an airy and pristine feel.

text

For optimal readability, use #7A7066 or a deep charcoal against the lighter shades like #FFF2E0 and #E6D4C2.

Accessibility notes

  • Ensure sufficient contrast for text; #7A7066 on #FFF2E0 or #E6D4C2 provides excellent readability.
  • Avoid using #CCBBAA on #E6D4C2 for small text due to their close proximity in lightness.
  • #A3978B provides good contrast against #FFF2E0 for headings and larger text.
  • Always verify contrast ratios with a WCAG checker for all critical text and interactive elements.

Recommended combinations

Sandy Layers

Ideal for creating subtle depth in backgrounds or card designs, with light transitions.

#FFF2E0 · #E6D4C2 · #CCBBAA

Grounded Elegance

Perfect for building visual hierarchy in navigation or panels, moving from light to dark.

#CCBBAA · #A3978B · #7A7066

Clean Contrast

Use the lightest for the canvas, the darkest for primary actions/text, and the mid-tone for secondary details.

#FFF2E0 · #7A7066 · #A3978B

CSS variables

:root {
  --zen-sand-garden-1: #CCBBAA;
  --zen-sand-garden-2: #E6D4C2;
  --zen-sand-garden-3: #FFF2E0;
  --zen-sand-garden-4: #A3978B;
  --zen-sand-garden-5: #7A7066;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-sand-garden": {
        1: "#CCBBAA",
        2: "#E6D4C2",
        3: "#FFF2E0",
        4: "#A3978B",
        5: "#7A7066",
      }
    }
  }
}

Related searches

calming beige palettezen sand colorsminimalist natural schemepeaceful cream designearth tone ui colors

Palette colors

Hex values

Color 1#CCBBAA
·
Color 2#E6D4C2
·
Color 3#FFF2E0
·
Color 4#A3978B
·
Color 5#7A7066
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
1.5:1Fail
2.6:1Fail
2
1.3:1Fail
1.3:1Fail
2:1Fail
3.4:1AA18
3
1.7:1Fail
1.3:1Fail
2.6:1Fail
4.4:1AA18
4
1.5:1Fail
2:1Fail
2.6:1Fail
1.7:1Fail
5
2.6:1Fail
3.4:1AA18
4.4:1AA18
1.7:1Fail

Similar palettes

More like Zen Sand Garden

View all neutral
Desert Sands Dune
Adobe Sunstone Hues
Zen Sand Garden
Zen Sand Garden
Abstract Sandstone Art
Bleached Wood Grain