Palette

Zen Stone Bridge

Serene greens and muted greys, reminiscent of moss-covered stones and tranquil gardens.

EarthCalm5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A3B18A#588157#3A5A40#DAD7CD#808F78

Palette guide

How to use Zen Stone Bridge

Overview

The Zen Stone Bridge palette evokes the tranquility of nature with its serene greens and muted greys, reminiscent of moss-covered stones and peaceful garden pathways. Featuring shades like #A3B18A, a soft sage, #588157, a deep forest green, and #DAD7CD, a warm stone grey, this palette offers a grounding and organic feel. It's perfectly suited for designers and developers aiming to create projects that convey calmness, sustainability, and a connection to the natural world. The sophisticated blend of earthy tones provides a balanced and harmonious foundation for a wide range of applications, from digital interfaces to physical branding.

Best used for

Eco-friendly and sustainable brand identities
Nature-themed websites and mobile applications
Spa, wellness, and meditation marketing materials
Interior design focused on natural elements
Sustainable product packaging and labels
Horticultural or botanical design projects

Suggested color roles

primary

Use #588157 as a rich, grounding primary color for headers, important buttons, or main content blocks.

secondary

Employ #A3B18A as a softer, complementary green for secondary information, accents, or subtle graphics.

accent

Apply #3A5A40 for deep, sophisticated emphasis, strong text, or interactive elements, adding depth.

background

Utilize #DAD7CD as a light, warm neutral base, providing an inviting and clean canvas.

text

For body text, use #3A5A40 on lighter backgrounds like #DAD7CD for excellent readability, or a dark charcoal.

Accessibility notes

Ensure #3A5A40 text on #DAD7CD background meets WCAG AA contrast ratios for all critical text.
Use #588157 for larger headings or graphic elements on #DAD7CD, but verify contrast for smaller text.
Avoid using #A3B18A for small text on #808F78, as the contrast may be insufficient for accessibility.
Consider using a true black or very dark charcoal for essential body text on #DAD7CD to maximize legibility.

Recommended combinations

Earthy Contrast

Provides a strong, natural contrast for clear hierarchy in content, blending light background with rich greens.

#DAD7CD · #3A5A40 · #588157

Soft Nature

Creates a gentle, organic feel for backgrounds, secondary elements, or subtle visual textures.

#DAD7CD · #A3B18A · #808F78

Deep Forest Base

A robust green base with a darker accent and a light highlight, ideal for nature-focused themes with depth.

#588157 · #3A5A40 · #DAD7CD

CSS variables

:root {
  --zen-stone-bridge-1: #A3B18A;
  --zen-stone-bridge-2: #588157;
  --zen-stone-bridge-3: #3A5A40;
  --zen-stone-bridge-4: #DAD7CD;
  --zen-stone-bridge-5: #808F78;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-stone-bridge": {
        1: "#A3B18A",
        2: "#588157",
        3: "#3A5A40",
        4: "#DAD7CD",
        5: "#808F78",
      }
    }
  }
}

Hex values

Color 1#A3B18A

Color 2#588157

Color 3#3A5A40

Color 4#DAD7CD

Color 5#808F78

Accessibility

Contrast checker

2:1Fail

3.4:1AA18

1.6:1Fail

1.5:1Fail

2:1Fail

1.7:1Fail

3.1:1AA18

1.3:1Fail

3.4:1AA18

1.7:1Fail

5.4:1AA

2.3:1Fail

1.6:1Fail

3.1:1AA18

5.4:1AA

2.4:1Fail

1.5:1Fail

1.3:1Fail

2.3:1Fail

2.4:1Fail

Similar palettes

More like Zen Stone Bridge

View all Earth

Rain-Kissed Meadow

Cactus Flower Dusk

Jade Mountain Sanctuary

Ancient Ruin Whisper

Desert Twilight Haze

Moonlit Savannah Dusk