Palette

Tranquil River Stone

Smooth, cool greys and muted blues reflecting the serene presence of stones resting in a clear riverbed.

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

#5E727C#8B9DA6#BCCDCD#DCE7E7#4A5B64

Palette guide

How to use Tranquil River Stone

Overview

The "Tranquil River Stone" palette (v2) offers a sophisticated range of cool greys and muted blues, embodying the quiet strength and serene presence of stones in clear water. This collection, featuring deep tones like #4A5B64 and #5E727C, alongside lighter shades such as #BCCDCD and #DCE7E7, is perfect for designs requiring a grounded, elegant, and minimalist aesthetic. It provides a robust foundation for corporate branding, sophisticated digital interfaces, or contemporary architectural visualizations. Designers and developers will find these hues highly adaptable for creating clean, professional, and calming user experiences across various platforms.

Best used for

Corporate websites and dashboards
High-end real estate branding
Minimalist app interfaces
Luxury product packaging
Architectural visualization
Serene interior design concepts

Suggested color roles

primary

Use #4A5B64 (Dark Blue-Grey) for strong headings, primary navigation, or calls to action, conveying stability and professionalism.

secondary

Apply #5E727C (Medium Blue-Grey) for subheadings, secondary buttons, or background panels, offering depth without overwhelming.

accent

Employ #BCCDCD (Light Aqua-Grey) for hover states, subtle icons, or small graphical elements to introduce a delicate, refreshing touch.

background

Utilize #DCE7E7 (Very Light Grey) to provide a clean, airy canvas that enhances readability and allows content to breathe, perfect for main page backgrounds.

text

Use #4A5B64 (Dark Blue-Grey) for body text and paragraphs, offering a softer alternative to pure black while maintaining excellent contrast.

Accessibility notes

#DCE7E7 as a background paired with #4A5B64 or #5E727C for text ensures excellent readability.
Avoid using #BCCDCD or #DCE7E7 for small text against similarly light backgrounds to prevent contrast issues.
Ensure interactive elements using #8B9DA6 have sufficient contrast against their background.
Always verify color contrast ratios, especially for buttons and links, to support all users.

Recommended combinations

Modern Elegance

Excellent for a clean, professional website layout, using dark for text, light for background, and a subtle accent.

#4A5B64 · #DCE7E7 · #BCCDCD

River Flow

Suitable for data visualization or hierarchical content, offering clear distinction with a serene, flowing feel.

#5E727C · #8B9DA6 · #DCE7E7

Stone Depth

Effective for hero sections or brand logos, creating a sense of depth and understated sophistication.

#4A5B64 · #5E727C · #BCCDCD

CSS variables

:root {
  --tranquil-river-stone-2-1: #5E727C;
  --tranquil-river-stone-2-2: #8B9DA6;
  --tranquil-river-stone-2-3: #BCCDCD;
  --tranquil-river-stone-2-4: #DCE7E7;
  --tranquil-river-stone-2-5: #4A5B64;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-river-stone-2": {
        1: "#5E727C",
        2: "#8B9DA6",
        3: "#BCCDCD",
        4: "#DCE7E7",
        5: "#4A5B64",
      }
    }
  }
}

Hex values

Color 1#5E727C

Color 2#8B9DA6

Color 3#BCCDCD

Color 4#DCE7E7

Color 5#4A5B64

Accessibility

Contrast checker

1.8:1Fail

3.1:1AA18

4:1AA18

1.4:1Fail

1.8:1Fail

1.7:1Fail

2.2:1Fail

2.5:1Fail

3.1:1AA18

1.7:1Fail

1.3:1Fail

4.3:1AA18

4:1AA18

2.2:1Fail

1.3:1Fail

5.6:1AA

1.4:1Fail

2.5:1Fail

4.3:1AA18

5.6:1AA

Similar palettes

More like Tranquil River Stone

Misty Mountain Morning

River Stone Calm

River Stone Harmony