Palette

Smooth Pebble Gradient

The soft, smooth tones of river pebbles polished by time, creating a sense of peace and tranquility.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smooth Pebble Gradient 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 Smooth Pebble Gradient.

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

Data visualization

#555B6E#8990A4#B7C3CC#E0E2E4#3B404E

Palette guide

How to use Smooth Pebble Gradient

Overview

The Smooth Pebble Gradient palette offers a serene and sophisticated selection of cool, muted greys and blues, inspired by polished river stones. Featuring deep #3B404E and #555B6E, transitioning through calming #8990A4 and #B7C3CC, to the soft lightness of #E0E2E4, this palette is exceptionally versatile for creating tranquil digital environments. Designers and developers will find these colors perfect for crafting harmonious interfaces, elegant branding, and soothing backgrounds that convey stability and natural elegance. Its gentle gradient ensures a consistent, peaceful visual flow across all applications.

Best used for

Zen-inspired web designs and applications
Nature-themed branding and packaging
Spa, wellness, and meditation apps
Minimalist interior design concepts
Educational platforms requiring a calm focus
Elegant corporate reports and presentations

Suggested color roles

primary

Use #3B404E as a grounding, deep base for headers, footers, or primary navigation, providing a subtle anchor.

secondary

Apply #555B6E for main content sections or card backgrounds, offering a rich, yet muted, backdrop.

accent

Incorporate #8990A4 for interactive elements, subtle highlights, or secondary text, adding a touch of cool sophistication.

background

Utilize #E0E2E4 for expansive, clean backgrounds or modal overlays, ensuring a fresh and open feel.

text

For dark backgrounds, use #E0E2E4 or white. For light backgrounds, #3B404E ensures excellent readability.

Accessibility notes

Text in #3B404E on #E0E2E4 provides excellent contrast, meeting WCAG AAA standards.
Exercise caution when pairing #8990A4 text on #B7C3CC backgrounds; verify contrast ratios.
Use #E0E2E4 as the primary background for most body text to ensure maximum legibility.
When using #555B6E for text, ensure the background is significantly lighter, like #E0E2E4.

Recommended combinations

Calm Foundation

Ideal for a clean, professional look: #E0E2E4 as background, #3B404E for main text, and #555B6E for headings or secondary elements.

#E0E2E4 · #3B404E · #555B6E

Subtle Depth

Perfect for creating gentle visual hierarchies or layered UI components with a smooth, natural transition.

#B7C3CC · #8990A4 · #555B6E

Elegant Contrast

Use #3B404E for a dark background with #E0E2E4 text, accented by #8990A4 for interactive elements or highlights.

#3B404E · #E0E2E4 · #8990A4

CSS variables

:root {
  --smooth-pebble-gradient-1: #555B6E;
  --smooth-pebble-gradient-2: #8990A4;
  --smooth-pebble-gradient-3: #B7C3CC;
  --smooth-pebble-gradient-4: #E0E2E4;
  --smooth-pebble-gradient-5: #3B404E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smooth-pebble-gradient": {
        1: "#555B6E",
        2: "#8990A4",
        3: "#B7C3CC",
        4: "#E0E2E4",
        5: "#3B404E",
      }
    }
  }
}

Hex values

Color 1#555B6E

Color 2#8990A4

Color 3#B7C3CC

Color 4#E0E2E4

Color 5#3B404E

Accessibility

Contrast checker

2.1:1Fail

3.8:1AA18

5.2:1AA

1.5:1Fail

2.1:1Fail

1.8:1Fail

2.5:1Fail

3.2:1AA18

3.8:1AA18

1.8:1Fail

1.4:1Fail

5.8:1AA

5.2:1AA

2.5:1Fail

1.4:1Fail

8:1AAA

1.5:1Fail

3.2:1AA18

5.8:1AA

8:1AAA

Similar palettes

More like Smooth Pebble Gradient