Palette

River Stone Calm

Reflects the smooth, muted tones of pebbles found along a serene and quiet riverbed.

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

#36454F#696969#A9A9A9#D3D3D3#F5F5F5

Palette guide

How to use River Stone Calm

Overview

The River Stone Calm palette is a versatile neutral collection, reflecting the smooth, muted tones of riverbed pebbles. It spans from the deep, sophisticated charcoal blue-grey #36454F to the bright, airy #F5F5F5. This range, including balanced mid-greys like #696969 and #A9A9A9, offers designers and developers excellent contrast capabilities and a calm, sophisticated aesthetic. It's perfectly suited for creating professional, modern, and highly legible designs across various platforms.

Best used for

Corporate websites and branding
Luxury brand identity
Modern app interfaces
Sophisticated editorial design
Architectural visualization
Professional presentations

Suggested color roles

primary

Use #696969 as a solid mid-grey primary for main content areas, providing a versatile and stable base.

secondary

Introduce #A9A9A9 as a lighter mid-grey secondary for supporting elements, borders, or subtle background variations.

accent

Apply #F5F5F5 as a near-white for crisp highlights, interactive states, or to create spaciousness and cleanliness.

background

Utilize #D3D3D3 for a light, clean background, or #F5F5F5 for the brightest, most open canvas.

text

Employ #36454F for body text and headings, ensuring excellent readability and a strong, sophisticated presence against lighter palette tones.

Accessibility notes

Ensure #36454F text has excellent contrast against #F5F5F5 or #D3D3D3 backgrounds (WCAG AAA).
Verify that #696969 text on #A9A9A9 background meets minimum contrast requirements.
Use #F5F5F5 for large headings or graphic elements on #36454F for optimal visual impact.
Maintain consistent contrast for interactive elements, especially buttons and links.

Recommended combinations

Deep Contrast

Creates a strong, crisp, and highly legible combination, ideal for primary content and calls to action.

#36454F · #F5F5F5 · #D3D3D3

Subtle Harmony

Offers a soft, balanced blend of mid-tones, perfect for subtle backgrounds, secondary information, or layered elements.

#A9A9A9 · #D3D3D3 · #696969

Grounded & Light

Provides a versatile and professional look, balancing depth with lightness for a sophisticated aesthetic.

#696969 · #F5F5F5 · #36454F

CSS variables

:root {
  --river-stone-calm-4-1: #36454F;
  --river-stone-calm-4-2: #696969;
  --river-stone-calm-4-3: #A9A9A9;
  --river-stone-calm-4-4: #D3D3D3;
  --river-stone-calm-4-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-calm-4": {
        1: "#36454F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#F5F5F5",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#696969

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#F5F5F5

Accessibility

Contrast checker

1.8:1Fail

4.2:1AA18

6.6:1AA

9.1:1AAA

1.8:1Fail

2.3:1Fail

3.7:1AA18

5:1AA

4.2:1AA18

2.3:1Fail

1.6:1Fail

2.2:1Fail

6.6:1AA

3.7:1AA18

1.6:1Fail

1.4:1Fail

9.1:1AAA

5:1AA

2.2:1Fail

1.4:1Fail

Similar palettes

More like River Stone Calm

View all neutral

Gentle River Stones

Mindful Stone Serenity

River Stone Harmony

Serene Pebble Path

Stone Meditation Path

Tranquil River Stone