Palette

Zen River Pebble

A soothing collection of grays, mirroring the smooth, calming presence of river-worn pebbles.

MonochromeCalm5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BCAAA4#9E9E9E#757575#616161#424242

Palette guide

How to use Zen River Pebble

Overview

The Zen River Pebble palette offers a sophisticated range of grays, mirroring the smooth, calming presence of river-worn stones. This monochromatic collection, featuring `#BCAAA4`, `#9E9E9E`, `#757575`, `#616161`, and `#424242`, is perfect for designers and developers seeking a minimalist, grounded aesthetic. Its subtle variations provide depth without sacrificing simplicity, making it versatile for professional and serene applications. The palette exudes stability and quiet strength, ideal for creating clean, uncluttered interfaces and branding that emphasizes timelessness and understated elegance.

Best used for

Minimalist website designs
Corporate branding and reports
Architectural firm portfolios
Luxury product packaging
Editorial and print layouts
Modern art gallery interfaces

Suggested color roles

primary

Employ `#757575` as a balanced base for main content areas or primary UI elements, offering stable neutrality.

secondary

Use `#616161` for secondary headings, navigation, or subtle dividers, providing a slightly deeper tone.

accent

Reserve `#424242` for strong emphasis, calls to action, or critical text, ensuring maximum impact and readability.

background

Apply `#BCAAA4` as a warm, light background, providing a soft, inviting canvas that avoids stark white.

text

Utilize `#424242` for body text on lighter backgrounds like `#BCAAA4` or `#9E9E9E` for optimal readability and contrast.

Accessibility notes

Ensure sufficient contrast between text and background, particularly when using lighter grays like `#9E9E9E` or `#BCAAA4` for text.
Text in `#424242` on `#BCAAA4` provides excellent contrast, suitable for primary content.
Avoid placing light gray text on medium gray backgrounds (e.g., `#9E9E9E` on `#757575`) without checking WCAG contrast ratios.
Interactive elements should have distinct hover/focus states, especially when using similar shades like `#757575` and `#616161`.

Recommended combinations

Foundation & Depth

Ideal for main content blocks: `#BCAAA4` for background, `#757575` for body text, and `#424242` for headings or strong accents.

#BCAAA4 · #757575 · #424242

Subtle Layers

Great for secondary navigation or sidebars, using `#9E9E9E` as a base, `#616161` for links, and `#BCAAA4` for subtle highlights.

#9E9E9E · #616161 · #BCAAA4

Pebble Contrast

Effective for dark mode interfaces or prominent sections, with `#424242` as background, `#9E9E9E` for text, and `#757575` for interactive elements.

#424242 · #9E9E9E · #757575

CSS variables

:root {
  --zen-river-pebble-1: #BCAAA4;
  --zen-river-pebble-2: #9E9E9E;
  --zen-river-pebble-3: #757575;
  --zen-river-pebble-4: #616161;
  --zen-river-pebble-5: #424242;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-river-pebble": {
        1: "#BCAAA4",
        2: "#9E9E9E",
        3: "#757575",
        4: "#616161",
        5: "#424242",
      }
    }
  }
}

Hex values

Color 1#BCAAA4

Color 2#9E9E9E

Color 3#757575

Color 4#616161

Color 5#424242

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

2.8:1Fail

4.5:1AA

1.2:1Fail

1.7:1Fail

2.3:1Fail

3.8:1AA18

2.1:1Fail

1.7:1Fail

1.3:1Fail

2.2:1Fail

2.8:1Fail

2.3:1Fail

1.3:1Fail

1.6:1Fail

4.5:1AA

3.8:1AA18

2.2:1Fail

1.6:1Fail

Similar palettes

More like Zen River Pebble

View all Monochrome

Gentle Stream Pebbles

Winter Woodland Calm

Monochrome Ocean Depths

Stormy Beach Day

Zen River Stones

Ancient Stone Whisper