Palette

Riverbed Pebbles Smooth

Smooth, muted greys and cool blue-greys, evoking the worn, polished stones resting at a river's tranquil bottom.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Riverbed Pebbles Smooth 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 Riverbed Pebbles Smooth.

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

Data visualization

#5E6A7A#8C9BAA#B3C0CE#4A525B#38404A

Palette guide

How to use Riverbed Pebbles Smooth

Overview

The Riverbed Pebbles Smooth palette evokes the tranquil depths of a riverbed with its collection of muted greys and cool blue-greys. Featuring a deep, anchoring #38404A, a versatile #5E6A7A, and the light, ethereal #B3C0CE, this palette is perfect for designs seeking a sophisticated yet understated feel. Designers can utilize its subtle variations to create depth and texture, while developers will find the clear progression of values useful for building intuitive user interfaces. The presence of #4A525B and #8C9BAA allows for nuanced detailing, ensuring a cohesive and calm visual experience across various applications that demand quiet elegance.

Best used for

High-end corporate websites
Luxury product packaging
Minimalist app designs
Architectural visualization
Editorial design for serene content
Brand identity for wellness industries

Suggested color roles

primary

Establish a strong base with #5E6A7A for main sections or brand identity, offering a sophisticated blue-grey.

secondary

Use #8C9BAA for supporting elements, subheadings, or background panels, providing a lighter yet cohesive tone.

accent

Reserve #38404A for impactful calls-to-action, important icons, or robust typography, ensuring strong visual weight.

background

Apply #B3C0CE as a clean, expansive background, allowing content to breathe and remain prominent.

text

A deep shade like #38404A or #4A525B provides excellent contrast for body text against lighter backgrounds.

Accessibility notes

Ensure #38404A or #4A525B text on #B3C0CE backgrounds meets WCAG AA contrast ratios for all text sizes.
Be cautious when using #8C9BAA text on #B3C0CE; it might lack sufficient contrast for small font sizes.
For interactive elements, ensure distinct color changes or additional visual cues are present.
Use a robust dark color, such as black or a very dark grey, for essential text if the palette's darkest shades don't meet requirements.

Recommended combinations

Deep River Flow

Excellent for header-body-footer structures, providing strong contrast and a sense of stability.

#38404A · #B3C0CE · #5E6A7A

Subtle Layers

Ideal for layered UI components like cards or modals, creating depth without harsh edges.

#8C9BAA · #B3C0CE · #5E6A7A

Core Contrast

Perfect for text-heavy interfaces, using #B3C0CE as background, #4A525B for body, and #38404A for headings.

#4A525B · #B3C0CE · #38404A

CSS variables

:root {
  --riverbed-pebbles-smooth-1: #5E6A7A;
  --riverbed-pebbles-smooth-2: #8C9BAA;
  --riverbed-pebbles-smooth-3: #B3C0CE;
  --riverbed-pebbles-smooth-4: #4A525B;
  --riverbed-pebbles-smooth-5: #38404A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "riverbed-pebbles-smooth": {
        1: "#5E6A7A",
        2: "#8C9BAA",
        3: "#B3C0CE",
        4: "#4A525B",
        5: "#38404A",
      }
    }
  }
}

Hex values

Color 1#5E6A7A

Color 2#8C9BAA

Color 3#B3C0CE

Color 4#4A525B

Color 5#38404A

Accessibility

Contrast checker

1.9:1Fail

3:1Fail

1.4:1Fail

1.9:1Fail

1.5:1Fail

2.8:1Fail

3.7:1AA18

3:1Fail

1.5:1Fail

4.3:1AA18

5.7:1AA

1.4:1Fail

2.8:1Fail

4.3:1AA18

1.3:1Fail

1.9:1Fail

3.7:1AA18

5.7:1AA

1.3:1Fail

Similar palettes

More like Riverbed Pebbles Smooth

Riverbed Pebbles Smooth

See it in context.

Ready when you are.

Built with Riverbed Pebbles Smooth.

How to use Riverbed Pebbles Smooth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep River Flow

Subtle Layers

Core Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Riverbed Pebbles Smooth