Palette

Tranquil River Stone

Smooth, cool greys and whites, reminiscent of polished stones in a gently flowing river.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3C3F46#656972#9EA4AD#CFCED1#EBEBEB

Palette guide

How to use Tranquil River Stone

Overview

The "Tranquil River Stone" palette embodies a sophisticated gradient of cool greys, reminiscent of naturally polished river stones. With deep charcoal #3C3F46, balanced mid-tones like #656972 and #9EA4AD, and serene light greys such as #CFCED1 and #EBEBEB, this palette is highly versatile. It’s perfect for designs aiming for a minimalist, elegant, and calming aesthetic without relying on strong colors. Developers will appreciate its utility for creating clean UI, professional dashboards, or foundational branding. Its inherent neutrality allows for flexibility, easily pairing with brighter accent colors if a touch of vibrancy is needed.

Best used for

Minimalist web interfaces
Professional corporate branding
UX/UI design systems
Architectural and interior design portfolios
High-tech product showcases
Clean data visualization dashboards

Suggested color roles

primary

Use #3C3F46 (Dark Charcoal Grey) for main headings, primary navigation, and strong calls to action, providing robust contrast.

secondary

Apply #656972 (Medium Grey) for subheadings, secondary buttons, or background panels that need a subtle depth.

accent

Employ #9EA4AD (Light-Medium Grey) for hover states, subtle borders, or dividing lines to add refinement without stark contrast.

background

Utilize #EBEBEB (Very Light Grey) to create a clean, crisp backdrop, enhancing content readability and offering a spacious feel.

text

Use #3C3F46 (Dark Charcoal Grey) for all body text, ensuring high readability and a sophisticated, soft alternative to pure black.

Accessibility notes

Pairing #EBEBEB with #3C3F46 for text offers superb contrast, meeting WCAG AA standards.
Be cautious when using #CFCED1 or #9EA4AD for small text, especially against #EBEBEB; ensure sufficient contrast.
Interactive elements should use darker greys like #3C3F46 or #656972 to guarantee visibility.
Always test text legibility on different screen types and lighting conditions to ensure universal readability.

Recommended combinations

Clean Slate

Perfect for a modern, clean website, where dark text stands out on a very light background with a subtle accent for details.

#3C3F46 · #EBEBEB · #CFCED1

Layered Depth

Effective for creating visual hierarchy in dashboards or complex layouts, using varying shades of grey.

#656972 · #9EA4AD · #3C3F46

Subtle Harmony

Ideal for subtle background patterns, gradients, or non-interactive UI elements, creating a soft, cohesive look.

#EBEBEB · #CFCED1 · #9EA4AD

CSS variables

:root {
  --tranquil-river-stone-1: #3C3F46;
  --tranquil-river-stone-2: #656972;
  --tranquil-river-stone-3: #9EA4AD;
  --tranquil-river-stone-4: #CFCED1;
  --tranquil-river-stone-5: #EBEBEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-river-stone": {
        1: "#3C3F46",
        2: "#656972",
        3: "#9EA4AD",
        4: "#CFCED1",
        5: "#EBEBEB",
      }
    }
  }
}

Hex values

Color 1#3C3F46

Color 2#656972

Color 3#9EA4AD

Color 4#CFCED1

Color 5#EBEBEB

Accessibility

Contrast checker

1.9:1Fail

4.2:1AA18

6.7:1AA

8.8:1AAA

1.9:1Fail

2.2:1Fail

3.5:1AA18

4.6:1AA

4.2:1AA18

2.2:1Fail

1.6:1Fail

2.1:1Fail