Back to palettes

Palette

Zen Pebble Serenity

A minimalist and soothing grayscale, inspired by the tranquil harmony of a Japanese Zen garden.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Zen Pebble Serenity 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 Pebble Serenity.

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

Data visualization

#D3D3D3#C0C0C0#A9A9A9#778899#696969

Palette guide

How to use Zen Pebble Serenity

Overview

The Zen Pebble Serenity palette offers a minimalist and soothing grayscale, inspired by the tranquil harmony of a Japanese Zen garden. This collection, featuring #D3D3D3, #C0C0C0, #A9A9A9, #778899, and #696969, provides a calm and sophisticated foundation for any design. Developers and designers can leverage these cool, neutral shades to create meditation apps, luxury branding, or architectural portfolios. The subtle tonal variations allow for nuanced depth and a sense of quiet contemplation, making it ideal for conveying understated elegance and a peaceful, uncluttered aesthetic across various media. It's perfect for projects emphasizing calm and modern design.

Best used for

  • Meditation and wellness app interfaces
  • Minimalist art platforms and digital content
  • Luxury branding and high-end product design
  • Architectural portfolios and firm websites
  • Calm digital experiences and user interfaces
  • Product packaging with a sophisticated feel

Suggested color roles

primary

Use #696969 for strong headings, primary UI elements, or important calls to action, providing a solid, grounding presence.

secondary

Apply #778899 (slate grey) for supporting text, subtle branding elements, or secondary navigation, offering gentle distinction.

accent

Utilize #D3D3D3 for light highlights, hover states, or subtle background textures, adding a touch of understated brilliance.

background

Employ #C0C0C0 as a medium-light grey base, creating a soft, calming canvas that promotes focus.

text

For subheadings on darker backgrounds, use #A9A9A9. For main body text on #C0C0C0, a dark charcoal or black is recommended for readability.

Accessibility notes

  • Ensure #696969 text on #D3D3D3 background meets WCAG AA standards for readability.
  • Colors like #A9A9A9 will have very low contrast for text against #C0C0C0 or #D3D3D3; reserve for larger titles.
  • When using #696969 or #778899 as a background, ensure text (e.g., #D3D3D3 or #C0C0C0) provides sufficient contrast.
  • Avoid pairing #C0C0C0 with #A9A9A9 for body text, as contrast will be insufficient for comfortable reading.

Recommended combinations

Soft Layers

Creates a gentle, harmonious background for a minimalist aesthetic, perfect for subtle card or section distinctions.

#D3D3D3 · #C0C0C0 · #A9A9A9

Serene Depth

Use #696969 for prominent features, #778899 for secondary, and #A9A9A9 for subtle details, building a layered design.

#696969 · #778899 · #A9A9A9

Calm Contrast

Pair #696969 for primary text on #C0C0C0, with #778899 for secondary information, for a sophisticated, readable layout.

#C0C0C0 · #696969 · #778899

CSS variables

:root {
  --zen-pebble-serenity-1: #D3D3D3;
  --zen-pebble-serenity-2: #C0C0C0;
  --zen-pebble-serenity-3: #A9A9A9;
  --zen-pebble-serenity-4: #778899;
  --zen-pebble-serenity-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-pebble-serenity": {
        1: "#D3D3D3",
        2: "#C0C0C0",
        3: "#A9A9A9",
        4: "#778899",
        5: "#696969",
      }
    }
  }
}

Related searches

zen grey color palettepebble inspired schemecalm monochrome designminimalist serenity colorsslate grey UI

Palette colors

Hex values

Color 1#D3D3D3
·
Color 2#C0C0C0
·
Color 3#A9A9A9
·
Color 4#778899
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.4:1Fail
3.7:1AA18
2
1.2:1Fail
1.3:1Fail
2:1Fail
3:1AA18
3
1.6:1Fail
1.3:1Fail
1.5:1Fail
2.3:1Fail
4
2.4:1Fail
2:1Fail
1.5:1Fail
1.5:1Fail
5
3.7:1AA18
3:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Zen Pebble Serenity

View all monochrome
Calm Stone Meditate
Minimalist Stone Garden
Quiet Pebble Stream
Stone Garden Meditation
Tranquil Stone Path
Zen Garden Grey