Palette

Zen Stone Garden

A calming collection of cool grays, creating a serene and contemplative atmosphere.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E8ECEF#C7CED4#A1A9B3#7B8492#555F6F

Palette guide

How to use Zen Stone Garden

Overview

The Zen Stone Garden palette is a calming collection of cool grays, creating a serene and contemplative atmosphere. With shades ranging from the light #E8ECEF to the deep #555F6F, including #C7CED4, #A1A9B3, and #7B8492, this palette provides designers and developers with a sophisticated and modern foundation. Its cool undertones lend themselves to designs that demand clarity, professionalism, and a sense of quiet strength. This palette is ideal for creating interfaces and branding that evoke trust, focus, and a streamlined aesthetic, ensuring a tranquil and organized user experience across various applications.

Best used for

Tech company branding and user interfaces
Financial services and corporate web design
Luxury product packaging and industrial design
Architectural visualization and renders
Clean, data-driven dashboards and analytics tools
Modern office interior design concepts

Suggested color roles

primary

Use #A1A9B3 as a balanced, cool mid-grey for main content blocks, providing a stable and professional appearance.

secondary

Employ #C7CED4 for lighter supportive elements, subtle backgrounds, or dividers, adding a touch of softness.

accent

Apply #555F6F as the deepest cool grey for strong emphasis, primary text, or interactive elements, ensuring clarity.

background

Utilize #E8ECEF as the lightest, clean, and expansive base, maximizing white space and visual breathability.

text

For body text, use #555F6F on lighter backgrounds like #E8ECEF, or a true black for maximum contrast and legibility.

Accessibility notes

Ensure #555F6F text on #E8ECEF background meets WCAG AA contrast ratios for optimal readability.
#7B8492 offers good contrast for headings or larger text on #E8ECEF, enhancing visual hierarchy.
Avoid using #C7CED4 or #A1A9B3 for small text on #E8ECEF due to potential contrast issues for accessibility.
For critical body text, consider using black or a very dark charcoal against #E8ECEF to guarantee compliance.

Recommended combinations

Deep Contrast

Creates a clear hierarchy for content and titles, blending a light background with strong dark and mid-tone greys.

#E8ECEF · #555F6F · #7B8492

Subtle Transition

Achieves soft, gradual shifts for backgrounds or layered UI elements, promoting a sense of calm continuity.

#E8ECEF · #C7CED4 · #A1A9B3

Strong Foundation

A balanced primary color with a strong accent and a light background, ideal for professional and modern aesthetics.

#A1A9B3 · #555F6F · #E8ECEF

CSS variables

:root {
  --zen-stone-garden-5-1: #E8ECEF;
  --zen-stone-garden-5-2: #C7CED4;
  --zen-stone-garden-5-3: #A1A9B3;
  --zen-stone-garden-5-4: #7B8492;
  --zen-stone-garden-5-5: #555F6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-stone-garden-5": {
        1: "#E8ECEF",
        2: "#C7CED4",
        3: "#A1A9B3",
        4: "#7B8492",
        5: "#555F6F",
      }
    }
  }
}

Hex values

Color 1#E8ECEF

Color 2#C7CED4

Color 3#A1A9B3

Color 4#7B8492

Color 5#555F6F

Accessibility

Contrast checker

1.3:1Fail

2:1Fail

3.2:1AA18

5.4:1AA

1.3:1Fail

1.5:1Fail

2.4:1Fail

4.1:1AA18

2:1Fail

1.5:1Fail

1.6:1Fail

2.7:1Fail