Back to palettes

Palette

Whisper Stone Harmony

Subtly varied grays mirroring the tranquil balance of natural stones in a zen garden.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whisper Stone Harmony 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 Whisper Stone Harmony.

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

Data visualization

#A9A9A9#8B8C89#6C6C69#50504E#343432

Palette guide

How to use Whisper Stone Harmony

Overview

The Whisper Stone Harmony palette presents a collection of subtly varied grays, mirroring the tranquil balance of natural stones in a zen garden. From the light #A9A9A9 to the deep #343432, this monochrome palette offers quiet sophistication and understated elegance. It's perfect for creating clean, modern designs that require a sense of calm and stability. Designers can leverage the darker shades like #50504E for strong typographic elements, while the lighter #A9A9A9 provides a serene background. This palette is highly versatile for establishing a mature, minimalist aesthetic across digital and physical mediums.

Best used for

  • Modern architectural design websites
  • Corporate and professional branding
  • Minimalist UI/UX interfaces
  • Art gallery and museum exhibits
  • Zen-inspired interior design
  • High-tech product showcases

Suggested color roles

primary

#50504E - A strong, deep gray that provides excellent contrast and acts as a grounding primary color.

secondary

#6C6C69 - A versatile mid-tone for subheadings, dividing lines, or secondary graphical elements.

accent

#8B8C89 - A lighter gray that can be used for subtle accents, hover states, or background textures.

background

#A9A9A9 - The lightest shade, ideal for clean, expansive backgrounds, providing a soft, neutral base.

text

#343432 - The darkest hue, perfect for primary body text on lighter backgrounds like #A9A9A9 or #8B8C89 for maximum readability.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when pairing mid-tones.
  • Always use #343432 for text on #A9A9A9 or #8B8C89 backgrounds to meet WCAG AA standards.
  • Avoid using #A9A9A9 or #8B8C89 for text on backgrounds close in value, as contrast will be poor.
  • For interactive elements, maintain clear contrast for states (hover, active) to aid navigation.

Recommended combinations

Zen Foundation

A balanced combination for main content areas, offering clear hierarchy and a calm aesthetic.

#A9A9A9 · #6C6C69 · #343432

Stone Layers

Creates depth and sophistication, ideal for dark mode interfaces or strong visual statements.

#8B8C89 · #50504E · #343432

Subtle Harmony

Excellent for subtle visual interest, borders, or background patterns without overwhelming the user.

#A9A9A9 · #8B8C89 · #6C6C69

CSS variables

:root {
  --whisper-stone-harmony-1: #A9A9A9;
  --whisper-stone-harmony-2: #8B8C89;
  --whisper-stone-harmony-3: #6C6C69;
  --whisper-stone-harmony-4: #50504E;
  --whisper-stone-harmony-5: #343432;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whisper-stone-harmony": {
        1: "#A9A9A9",
        2: "#8B8C89",
        3: "#6C6C69",
        4: "#50504E",
        5: "#343432",
      }
    }
  }
}

Related searches

monochrome gray palettezen stone colorssubtle neutral schememodern gray designcalm professional colors

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#8B8C89
·
Color 3#6C6C69
·
Color 4#50504E
·
Color 5#343432
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
3.4:1AA18
5.3:1AA
2
1.4:1Fail
1.6:1Fail
2.4:1Fail
3.7:1AA18
3
2.2:1Fail
1.6:1Fail
1.5:1Fail
2.4:1Fail
4
3.4:1AA18
2.4:1Fail
1.5:1Fail
1.5:1Fail
5
5.3:1AA
3.7:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Whisper Stone Harmony

View all monochrome