Palette

River Stone Whisper

Soothing neutral tones evoke the quiet presence of smooth, water-worn stones lining a gentle riverbed.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how River Stone Whisper 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 River Stone Whisper.

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

Data visualization

#4F4F4F#7F7F7F#BDBDBD#D3D3D3#A5B18D

Palette guide

How to use River Stone Whisper

Overview

The River Stone Whisper palette presents a soothing collection of neutral tones, evoking the quiet presence of smooth, water-worn stones lining a gentle riverbed. Ranging from the deep #4F4F4F to the very light #D3D3D3, with a unique greenish-grey accent #A5B18D, this palette offers a sophisticated natural aesthetic. Designers and developers can utilize these versatile hues to create minimalist, calm, and organic designs. The interplay of cool grays and a subtle earthy green provides a grounded yet refreshing feel, perfect for understated elegance.

Best used for

Minimalist product branding
Eco-conscious lifestyle blogs
Spa and relaxation app design
Natural skincare packaging
Modern interior design concepts
Photography website layouts

Suggested color roles

primary

#7F7F7F - A balanced, versatile mid-grey, ideal for foundational elements, providing a calm and stable presence without being too dominant.

secondary

#BDBDBD - A lighter, soft grey that complements the primary, suitable for secondary information, dividers, or subtle background textures.

accent

#A5B18D - A unique, muted greenish-grey, perfect for subtle accents, interactive elements, or to introduce a touch of organic warmth.

background

#D3D3D3 - The lightest tone, serving as a clean, airy canvas that enhances the palette's minimalist and serene quality.

text

#4F4F4F - The darkest grey, ensuring excellent readability for body text on the light #D3D3D3 background, offering a soft alternative to black.

Accessibility notes

#4F4F4F on #D3D3D3 offers strong contrast, suitable for all text sizes and meeting WCAG AA standards.
Be cautious when using #BDBDBD or #7F7F7F for text on #D3D3D3; always check contrast ratios, especially for smaller fonts.
The accent color #A5B18D may have insufficient contrast against #D3D3D3 for text, so reserve it for decorative elements or larger headings.
Ensure all interactive elements have clear visual indicators for focus and hover states, maintaining sufficient contrast.

Recommended combinations

Earthy Contrast

Ideal for a clean web layout, with the lightest as background, darkest for main text, and the green-grey for subtle brand accents.

#D3D3D3 · #4F4F4F · #A5B18D

Natural Layers

Use for creating depth in UI components or illustrations, providing a soft, organic layering effect.

#7F7F7F · #BDBDBD · #A5B18D

Grounded Serenity

Employ the deep grey for strong branding or hero sections, balanced by the lightest for background and a mid-tone for supporting content.

#4F4F4F · #D3D3D3 · #7F7F7F

CSS variables

:root {
  --river-stone-whisper-1: #4F4F4F;
  --river-stone-whisper-2: #7F7F7F;
  --river-stone-whisper-3: #BDBDBD;
  --river-stone-whisper-4: #D3D3D3;
  --river-stone-whisper-5: #A5B18D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-whisper": {
        1: "#4F4F4F",
        2: "#7F7F7F",
        3: "#BDBDBD",
        4: "#D3D3D3",
        5: "#A5B18D",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#7F7F7F

Color 3#BDBDBD

Color 4#D3D3D3

Color 5#A5B18D

Accessibility

Contrast checker

2:1Fail

4.4:1AA18

5.5:1AA

3.6:1AA18

2:1Fail

2.1:1Fail

2.7:1Fail

1.8:1Fail

4.4:1AA18

2.1:1Fail

1.3:1Fail

1.2:1Fail

5.5:1AA

2.7:1Fail

1.3:1Fail

1.5:1Fail

3.6:1AA18

1.8:1Fail

1.2:1Fail

1.5:1Fail

Similar palettes

More like River Stone Whisper

Riverbed Smooth Stone

Riverbend Stone

Silent Zen Cairn