Back to palettes

Palette

River Stone

A serene palette inspired by the smooth, cool textures of river stones and gentle flowing water.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#546E7A#78909C#90A4AE#B0BEC5#37474F

Palette guide

How to use River Stone

Overview

The River Stone palette is a serene collection inspired by the smooth, cool textures of river stones and gentle flowing water. It features a range of harmonious blue-greys and greys: a medium blue-grey (#546E7A), a lighter cool grey (#78909C), a soft grey (#90A4AE), a very light grey (#B0BEC5), and a deep dark grey (#37474F). Designers can utilize these understated hues to create calm, sophisticated, and minimalist designs. It's an excellent choice for projects requiring a sense of tranquility, professionalism, and modern elegance.

Best used for

  • Minimalist website and app design
  • Corporate and professional branding
  • Wellness, spa, or meditation product lines
  • Architectural visualization and interior design
  • Tech product interfaces and documentation
  • Luxury goods packaging with a subtle touch

Suggested color roles

primary

Use #37474F (Dark Grey) or #546E7A (Blue-Grey) as a strong foundation for backgrounds or primary elements.

secondary

Apply #78909C (Cool Grey) or #90A4AE (Soft Grey) for supporting content, navigation, or subtle visual hierarchy.

accent

Incorporate #B0BEC5 (Light Grey) for delicate highlights, text backgrounds, or to introduce a clean, airy feel.

background

#B0BEC5 provides a clean, bright background, while #37474F offers a deep, sophisticated canvas.

text

For lighter backgrounds, a dark charcoal or black offers optimal contrast. White text stands out beautifully against #37474F, #546E7A, and #78909C.

Accessibility notes

  • Ensure sufficient contrast between different shades of grey, especially for text and interactive elements.
  • Avoid using #B0BEC5 for small text on #90A4AE, as the contrast might be insufficient.
  • White text on #37474F provides excellent readability for all users.
  • Always use a contrast checker to verify all text and interactive elements meet WCAG AA standards.

Recommended combinations

Subtle Depth

Ideal for minimalist branding, clean web layouts, or professional documentation.

#37474F · #B0BEC5 · #78909C

Cool Harmony

Excellent for creating a calm atmosphere in backgrounds, UI elements, or subtle gradients.

#546E7A · #90A4AE · #B0BEC5

Stone Contrast

Perfect for establishing clear visual hierarchy, distinct sections, or elegant data displays.

#78909C · #37474F · #B0BEC5

CSS variables

:root {
  --river-stone-2-1: #546E7A;
  --river-stone-2-2: #78909C;
  --river-stone-2-3: #90A4AE;
  --river-stone-2-4: #B0BEC5;
  --river-stone-2-5: #37474F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-2": {
        1: "#546E7A",
        2: "#78909C",
        3: "#90A4AE",
        4: "#B0BEC5",
        5: "#37474F",
      }
    }
  }
}

Related searches

cool grey palettenatural stone colorsminimalist blue-greyserene UI colorssophisticated neutral palette

Palette colors

Hex values

Color 1#546E7A
·
Color 2#78909C
·
Color 3#90A4AE
·
Color 4#B0BEC5
·
Color 5#37474F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.1:1Fail
2.8:1Fail
1.8:1Fail
2
1.6:1Fail
1.3:1Fail
1.8:1Fail
2.9:1Fail
3
2.1:1Fail
1.3:1Fail
1.4:1Fail
3.7:1AA18
4
2.8:1Fail
1.8:1Fail
1.4:1Fail
5.1:1AA
5
1.8:1Fail
2.9:1Fail
3.7:1AA18
5.1:1AA

Similar palettes

More like River Stone

View all cool
Misty Sky Drizzle
Aegean Isle Horizon
Agate Grotto
Alpine Mist
Arctic Glacier Melt
Calm Lake Reflections