Back to palettes

Palette

Zen Stone Lantern

A soothing grayscale reflecting the simple, elegant forms of smooth stones and soft light in a tranquil Zen garden.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B7B7B7#D0D0D0#E0E0E0#F0F0F0#A0A0A0

Palette guide

How to use Zen Stone Lantern

Overview

The Zen Stone Lantern palette is a masterclass in monochrome subtlety, offering a range of cool grays that evoke quiet elegance and refined simplicity. With shades like the soft #F0F0F0, versatile #D0D0D0, and grounding #A0A0A0, this palette is perfect for creating minimalist and sophisticated designs. Developers will appreciate its consistency for UI elements, ensuring a cohesive user experience, while designers can leverage the varying tones to establish depth without relying on vibrant colors. It's an ideal choice for projects where tranquility and understated luxury are paramount.

Best used for

  • High-end luxury branding
  • Minimalist portfolio websites
  • Architectural visualizations
  • Contemporary art galleries
  • Elegant digital publications
  • User interfaces requiring calm focus

Suggested color roles

primary

#A0A0A0 can serve as a strong, yet understated, primary for main structural elements or key visuals.

secondary

#B7B7B7 is excellent for secondary navigation, subtle dividers, or background elements that need a bit more presence than the lightest shade.

accent

While monochrome, #D0D0D0 can act as a subtle accent when contrasting with #F0F0F0 or #A0A0A0 for hover states or selected items.

background

#F0F0F0 provides a pristine, airy canvas, ensuring maximum readability and a clean aesthetic.

text

For clear, readable text on light backgrounds, a charcoal or near-black is recommended. For text on darker elements, #F0F0F0 works well.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter grays.
  • For body text, pair a dark gray (e.g., #A0A0A0) with #F0F0F0 or #E0E0E0.
  • Avoid using adjacent shades like #D0D0D0 and #E0E0E0 for text/background without checking contrast ratios.
  • Use #A0A0A0 for larger headings or critical information to maximize readability.

Recommended combinations

Gentle Depth

A classic light background, supporting element, and strong text/heading combination.

#F0F0F0 · #D0D0D0 · #A0A0A0

Subtle Layers

Great for layered UI cards, dividers, and subtle informational text.

#E0E0E0 · #B7B7B7 · #A0A0A0

Stone Glow

Useful for creating a sense of soft light and shadow in graphical elements.

#D0D0D0 · #F0F0F0 · #B7B7B7

CSS variables

:root {
  --zen-stone-lantern-1: #B7B7B7;
  --zen-stone-lantern-2: #D0D0D0;
  --zen-stone-lantern-3: #E0E0E0;
  --zen-stone-lantern-4: #F0F0F0;
  --zen-stone-lantern-5: #A0A0A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-stone-lantern": {
        1: "#B7B7B7",
        2: "#D0D0D0",
        3: "#E0E0E0",
        4: "#F0F0F0",
        5: "#A0A0A0",
      }
    }
  }
}

Related searches

minimalist gray color palettemonochrome elegant designzen grayscale schemesubtle ui colorsserene neutral palette

Palette colors

Hex values

Color 1#B7B7B7
·
Color 2#D0D0D0
·
Color 3#E0E0E0
·
Color 4#F0F0F0
·
Color 5#A0A0A0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.5:1Fail
1.8:1Fail
1.3:1Fail
2
1.3:1Fail
1.2:1Fail
1.4:1Fail
1.7:1Fail
3
1.5:1Fail
1.2:1Fail
1.2:1Fail
2:1Fail
4
1.8:1Fail
1.4:1Fail
1.2:1Fail
2.3:1Fail
5
1.3:1Fail
1.7:1Fail
2:1Fail
2.3:1Fail

Similar palettes

More like Zen Stone Lantern

View all monochrome
Calm Stone Meditate
Minimalist Stone Garden
Zen Garden Stone
Zen Pebble Serenity
Zen Sand Garden
Zen Stone Garden