Palette

Charcoal River Stone

A sophisticated gradient of deep grays, inspired by the smooth, dark stones of a riverbed.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#4F4F4F#696969#708090#A9A9A9

Palette guide

How to use Charcoal River Stone

Overview

The Charcoal River Stone palette presents a sophisticated gradient of deep greys, inspired by the smooth, dark stones found in a riverbed. This collection features rich, earthy tones like #2F4F4F (Dark Slate Gray) and #4F4F4F, transitioning smoothly through mid-greys such as #696969 and #708090 (Slate Gray), and culminating in a lighter #A9A9A9 (Dark Gray). For designers and developers, this palette offers a robust yet calming foundation, perfect for creating clean, minimalist, and serene digital experiences or branding. Its natural, muted quality lends itself to designs that prioritize understated elegance and a grounded feel.

Best used for

Nature-inspired branding and websites
Spa or wellness center design
Eco-friendly product packaging
Minimalist interior design concepts
Photography with a focus on natural elements
Apps promoting calm or mindfulness

Suggested color roles

primary

Use #2F4F4F as the dominant brand color for headers, footers, and primary navigation.

secondary

Apply #4F4F4F for content panels, secondary backgrounds, or important graphical elements.

accent

Employ #708090 for subtle interactive elements, highlights, or to add a touch of cool depth.

background

Choose #A9A9A9 for clean, spacious backgrounds, or #2F4F4F for a deep, immersive canvas.

text

For optimal readability on light backgrounds like #A9A9A9, use #2F4F4F or #4F4F4F. For dark backgrounds, #A9A9A9 works well.

Accessibility notes

Ensure #A9A9A9 text on #2F4F4F background meets WCAG contrast standards for body text.
Avoid using #696969 text on #708090 backgrounds for small text due to potentially low contrast.
Use #2F4F4F for headings and critical information on #A9A9A9 backgrounds for strong readability.
Test interactive elements with #708090 against adjacent darker colors to confirm sufficient visual distinction.

Recommended combinations

River Depths

Excellent for main content areas: dark background, light text, and a slightly lighter dark for subheadings.

#2F4F4F · #A9A9A9 · #4F4F4F

Stone Texture

Create subtle textural effects or layered UI elements, mimicking natural stone variations.

#4F4F4F · #696969 · #708090

Calm Interface

Use #2F4F4F for primary text on a #A9A9A9 background, with #696969 for secondary details or links.

#A9A9A9 · #2F4F4F · #696969

CSS variables

:root {
  --charcoal-river-stone-1: #2F4F4F;
  --charcoal-river-stone-2: #4F4F4F;
  --charcoal-river-stone-3: #696969;
  --charcoal-river-stone-4: #708090;
  --charcoal-river-stone-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-river-stone": {
        1: "#2F4F4F",
        2: "#4F4F4F",
        3: "#696969",
        4: "#708090",
        5: "#A9A9A9",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4F4F4F

Color 3#696969

Color 4#708090

Color 5#A9A9A9

Accessibility

Contrast checker

1.1:1Fail

1.6:1Fail

2.2:1Fail

3.8:1AA18

1.1:1Fail

1.5:1Fail

2:1Fail

3.5:1AA18

1.6:1Fail

1.5:1Fail

1.4:1Fail

2.3:1Fail

2.2:1Fail

2:1Fail

1.4:1Fail

1.7:1Fail

3.8:1AA18

3.5:1AA18

2.3:1Fail

1.7:1Fail

Similar palettes

More like Charcoal River Stone

View all monochrome

Charcoal Graphite Tones

City Alley Shadow

Granite Ridge Calm

Graphite Etching Stone

Monolith Granite Hue

Volcanic Glass Beach