Back to palettes

Palette

Zen Garden Stone

Harmonious grays and natural earth tones, creating a tranquil atmosphere inspired by serene garden landscapes.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Zen Garden Stone 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 Garden Stone.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#708090#A9A9A9#D3D3D3#8B4513#F5DEB3

Palette guide

How to use Zen Garden Stone

Overview

The Zen Garden Stone palette (ID: zen-garden-stone-4) beautifully marries tranquil grays with warm, natural earth tones, evoking the serene atmosphere of a meticulously arranged garden landscape. This palette features the cool stability of #708090 and the soft brightness of #D3D3D3, perfectly complemented by the grounding warmth of #8B4513 and the delicate cream of #F5DEB3. Designers will find this combination ideal for creating interfaces that feel both sophisticated and inviting. Developers can leverage these precise hex codes to build visually harmonious applications that exude natural elegance and a sense of calm, perfect for projects seeking a balanced, organic aesthetic.

Best used for

  • Nature-inspired e-commerce sites
  • Wellness and spa branding
  • Home decor and interior design platforms
  • Gardening and landscape design portfolios
  • Organic food and artisanal product showcases
  • Calm educational content platforms

Suggested color roles

primary

#708090 - A cool, balanced grey, excellent for main content blocks, headings, or primary navigation, providing a stable foundation.

secondary

#A9A9A9 - A lighter, versatile grey, ideal for secondary information, borders, or subtle background patterns, adding visual texture.

accent

#8B4513 - A rich, earthy brown, used sparingly for critical interactive elements, strong focus points, or important icons, adding warmth and depth.

background

#D3D3D3 - A very light grey, providing a clean, spacious, and calming canvas that complements both cool and warm tones.

text

#708090 - This cool grey offers good readability for body text on lighter backgrounds, or use a darker charcoal for extensive copy.

Accessibility notes

  • #708090 text on #D3D3D3 should meet WCAG AA contrast standards. Consider using a darker charcoal or black for extensive body text.
  • #8B4513 on #D3D3D3 offers strong contrast for accents and calls to action.
  • Avoid using #A9A9A9 or #F5DEB3 for body text on #D3D3D3 backgrounds due to insufficient contrast.
  • Ensure interactive elements have distinct hover/focus states to aid navigation.

Recommended combinations

Earth & Stone

High-contrast for headers, navigation, or prominent structural elements.

#708090 · #8B4513 · #D3D3D3

Desert Bloom

Soft, harmonious layering for content cards, panels, or secondary information.

#A9A9A9 · #F5DEB3 · #D3D3D3

Rooted Accent

Highlights key information or interactive elements with natural, grounded emphasis.

#8B4513 · #708090 · #A9A9A9

CSS variables

:root {
  --zen-garden-stone-4-1: #708090;
  --zen-garden-stone-4-2: #A9A9A9;
  --zen-garden-stone-4-3: #D3D3D3;
  --zen-garden-stone-4-4: #8B4513;
  --zen-garden-stone-4-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-stone-4": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#8B4513",
        5: "#F5DEB3",
      }
    }
  }
}

Related searches

zen garden earth tonescalm grey brown palettenatural minimalist uitranquil stone colorsorganic web design scheme

Palette colors

Hex values

Color 1#708090
·
Color 2#A9A9A9
·
Color 3#D3D3D3
·
Color 4#8B4513
·
Color 5#F5DEB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
1.8:1Fail
3.1:1AA18
2
1.7:1Fail
1.6:1Fail
3:1AA18
1.8:1Fail
3
2.7:1Fail
1.6:1Fail
4.7:1AA
1.1:1Fail
4
1.8:1Fail
3:1AA18
4.7:1AA
5.4:1AA
5
3.1:1AA18
1.8:1Fail
1.1:1Fail
5.4:1AA

Similar palettes

More like Zen Garden Stone

View all neutral
Zen Garden Ryoanji
Mindful Stone Serenity
Serene Pebble Path
Zen Garden Calm
Zen Garden Calm
Zen Garden Pebble