Palette

River Stone Harmony

Smooth, cool grays reflecting the varied, natural colors of pebbles and stones found in a clear riverbed.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4E4D#6B7777#9EA7A7#C8CFCF#E7EDED

Palette guide

How to use River Stone Harmony

Overview

The River Stone Harmony palette features a beautiful progression of cool, muted greys with subtle teal undertones, evoking the tranquil essence of a clear riverbed. Ranging from the deep #4A4E4D to the airy #E7EDED, it's perfect for creating serene and sophisticated digital or physical spaces. Designers and developers will find its harmonious blend, including #6B7777 and #9EA7A7, ideal for projects seeking natural calm, understated elegance, and a refreshing yet grounded aesthetic.

Best used for

Wellness and meditation apps
Eco-friendly product branding
Calm corporate websites
Interior design for tranquil spaces
Minimalist graphic design
Nature-inspired digital art

Suggested color roles

primary

Use #6B7777 as a mid-tone grey-teal primary, providing a soft yet stable base for main elements.

secondary

Introduce #9EA7A7 as a lighter grey-teal secondary for supporting elements, subtle borders, or soft contrast.

accent

Apply #E7EDED as a very light, almost white, for clean highlights, interactive states, or spaciousness.

background

Utilize #C8CFCF for a light, airy background, or #E7EDED for the brightest, most open canvas.

text

Employ #4A4E4D as the darkest grey-teal for body text and headings, ensuring excellent readability on light backgrounds.

Accessibility notes

Ensure #4A4E4D text provides strong contrast on #E7EDED or #C8CFCF backgrounds (WCAG AA).
Avoid using #6B7777 text on #9EA7A7 for body text due to insufficient contrast; reserve for larger headings.
Consider using #E7EDED for large headings or graphic elements on #4A4E4D for optimal visual impact.
Maintain consistent contrast for interactive elements like buttons and links across the palette.

Recommended combinations

Deep Serenity

Creates a strong, calming contrast, ideal for impactful headings or key design elements in tranquil themes.

#4A4E4D · #E7EDED · #6B7777

Soft Flow

Offers a gentle, harmonious blend, perfect for subtle backgrounds, layered elements, or soft visual transitions.

#9EA7A7 · #C8CFCF · #E7EDED

Balanced Calm

Provides a versatile and professional look, balancing depth with lightness for a sophisticated and serene aesthetic.

#6B7777 · #C8CFCF · #4A4E4D

CSS variables

:root {
  --river-stone-harmony-1: #4A4E4D;
  --river-stone-harmony-2: #6B7777;
  --river-stone-harmony-3: #9EA7A7;
  --river-stone-harmony-4: #C8CFCF;
  --river-stone-harmony-5: #E7EDED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-harmony": {
        1: "#4A4E4D",
        2: "#6B7777",
        3: "#9EA7A7",
        4: "#C8CFCF",
        5: "#E7EDED",
      }
    }
  }
}

Hex values

Color 1#4A4E4D

Color 2#6B7777

Color 3#9EA7A7

Color 4#C8CFCF

Color 5#E7EDED

Accessibility

Contrast checker

1.8:1Fail

3.4:1AA18

5.3:1AA

7.1:1AAA

1.8:1Fail

1.9:1Fail

2.9:1Fail

3.9:1AA18

3.4:1AA18

1.9:1Fail

1.6:1Fail

2.1:1Fail