Palette

Monochrome River Stone

Smooth transitions of cool grays, evoking the quiet calm of river-worn stones.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F3640#5B636E#8A929B#B8C0C9#E3E7ED

Palette guide

How to use Monochrome River Stone

Overview

The Monochrome River Stone palette offers smooth transitions of cool grays, evoking the quiet calm of river-worn stones. Ranging from the deep charcoal #2F3640 to the soft, airy #E3E7ED, and including versatile mid-tones like #5B636E, #8A929B, and #B8C0C9, this collection provides a serene and sophisticated gradient. Designers and developers will find these hues incredibly useful for crafting tranquil and grounded visual experiences. The natural, earthy cool tones are perfect for projects that aim to convey stability, peace, and a refined sense of organic minimalism.

Best used for

Natural product branding
Calm and minimalist interfaces
Architectural and interior design visuals
Serene web experiences and blogs
Environmental or eco-friendly themes
Wellness and spa branding

Suggested color roles

primary

Utilize #5B636E as a balanced, earthy primary color for main content or robust UI components, conveying stability.

secondary

Apply #8A929B for softer supporting elements, subheadings, or subtle background textures, adding visual comfort.

accent

Employ #2F3640 as a deep, grounding accent for critical elements, strong borders, or dark mode text.

background

Choose #E3E7ED as the lightest, airy background, providing a clean, spacious, and inviting canvas.

text

Opt for #2F3640 for body text on lighter backgrounds to ensure excellent readability and a harmonious, natural feel.

Accessibility notes

Ensure #2F3640 text on #E3E7ED backgrounds meets WCAG AA/AAA contrast ratios for optimal legibility.
Avoid using #B8C0C9 for small text on #E3E7ED, as it may not provide sufficient contrast for some users.
Use a darker shade like #5B636E for focus indicators on interactive elements to ensure visibility.
Consider larger font sizes or bolding for text using lighter shades to improve legibility on light backgrounds.

Recommended combinations

Natural Contrast

Excellent for a clean, readable layout with a light background, deep text, and a balanced mid-tone for hierarchy.

#E3E7ED · #2F3640 · #5B636E

Stone Gradient

Creates a soft, continuous transition for backgrounds or large visual blocks, evoking the smooth surface of a river stone.

#8A929B · #B8C0C9 · #E3E7ED

Deep & Light

Suitable for creating distinct sections, using a dark base with light text and a mid-tone for secondary elements.

#2F3640 · #E3E7ED · #8A929B

CSS variables

:root {
  --monochrome-river-stone-1: #2F3640;
  --monochrome-river-stone-2: #5B636E;
  --monochrome-river-stone-3: #8A929B;
  --monochrome-river-stone-4: #B8C0C9;
  --monochrome-river-stone-5: #E3E7ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-river-stone": {
        1: "#2F3640",
        2: "#5B636E",
        3: "#8A929B",
        4: "#B8C0C9",
        5: "#E3E7ED",
      }
    }
  }
}

Hex values

Color 1#2F3640

Color 2#5B636E

Color 3#8A929B

Color 4#B8C0C9

Color 5#E3E7ED

Accessibility

Contrast checker

2:1Fail

3.9:1AA18

6.6:1AA

9.8:1AAA

2:1Fail

1.9:1Fail

3.3:1AA18

4.9:1AA

3.9:1AA18

1.9:1Fail

1.7:1Fail

2.5:1Fail

6.6:1AA

3.3:1AA18

1.7:1Fail

1.5:1Fail

9.8:1AAA

4.9:1AA

2.5:1Fail

1.5:1Fail

Similar palettes

More like Monochrome River Stone

Minimalist Stone Quarry

Stone Tablet Script