Palette

Cool Stream Pebbles

Smooth, varied grays mimicking the cool, wet stones found at the bottom of a clear stream.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cool Stream Pebbles 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 Cool Stream Pebbles.

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

Data visualization

#696969#708090#A9A9A9#B0C4DE#DCDCDC

Palette guide

How to use Cool Stream Pebbles

Overview

The Cool Stream Pebbles palette offers a grounding and tranquil collection of cool greys and subtle blue-greys, mimicking the smooth, varied stones found at the bottom of a clear stream. Ranging from the deep #696969 to the light #DCDCDC, with harmonious mid-tones like #708090, #A9A9A9, and #B0C4DE, this palette provides versatility for various design applications. Designers and developers can leverage these hex codes to build clean, professional, and calming interfaces, refined branding, or understated architectural visualizations. Its cool, neutral nature ensures visual consistency and fosters a sense of stability and quiet sophistication.

Best used for

Nature-inspired tech product interfaces
Environmental conservation organization websites
Minimalist interior design mood boards
Photography portfolios (especially landscape/still life)
Calming meditation app designs
Sustainable brand identities

Suggested color roles

primary

Utilize #696969 as a strong, grounding primary for headers or important interactive elements.

secondary

Apply #708090 for secondary content areas, subtle dividers, or background elements.

accent

Use #B0C4DE as a soft, refreshing accent for hover states, subtle highlights, or delicate iconography.

background

The very light #DCDCDC serves as an excellent clean, open canvas for content.

text

For optimal readability, use #696969 for main body text on lighter backgrounds, or white on darker tones.

Accessibility notes

Ensure sufficient contrast when pairing different shades of grey, especially for text.
Text in #696969 on #DCDCDC provides excellent readability and meets WCAG standards.
Avoid using mid-grey text (e.g., #A9A9A9) on mid-grey backgrounds (e.g., #B0C4DE) as contrast will be low.
Use a clear visual hierarchy with varying shades to guide users through the content effectively.

Recommended combinations

Deep & Light

Perfect for high-contrast text and background, or defining strong sections.

#696969 · #DCDCDC · #708090

Pebble Layers

Ideal for creating depth in UI elements, card backgrounds, or subtle gradients.

#708090 · #A9A9A9 · #B0C4DE

Stream Flow

Excellent for primary content areas, offering a crisp, readable foundation.

#DCDCDC · #696969 · #A9A9A9

CSS variables

:root {
  --cool-stream-pebbles-1: #696969;
  --cool-stream-pebbles-2: #708090;
  --cool-stream-pebbles-3: #A9A9A9;
  --cool-stream-pebbles-4: #B0C4DE;
  --cool-stream-pebbles-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cool-stream-pebbles": {
        1: "#696969",
        2: "#708090",
        3: "#A9A9A9",
        4: "#B0C4DE",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#696969

Color 2#708090

Color 3#A9A9A9

Color 4#B0C4DE

Color 5#DCDCDC

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

3.1:1AA18

4:1AA18

1.4:1Fail

1.7:1Fail

2.3:1Fail

3:1Fail

2.3:1Fail

1.7:1Fail

1.3:1Fail

1.7:1Fail

3.1:1AA18

2.3:1Fail

1.3:1Fail

4:1AA18

3:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Cool Stream Pebbles

Cool Stream Pebbles

See it in context.

Ready when you are.

Built with Cool Stream Pebbles.

How to use Cool Stream Pebbles

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep & Light

Pebble Layers

Stream Flow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cool Stream Pebbles