Palette

Tranquil Stone Path

A peaceful gradient of cool greys, representing the quiet harmony of a minimalist stone garden.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#778899#A9A9A9#C0C0C0#D3D3D3#E0E0E0

Palette guide

How to use Tranquil Stone Path

Overview

The "Tranquil Stone Path" palette is a serene collection of cool greys, meticulously curated to evoke the quiet elegance of a minimalist stone garden. Ranging from the deep steel grey of #778899 to the almost white #E0E0E0, with intermediate shades like #A9A9A9, #C0C0C0, and #D3D3D3, this monochromatic scheme offers exceptional versatility. It’s ideal for designers and developers aiming to create clean, sophisticated, and calming interfaces or branding. The subtle variations in tone provide ample opportunity for visual hierarchy and depth without introducing distracting colors, fostering a sense of peace and order.

Best used for

Minimalist web design
Luxury brand identity
Architectural portfolios
Art gallery websites
Calm meditation apps
High-end product photography backdrops

Suggested color roles

primary

Use #778899 (Light Slate Grey) for main headings, navigation bars, or strong UI elements, providing a solid anchor.

secondary

Apply #A9A9A9 (Dark Grey) for subheadings, secondary buttons, or borders, offering clear separation with a soft touch.

accent

Employ #C0C0C0 (Silver) for subtle highlights, interactive element states, or delicate graphic details to add a touch of polish.

background

Utilize #E0E0E0 (Light Grey) to create a clean, expansive canvas that allows content to stand out, fostering an airy and open feel.

text

Use #778899 (Light Slate Grey) for body text, providing high readability against lighter backgrounds, or for a softer alternative to black.

Accessibility notes

#778899 on #E0E0E0 offers good contrast for body text, ensuring readability.
Be cautious when pairing #D3D3D3 or #C0C0C0 with very light backgrounds for critical information; opt for darker text.
Interactive elements should leverage the darker shades like #778899 or #A9A9A9 for clear visual cues.
Always test contrast ratios for all text and interactive UI components to meet accessibility standards.

Recommended combinations

Garden Path

Perfect for a minimalist website layout, using dark grey for headings, light for backgrounds, and a medium tone for accents.

#778899 · #E0E0E0 · #A9A9A9

Stone Layers

Ideal for subtle background patterns, section dividers, or layered UI elements, creating depth without harshness.

#D3D3D3 · #C0C0C0 · #A9A9A9

Quiet Focus

Effective for content blocks or card designs, ensuring clear text hierarchy against a soft, clean backdrop.

#778899 · #A9A9A9 · #E0E0E0

CSS variables

:root {
  --tranquil-stone-path-1: #778899;
  --tranquil-stone-path-2: #A9A9A9;
  --tranquil-stone-path-3: #C0C0C0;
  --tranquil-stone-path-4: #D3D3D3;
  --tranquil-stone-path-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-stone-path": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#C0C0C0",
        4: "#D3D3D3",
        5: "#E0E0E0",
      }
    }
  }
}

Hex values

Color 1#778899

Color 2#A9A9A9

Color 3#C0C0C0

Color 4#D3D3D3

Color 5#E0E0E0

Accessibility

Contrast checker

1.5:1Fail

2:1Fail

2.4:1Fail

2.8:1Fail

1.5:1Fail

1.3:1Fail

1.6:1Fail

1.8:1Fail

2:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail