Palette

Tranquil Pebble Path

Gentle greys and soft off-whites inspired by the soothing simplicity of a carefully raked pebble garden.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tranquil Pebble Path 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 Tranquil Pebble Path.

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

Data visualization

#6A6C71#8E9094#B1B3B6#D4D6D9#F0F0F0

Palette guide

How to use Tranquil Pebble Path

Overview

The Tranquil Pebble Path palette offers a serene and minimalist collection of greys and off-whites, perfect for designs that aim to evoke calm, clarity, and understated elegance. Ranging from the deep charcoal #6A6C71 to the soft #F0F0F0, including #8E9094, #B1B3B6, and #D4D6D9, this palette is inspired by the soothing simplicity of a raked pebble garden. Designers and developers can leverage these versatile cool neutrals to create clean, modern interfaces, professional branding, or sophisticated print materials. Its monochromatic nature ensures visual harmony and focuses attention on content, making it ideal for minimalist aesthetics.

Best used for

Minimalist web design and app interfaces
Corporate and professional services branding
Luxury product packaging and marketing
Art galleries and photography portfolios
Zen-inspired wellness or meditation apps
Modern architecture and interior design concepts

Suggested color roles

primary

Utilize #6A6C71 as the dominant color for strong headers, navigation, or foundational brand elements. Its deep grey provides a stable, sophisticated base.

secondary

Employ #8E9094 for supportive content, subheadings, or larger background panels. It offers a softer depth, maintaining visual continuity.

accent

Apply #B1B3B6 for subtle accents, interactive elements, or graphic details. This mid-tone adds a touch of refinement without harshness.

background

Designate #F0F0F0 as the main background color. Its very light, almost white quality provides an expansive, clean canvas for darker text.

text

For optimal readability on light backgrounds like #F0F0F0, use #6A6C71 or #8E9094. On darker backgrounds, #F0F0F0 or a crisp white provides clear contrast.

Accessibility notes

Ensure sufficient contrast between #6A6C71 or #8E9094 text and lighter backgrounds like #D4D6D9 or #F0F0F0.
Avoid pairing #F0F0F0 text directly with #D4D6D9 background without checking WCAG AA contrast ratios.
When using #F0F0F0 for critical information text, ensure it is placed on sufficiently dark backgrounds like #6A6C71.
For body text, prioritize the darkest colors on the lightest backgrounds to maximize legibility.

Recommended combinations

Zen Contrast

Classic minimalist setup: dark grey text on a light background, with a soft mid-grey accent.

#6A6C71 · #F0F0F0 · #B1B3B6

Stone Gradient

Ideal for subtle background gradients, overlays, or textured elements, creating gentle depth.

#8E9094 · #D4D6D9 · #F0F0F0

Pebble Detail

Use the lighter greys for UI elements or cards, grounded by the darkest grey for clear headings or icons.

#B1B3B6 · #D4D6D9 · #6A6C71

CSS variables

:root {
  --tranquil-pebble-path-1: #6A6C71;
  --tranquil-pebble-path-2: #8E9094;
  --tranquil-pebble-path-3: #B1B3B6;
  --tranquil-pebble-path-4: #D4D6D9;
  --tranquil-pebble-path-5: #F0F0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-pebble-path": {
        1: "#6A6C71",
        2: "#8E9094",
        3: "#B1B3B6",
        4: "#D4D6D9",
        5: "#F0F0F0",
      }
    }
  }
}

Hex values

Color 1#6A6C71

Color 2#8E9094

Color 3#B1B3B6

Color 4#D4D6D9

Color 5#F0F0F0

Accessibility

Contrast checker

1.6:1Fail

2.5:1Fail

3.6:1AA18

4.6:1AA

1.6:1Fail

1.5:1Fail

2.2:1Fail

2.8:1Fail

2.5:1Fail

1.5:1Fail

1.4:1Fail

1.8:1Fail

3.6:1AA18

2.2:1Fail

1.4:1Fail

1.3:1Fail

4.6:1AA

2.8:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Tranquil Pebble Path

View all neutral

Calm Stone Pathway

Smooth Pebble Gradient