Palette

Quiet Pebble Stream

Gentle grey tones mimic the smooth, worn pebbles found in a tranquil stream bed.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#6D6D6D#9C9C9C#CFCFCF#EAEAEA

Palette guide

How to use Quiet Pebble Stream

Overview

The Quiet Pebble Stream palette is a beautifully serene monochrome collection, drawing inspiration from the smooth, worn stones of a tranquil stream. Comprising varying shades of grey—#4A4A4A, #6D6D6D, #9C9C9C, #CFCFCF, and #EAEAEA—this palette offers designers and developers a sophisticated foundation for minimalist and modern aesthetics. It's perfectly suited for creating clean, professional, and calming interfaces or branding, where subtlety and elegance are paramount. The harmonious progression of tones ensures excellent versatility for backgrounds, text, and UI elements.

Best used for

Modern architecture portfolios
Minimalist UI/UX designs
Corporate and professional branding
Serene photography backdrops
Clean editorial layouts
Tech and industrial design aesthetics

Suggested color roles

primary

Utilize #6D6D6D as a balanced and professional primary color, suitable for main content areas or key visual elements.

secondary

Incorporate #9C9C9C as a softer secondary shade, ideal for supporting elements, subtle dividers, or secondary text.

accent

Apply #4A4A4A as a strong, grounding accent to provide clear contrast and emphasize important information or calls-to-action.

background

Employ #EAEAEA as a light, clean background color, offering a crisp canvas that allows other elements to stand out with clarity.

text

For optimal readability, use #4A4A4A for main body text and headings, with #6D6D6D suitable for secondary text or captions against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter grays like #9C9C9C or #CFCFCF for text.
For body text on #EAEAEA, always use darker grays such as #4A4A4A or #6D6D6D to meet WCAG contrast standards.
Avoid placing light text on #CFCFCF or #9C9C9C without careful contrast checking, as readability may be compromised.
This palette inherently offers good contrast gradients, but always test specific combinations for accessibility.

Recommended combinations

High Contrast Stream

Perfect for clear readability and strong visual separation, ideal for text on a light background.

#4A4A4A · #EAEAEA · #6D6D6D

Soft Gradient Flow

Creates a gentle, subtle transition, great for background sections or layered UI elements.

#EAEAEA · #CFCFCF · #9C9C9C

Balanced Neutrality

A versatile combination for general design, offering a harmonious blend of mid-tones and a grounding dark.

#6D6D6D · #9C9C9C · #4A4A4A

CSS variables

:root {
  --quiet-pebble-stream-1: #4A4A4A;
  --quiet-pebble-stream-2: #6D6D6D;
  --quiet-pebble-stream-3: #9C9C9C;
  --quiet-pebble-stream-4: #CFCFCF;
  --quiet-pebble-stream-5: #EAEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-pebble-stream": {
        1: "#4A4A4A",
        2: "#6D6D6D",
        3: "#9C9C9C",
        4: "#CFCFCF",
        5: "#EAEAEA",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#6D6D6D

Color 3#9C9C9C

Color 4#CFCFCF

Color 5#EAEAEA

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

5.7:1AA

7.4:1AAA

1.7:1Fail

1.9:1Fail

3.3:1AA18

4.3:1AA18

3.2:1AA18

1.9:1Fail

1.8:1Fail

2.3:1Fail