Palette

Zen Pebble Stream

A tranquil collection of light greys and whites, evoking the peaceful flow of a pebble stream.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9A9A9#C0C0C0#D3D3D3#E6E6E6#F5F5F5

Palette guide

How to use Zen Pebble Stream

Overview

The Zen Pebble Stream palette offers a tranquil collection of light greys and whites, evoking the peaceful flow of a pebble stream. This monochrome palette, featuring #A9A9A9, #C0C0C0, #D3D3D3, #E6E6E6, and #F5F5F5, provides a serene and minimal aesthetic. Developers and designers can leverage these harmonious shades to create clean web interfaces, minimalist branding, or photography 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 digital and print media. It's perfect for projects seeking a light, airy, and calming visual identity.

Best used for

Clean web interfaces and minimalist app design
Minimalist branding and corporate identity
Photography portfolios and art gallery websites
Modern editorial layouts and content platforms
Calming app designs for mindfulness or productivity
E-commerce sites for luxury or serene products

Suggested color roles

primary

Use #A9A9A9 for subtle headings, primary UI elements, or important calls to action, providing a soft yet clear presence.

secondary

Apply #C0C0C0 for supporting text, light borders, or secondary graphic elements, offering gentle distinction.

accent

Utilize #D3D3D3 for very light highlights, hover states, or subtle background textures, adding an ethereal touch.

background

Employ #F5F5F5 as a soft off-white, expansive background, creating a clean, airy canvas that promotes focus.

text

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

Accessibility notes

Ensure #A9A9A9 text on #F5F5F5 background meets WCAG AA standards, or opt for a darker grey for body text.
Colors like #C0C0C0, #D3D3D3, and #E6E6E6 will have very low contrast for text against #F5F5F5; use for large decorative elements.
When using #A9A9A9 as a background, ensure text (e.g., #F5F5F5 or #E6E6E6) provides sufficient contrast.
Avoid using #C0C0C0 for body text on #D3D3D3, as readability will be poor due to insufficient contrast.

Recommended combinations

Stream Flow

Creates a smooth, ethereal background with subtle transitions, ideal for hero sections or clean content areas.

#F5F5F5 · #E6E6E6 · #D3D3D3

Pebble Depth

Use #A9A9A9 for main content, #C0C0C0 for secondary, and #E6E6E6 for accents, building a delicate visual hierarchy.

#A9A9A9 · #C0C0C0 · #E6E6E6

Clean Contrast

Pair #A9A9A9 for primary text on #F5F5F5, with #C0C0C0 for subtle secondary information, maintaining a crisp, readable look.

#F5F5F5 · #A9A9A9 · #C0C0C0

CSS variables

:root {
  --zen-pebble-stream-1: #A9A9A9;
  --zen-pebble-stream-2: #C0C0C0;
  --zen-pebble-stream-3: #D3D3D3;
  --zen-pebble-stream-4: #E6E6E6;
  --zen-pebble-stream-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-pebble-stream": {
        1: "#A9A9A9",
        2: "#C0C0C0",
        3: "#D3D3D3",
        4: "#E6E6E6",
        5: "#F5F5F5",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#C0C0C0

Color 3#D3D3D3

Color 4#E6E6E6

Color 5#F5F5F5

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

1.9:1Fail

2.2:1Fail

1.3:1Fail

1.2:1Fail

1.5:1Fail

1.7:1Fail

1.6:1Fail

1.2:1Fail

1.4:1Fail

1.9:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

2.2:1Fail

1.7:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Zen Pebble Stream

Zen Pebble Stream

See it in context.

Ready when you are.

Built with Zen Pebble Stream.

How to use Zen Pebble Stream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Stream Flow

Pebble Depth

Clean Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Zen Pebble Stream