Palette

River Stone Serenity

A soothing palette inspired by the cool, smooth textures and earthy tones of river worn stones.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#b3c0c0#8a9a9a#6a7a7a#5b6b6b#3a4a4a

Palette guide

How to use River Stone Serenity

Overview

The River Stone Serenity palette offers a deeply calming and sophisticated collection of cool, earthy grays, perfect for designs seeking tranquility. Inspired by smooth river-worn stones, this palette features a range from the subtle lightness of #b3c0c0 to the profound depth of #3a4a4a. Mid-tones like #8a9a9a, #6a7a7a, and #5b6b6b provide versatile options for layering and depth. Designers and developers can leverage these muted, natural hues to create experiences that feel grounded, serene, and effortlessly elegant, ideal for minimalist aesthetics and organic themes.

Best used for

Spa and wellness branding
Eco-friendly product packaging
Minimalist website design
Calm interior design concepts
Meditation app interfaces
Nature-inspired digital art

Suggested color roles

primary

#6a7a7a - A balanced, versatile mid-tone grey, ideal for primary content areas or main structural elements, providing a stable foundation.

secondary

#8a9a9a - A lighter, softer grey that complements the primary, suitable for secondary information, subheadings, or background textures.

accent

#3a4a4a - The darkest shade, perfect for strong accents, call-to-action buttons, or elements requiring high contrast and visual weight.

background

#b3c0c0 - The lightest tone, serving as a clean, airy canvas that promotes a sense of calm and spaciousness.

text

#5b6b6b - A dark enough grey for body text on lighter backgrounds like #b3c0c0, ensuring good readability without harsh black.

Accessibility notes

Ensure adequate contrast when using #8a9a9a for text on #b3c0c0 backgrounds; WCAG AA requires 4.5:1 for normal text.
#3a4a4a provides excellent contrast against #b3c0c0, making it suitable for headings and critical information.
Avoid placing #6a7a7a text directly on #5b6b6b backgrounds due to insufficient luminance difference.
For interactive elements, ensure their states (hover, focus) maintain or improve contrast for accessibility.

Recommended combinations

Soft Contrast

Ideal for elegant typography on a light base, with the darkest shade for headings and the mid-tone for subtle details.

#B3C0C0 · #3A4A4A · #8A9A9A

Layered Depth

Use for UI elements like cards or panels, creating subtle visual hierarchy through tonal layering.

#8A9A9A · #5B6B6B · #6A7A7A

Bold Statement

Perfect for impactful branding, using the deep shade as a primary, balanced by the lightest for contrast and a mid-tone for supporting elements.

#3A4A4A · #B3C0C0 · #5B6B6B

CSS variables

:root {
  --river-stone-serenity-2-1: #b3c0c0;
  --river-stone-serenity-2-2: #8a9a9a;
  --river-stone-serenity-2-3: #6a7a7a;
  --river-stone-serenity-2-4: #5b6b6b;
  --river-stone-serenity-2-5: #3a4a4a;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-serenity-2": {
        1: "#b3c0c0",
        2: "#8a9a9a",
        3: "#6a7a7a",
        4: "#5b6b6b",
        5: "#3a4a4a",
      }
    }
  }
}

Hex values

Color 1#b3c0c0

Color 2#8a9a9a

Color 3#6a7a7a

Color 4#5b6b6b

Color 5#3a4a4a

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

3:1Fail

5:1AA

1.6:1Fail

1.5:1Fail

1.9:1Fail

3.2:1AA18

2.4:1Fail

1.5:1Fail

1.2:1Fail

2.1:1Fail

3:1Fail

1.9:1Fail

1.2:1Fail

1.7:1Fail

5:1AA

3.2:1AA18

2.1:1Fail

1.7:1Fail

Similar palettes

More like River Stone Serenity

View all earth

Stream Bed Pebbles

Riverbank Stone

Whispering Willow Shade

Ancient River Stones

Bamboo Grove Mist

Delta Murmur