Palette

Stream Bed Pebbles

The smooth, calming hues of river stones gently eroded by water, creating a tranquil and grounding feel.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#696969#708090#808080#B0C4DE#A9A9A9

Palette guide

How to use Stream Bed Pebbles

Overview

The Stream Bed Pebbles palette offers a serene and grounding collection of earthy grays and blues, mirroring the calming hues of river stones. With a foundation of robust grays like #696969 and #808080, complemented by the subtle blue-gray of #708090, this palette evokes tranquility and natural elegance. The lighter, airy #B0C4DE introduces a touch of sky, while #A9A9A9 provides a versatile mid-tone. This palette is exceptionally suited for designs that aim to convey stability, organic simplicity, and a soothing user experience. It works wonderfully for eco-friendly brands, wellness applications, or any project seeking a natural, understated aesthetic that feels both modern and timeless.

Best used for

Eco-conscious brand identity
Wellness and spa website design
Natural product packaging
Sustainable living content platforms
Architectural and interior design concepts
Calm and meditative app interfaces

Suggested color roles

primary

Use #696969 for strong headings or foundational elements, providing a solid, natural anchor.

secondary

Apply #708090 for subheadings, navigation, or secondary content blocks, introducing a subtle cool undertone.

accent

Utilize #B0C4DE for gentle highlights, interactive elements, or graphic accents to add a touch of lightness and calm.

background

Employ #A9A9A9 or a very light gray/off-white for main content areas, providing a soft, unobtrusive backdrop.

text

For dark backgrounds, #B0C4DE or a crisp white provides excellent contrast. For light backgrounds, #696969 or #708090 ensures readability.

Accessibility notes

Ensure #696969 text on #B0C4DE background meets WCAG AA contrast for good readability.
Avoid using #A9A9A9 text on #B0C4DE for small fonts due to potential low contrast.
Test interactive elements using #B0C4DE against various backgrounds to ensure sufficient contrast.
When using #708090 for body text, ensure adequate font size and line height for comfort.

Recommended combinations

Grounding Depth

Excellent for creating a strong, earthy base for headers, footers, or sophisticated dark sections.

#696969 · #708090 · #808080

River Flow

Ideal for gradients, layered UI elements, or depicting a sense of natural movement and lightness.

#708090 · #A9A9A9 · #B0C4DE

Pebble Contrast

Pair the dark primary with the light accent for high contrast, using #A9A9A9 as a versatile mid-tone.

#696969 · #B0C4DE · #A9A9A9

CSS variables

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

Tailwind config

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

Hex values

Color 1#696969

Color 2#708090

Color 3#808080

Color 4#B0C4DE

Color 5#A9A9A9

Accessibility

Contrast checker

1.4:1Fail

3.1:1AA18

2.3:1Fail

1.4:1Fail

1:1Fail

2.3:1Fail

1.7:1Fail

1.4:1Fail

1:1Fail

2.2:1Fail

1.7:1Fail

3.1:1AA18

2.3:1Fail

2.2:1Fail

1.3:1Fail

2.3:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Stream Bed Pebbles

Stream Bed Pebbles

See it in context.

Ready when you are.

Built with Stream Bed Pebbles.

How to use Stream Bed Pebbles

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Grounding Depth

River Flow

Pebble Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Stream Bed Pebbles