Palette

Silent Zen Cairn

A peaceful gradient of cool grays, mirroring the serene and balanced forms of a tranquil rock garden.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Silent Zen Cairn 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 Silent Zen Cairn.

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

Data visualization

#ECEBE9#D0D0CE#A0A09F#70706F#3A3A3A

Palette guide

How to use Silent Zen Cairn

Overview

The Silent Zen Cairn palette offers a sophisticated, monochromatic gradient of cool grays, ideal for creating serene and balanced digital experiences. Ranging from the nearly white #ECEBE9 to the deep charcoal #3A3A3A, this collection evokes the tranquil forms of a rock garden. Designers can leverage the subtle shifts between #D0D0CE and #A0A09F for soft depth, while #70706F provides a robust mid-tone. This palette is perfect for minimalist interfaces, architectural presentations, or any project requiring understated elegance and a strong foundation of neutral tones, ensuring focus remains on content.

Best used for

Minimalist UI/UX design
Architectural portfolios and firm branding
High-end tech product interfaces
Art gallery websites or exhibition branding
Photography website backgrounds and typography
Corporate or professional service branding

Suggested color roles

primary

#A0A09F - A stable, mid-tone gray excellent for main content blocks, card backgrounds, or primary navigation elements, providing a solid yet understated foundation.

secondary

#D0D0CE - A lighter, gentle gray perfect for secondary UI elements, hover states, subtle dividers, or background elements that need to recede slightly.

accent

#3A3A3A - This deep charcoal provides strong contrast for important calls-to-action, bold headings, or focal points, adding necessary depth and sophistication.

background

#ECEBE9 - The lightest shade, ideal for clean, expansive backgrounds that offer a sense of openness and allow content to breathe, mimicking natural light.

text

#3A3A3A - For primary body text, ensuring excellent readability on lighter backgrounds like #ECEBE9 or #D0D0CE.

Accessibility notes

Ensure sufficient contrast (WCAG AA/AAA) when pairing #3A3A3A text on #ECEBE9 or #D0D0CE backgrounds.
Avoid using adjacent mid-tones like #A0A09F and #70706F for text and background without careful contrast checking.
For UI elements, use a combination of light and dark grays to convey interactive states clearly, e.g., #ECEBE9 for default and #70706F for hover.
Consider a larger font size or bolding for critical information when using lower contrast pairs.

Recommended combinations

High Contrast Read

Optimal for primary text and background, ensuring maximum readability for body copy and headings.

#ECEBE9 · #3A3A3A · #D0D0CE

Subtle UI Depth

Ideal for creating layered UI elements like cards, modal overlays, and subtle gradients for depth without harsh lines.

#D0D0CE · #A0A09F · #70706F

Accent & Base

Use #ECEBE9 as background, #70706F for secondary information, and #3A3A3A for strong calls-to-action or primary headings.

#ECEBE9 · #70706F · #3A3A3A

CSS variables

:root {
  --silent-zen-cairn-1: #ECEBE9;
  --silent-zen-cairn-2: #D0D0CE;
  --silent-zen-cairn-3: #A0A09F;
  --silent-zen-cairn-4: #70706F;
  --silent-zen-cairn-5: #3A3A3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "silent-zen-cairn": {
        1: "#ECEBE9",
        2: "#D0D0CE",
        3: "#A0A09F",
        4: "#70706F",
        5: "#3A3A3A",
      }
    }
  }
}

Hex values

Color 1#ECEBE9

Color 2#D0D0CE

Color 3#A0A09F

Color 4#70706F

Color 5#3A3A3A

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

4.2:1AA18

9.5:1AAA

1.3:1Fail

1.7:1Fail

3.2:1AA18

7.4:1AAA

2.2:1Fail

1.7:1Fail

1.9:1Fail

4.3:1AA18

4.2:1AA18

3.2:1AA18

1.9:1Fail

2.3:1Fail

9.5:1AAA

7.4:1AAA

4.3:1AA18

2.3:1Fail

Similar palettes

More like Silent Zen Cairn

View all neutral

Calm Stone Pathway

River Stone Whisper

Riverbed Smooth Stone

Smooth Pebble Gradient

Stone Garden Zen

Tranquil Pebble Path