Palette

River Stone Meditation

A tranquil collection of greys, inspired by the smooth, raked pebbles of a serene Japanese zen garden.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how River Stone Meditation 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 River Stone Meditation.

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

Data visualization

#3C3C3C#6B6B6B#9E9E9E#CFCFCF#F0F0F0

Palette guide

How to use River Stone Meditation

Overview

The River Stone Meditation palette is a pure, tranquil monochrome grey scale, inspired by zen gardens. It offers a clean, systematic progression from the deep #3C3C3C to the bright #F0F0F0. This palette, featuring versatile mid-tones like #6B6B6B and #9E9E9E, is ideal for creating a sense of calm, order, and sophistication in any design project. Designers and developers can leverage its minimalist nature to build serene interfaces, refined branding, or elegant print materials, emphasizing clarity and focus.

Best used for

Zen garden inspired design
Meditation app UI/UX
Minimalist branding
Luxury product presentation
Modern architectural portfolios
Clean editorial layouts

Suggested color roles

primary

Use #6B6B6B as a versatile mid-grey primary, acting as a strong foundational element for main content.

secondary

Introduce #9E9E9E as a lighter supporting grey for secondary information, subtle dividers, or background variations.

accent

Apply #F0F0F0 as a near-white for crisp highlights, interactive states, or to create ample whitespace and cleanliness.

background

Utilize #CFCFCF for a light, clean background, or #F0F0F0 for the brightest, most open canvas.

text

Employ #3C3C3C as the darkest grey, ensuring excellent readability for body text and headings on light backgrounds.

Accessibility notes

Ensure #3C3C3C text provides strong contrast on #F0F0F0 or #CFCFCF backgrounds (WCAG AAA).
Avoid using #6B6B6B text on #9E9E9E background for body text due to low contrast; reserve for larger titles.
Use #F0F0F0 for large headings or graphic elements on #3C3C3C for optimal visual impact.
Maintain consistent contrast for interactive elements, ensuring clear visual feedback.

Recommended combinations

High Contrast Zen

Creates a clear, impactful combination, ideal for primary content, calls to action, and clean interfaces.

#3C3C3C · #F0F0F0 · #CFCFCF

Smooth Progression

Offers a soft, harmonious transition, perfect for layered backgrounds, subtle gradients, or visual hierarchy.

#6B6B6B · #9E9E9E · #CFCFCF

Minimalist Core

Provides a clean and functional foundation, suitable for minimalist designs where clarity and focus are paramount.

#F0F0F0 · #6B6B6B · #3C3C3C

CSS variables

:root {
  --river-stone-meditation-1: #3C3C3C;
  --river-stone-meditation-2: #6B6B6B;
  --river-stone-meditation-3: #9E9E9E;
  --river-stone-meditation-4: #CFCFCF;
  --river-stone-meditation-5: #F0F0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-meditation": {
        1: "#3C3C3C",
        2: "#6B6B6B",
        3: "#9E9E9E",
        4: "#CFCFCF",
        5: "#F0F0F0",
      }
    }
  }
}

Hex values

Color 1#3C3C3C

Color 2#6B6B6B

Color 3#9E9E9E

Color 4#CFCFCF

Color 5#F0F0F0

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

7.1:1AAA

9.7:1AAA

2.1:1Fail

2:1Fail

3.4:1AA18

4.7:1AA

4.1:1AA18

2:1Fail

1.7:1Fail

2.4:1Fail

7.1:1AAA

3.4:1AA18

1.7:1Fail

1.4:1Fail

9.7:1AAA

4.7:1AA

2.4:1Fail

1.4:1Fail

Similar palettes

More like River Stone Meditation

View all monochrome

Contemplative Stone Flow

River Stone Calm

Zen Garden Pebbles

Gravel Zen Meditations

Stone Garden

Grey Cloud Cascade