Back to palettes

Palette

Stone Garden

A tranquil range of greys, inspired by weathered stones and quiet pathways in a contemplative garden.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9A9A9#C0C0C0#D3D3D3#808080#B0B0B0

Palette guide

How to use Stone Garden

Overview

The Stone Garden palette offers a tranquil range of soft greys, drawing inspiration from weathered stones and quiet pathways found in a contemplative garden. This collection, featuring shades like the light #D3D3D3, the balanced #C0C0C0 and #A9A9A9, and the grounding #B0B0B0 and #808080, is perfect for designs seeking a calm and sophisticated feel. It provides a versatile foundation for creating serene digital interfaces, elegant branding, or understated architectural renderings. Developers and designers can utilize these harmonious neutrals to build experiences that convey stability, peace, and timeless elegance without being stark.

Best used for

  • Architectural visualization
  • Calm and reflective website backgrounds
  • Branding for artisanal crafts or pottery
  • Photography exhibition layouts
  • Editorial design for nature themes
  • Minimalist app dashboards

Suggested color roles

primary

#A9A9A9 - A versatile mid-grey, excellent for main content blocks or navigation elements, providing a solid yet gentle presence.

secondary

#C0C0C0 - A lighter, airy grey suitable for secondary information, borders, or subtle background variations to add depth.

accent

#808080 - A deeper, grounding grey that can be used for subtle calls to action, important icons, or to define structural elements.

background

#D3D3D3 - A very light grey that offers a soft, clean canvas for content, avoiding the harshness of pure white while maintaining brightness.

text

#808080 - A rich, readable grey that provides good contrast against #D3D3D3 or #C0C0C0 for body text, ensuring legibility with a calm tone.

Accessibility notes

  • Verify contrast ratios for text in #A9A9A9 or #B0B0B0 against the lighter #D3D3D3 background.
  • Ensure interactive elements using #C0C0C0 have sufficient visual cues beyond color, especially on light backgrounds.
  • Use #808080 for critical text or icons to ensure maximum readability against the lightest background shades.
  • For small text, consider a darker grey or black if WCAG AA standards are not met with the palette's darker shades.

Recommended combinations

Path Base

Creates a soft, receding background with gentle layering for subtle UI elements or large banners.

#D3D3D3 · #C0C0C0 · #A9A9A9

Stone Depth

Effective for content blocks where #808080 provides a strong heading against a #A9A9A9 background.

#A9A9A9 · #808080 · #B0B0B0

Calm Focus

Ideal for cards or panels, with #D3D3D3 as a base, #C0C0C0 for details, and #808080 for key information.

#C0C0C0 · #D3D3D3 · #808080

CSS variables

:root {
  --stone-garden-1: #A9A9A9;
  --stone-garden-2: #C0C0C0;
  --stone-garden-3: #D3D3D3;
  --stone-garden-4: #808080;
  --stone-garden-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-garden": {
        1: "#A9A9A9",
        2: "#C0C0C0",
        3: "#D3D3D3",
        4: "#808080",
        5: "#B0B0B0",
      }
    }
  }
}

Related searches

tranquil grey color paletteweathered stone colorscontemplative garden huessoft grey design elementsmonochrome calm palette

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#C0C0C0
·
Color 3#D3D3D3
·
Color 4#808080
·
Color 5#B0B0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
1.7:1Fail
1.1:1Fail
2
1.3:1Fail
1.2:1Fail
2.2:1Fail
1.2:1Fail
3
1.6:1Fail
1.2:1Fail
2.6:1Fail
1.4:1Fail
4
1.7:1Fail
2.2:1Fail
2.6:1Fail
1.8:1Fail
5
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.8:1Fail

Similar palettes

More like Stone Garden

View all monochrome
Contemplative Stone Flow
River Stone Calm
River Stone Meditation
Zen Garden Pebbles
Gravel Zen Meditations
Grey Cloud Cascade