Back to palettes

Palette

River Stone Calm

Gentle, smoothed grays and muted tones, reflecting the natural beauty of pebbles by a riverbed.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A6A6A#808080#A0A0A0#C0C0C0#D3D3D3

Palette guide

How to use River Stone Calm

Overview

The River Stone Calm palette presents a gentle, smoothed range of greys, reflecting the natural beauty of pebbles by a riverbed. This neutral collection, from the grounding #6A6A6A to the airy #D3D3D3, offers designers and developers a sophisticated spectrum for creating serene and elegant experiences. The subtle transitions, including #808080 and #A0A0A0, make it ideal for minimalist aesthetics, providing depth without overwhelming, ensuring a calm and polished finish for both digital and physical applications.

Best used for

  • Spa and wellness branding
  • Luxury product packaging
  • Minimalist web design
  • Architectural renderings
  • Photography portfolios
  • Calm UI/UX interfaces

Suggested color roles

primary

Utilize #808080 as a classic mid-grey primary for main content and foundational elements, offering versatility.

secondary

Introduce #A0A0A0 as a lighter supporting grey for secondary information, borders, or subtle dividers.

accent

Apply #D3D3D3 as the lightest grey for delicate highlights, hover states, or to create spaciousness.

background

Use #C0C0C0 for a clean, light background, or #D3D3D3 for an even brighter, almost-white canvas.

text

Employ #6A6A6A for body text and headings, providing clear readability and a sophisticated, soft contrast against lighter tones.

Accessibility notes

  • Ensure #6A6A6A text has sufficient contrast on #C0C0C0 or #D3D3D3 backgrounds (WCAG AA).
  • Avoid using #808080 text on #A0A0A0 backgrounds for body copy due to low contrast.
  • Consider increasing font size or weight for elements using #A0A0A0 on #C0C0C0 backgrounds.
  • Maintain consistent contrast ratios for interactive elements across the palette.

Recommended combinations

Soft Transition

Creates a gentle, elegant progression, perfect for layered backgrounds or subtle visual hierarchies.

#D3D3D3 · #C0C0C0 · #A0A0A0

Grounded Base

Offers a stable and deep combination, suitable for foundational elements and strong typographic statements.

#6A6A6A · #808080 · #A0A0A0

Light & Dark

Provides clear contrast and balance, ideal for clean layouts where readability is key.

#D3D3D3 · #808080 · #6A6A6A

CSS variables

:root {
  --river-stone-calm-3-1: #6A6A6A;
  --river-stone-calm-3-2: #808080;
  --river-stone-calm-3-3: #A0A0A0;
  --river-stone-calm-3-4: #C0C0C0;
  --river-stone-calm-3-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-calm-3": {
        1: "#6A6A6A",
        2: "#808080",
        3: "#A0A0A0",
        4: "#C0C0C0",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

natural grey palettecalm neutral colorssmooth grey designminimalist grey scalezen stone colors

Palette colors

Hex values

Color 1#6A6A6A
·
Color 2#808080
·
Color 3#A0A0A0
·
Color 4#C0C0C0
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3:1Fail
3.6:1AA18
2
1.4:1Fail
1.5:1Fail
2.2:1Fail
2.6:1Fail
3
2.1:1Fail
1.5:1Fail
1.4:1Fail
1.7:1Fail
4
3:1Fail
2.2:1Fail
1.4:1Fail
1.2:1Fail
5
3.6:1AA18
2.6:1Fail
1.7:1Fail
1.2:1Fail

Similar palettes

More like River Stone Calm

View all neutral
River Stone Medley
Weathered Stone Path
Ancient Ruin Stone
Coastal Cliff Path
Coastal Pottery Sand
Dusty Plains Serene