Back to palettes

Palette

River Stone Calm

A tranquil palette inspired by smooth river stones reflecting a soft, overcast sky.

neutralcalm5 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

#6B7A8F#A3A7A5#CED0CE#D9D8D7#F0F0F0

Palette guide

How to use River Stone Calm

Overview

The River Stone Calm palette presents a serene collection of cool greys with subtle blue-green undertones, reminiscent of smooth river stones under an overcast sky. From the deeper #6B7A8F to the near-white #F0F0F0, it offers a sophisticated, peaceful spectrum. This palette, including versatile mid-tones like #A3A7A5 and #CED0CE, provides designers and developers with a calming yet elegant foundation for creating tranquil digital or physical experiences, emphasizing understated beauty and clarity.

Best used for

  • Spa and wellness branding
  • Minimalist UI/UX design
  • Luxury home decor visualization
  • Peaceful website themes
  • Modern art galleries
  • Eco-friendly product design

Suggested color roles

primary

Use #6B7A8F as a muted blue-grey primary, providing a calming and sophisticated anchor for main elements.

secondary

Introduce #A3A7A5 as a soft mid-grey secondary for supporting content, subtle borders, or background variations.

accent

Apply #F0F0F0 as an off-white for crisp highlights, interactive states, or to create clean, spacious areas.

background

Utilize #D9D8D7 for a very light, airy backdrop, or #CED0CE for a slightly deeper, soft base.

text

Employ #6B7A8F or a dark charcoal for body text and headings, ensuring optimal readability against lighter backgrounds.

Accessibility notes

  • Ensure #6B7A8F text provides good contrast on #F0F0F0 or #D9D8D7 backgrounds (WCAG AA).
  • Avoid using #A3A7A5 text on #CED0CE for body text due to low contrast; reserve for larger titles or accents.
  • Consider using #F0F0F0 for large headings or graphic elements on #6B7A8F for better visibility.
  • Maintain consistent contrast ratios for interactive elements across the palette.

Recommended combinations

Soft Gradient

Creates a gentle, airy feel, perfect for layered backgrounds or subtle visual hierarchies in tranquil designs.

#F0F0F0 · #D9D8D7 · #CED0CE

Cool Contrast

Offers a balanced and sophisticated contrast, ideal for primary content areas and clean interfaces.

#6B7A8F · #F0F0F0 · #A3A7A5

Subtle Depth

Provides a harmonious, understated blend, suitable for secondary information or soft design elements.

#A3A7A5 · #CED0CE · #D9D8D7

CSS variables

:root {
  --river-stone-calm-1: #6B7A8F;
  --river-stone-calm-2: #A3A7A5;
  --river-stone-calm-3: #CED0CE;
  --river-stone-calm-4: #D9D8D7;
  --river-stone-calm-5: #F0F0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-calm": {
        1: "#6B7A8F",
        2: "#A3A7A5",
        3: "#CED0CE",
        4: "#D9D8D7",
        5: "#F0F0F0",
      }
    }
  }
}

Related searches

cool grey paletteserene blue grey colorspeaceful neutral designminimalist stone thememodern calm UI

Palette colors

Hex values

Color 1#6B7A8F
·
Color 2#A3A7A5
·
Color 3#CED0CE
·
Color 4#D9D8D7
·
Color 5#F0F0F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.8:1Fail
3.1:1AA18
3.8:1AA18
2
1.8:1Fail
1.6:1Fail
1.7:1Fail
2.1:1Fail
3
2.8:1Fail
1.6:1Fail
1.1:1Fail
1.4:1Fail
4
3.1:1AA18
1.7:1Fail
1.1:1Fail
1.2:1Fail
5
3.8:1AA18
2.1:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like River Stone Calm

View all neutral
Zen Garden Pebble
Coastal Cliffs
Coastal Stone Pebble
Gentle River Stones
River Stone Calm
River Stone Harmony