Back to palettes

Palette

Cool River Stone

Smooth, understated grays inspired by pebbles at the bottom of a clear, flowing cool river.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DEE4E7#C3CACD#A7B0B4#8B969C#707A80

Palette guide

How to use Cool River Stone

Overview

The Cool River Stone palette offers a grounding and tranquil collection of cool greys, inspired by the smooth, understated beauty of pebbles at the bottom of a clear stream. Ranging from the light #DEE4E7 to the deeper #707A80, with harmonious mid-tones like #C3CACD, #A7B0B4, and #8B969C, this palette provides versatility for various design applications. Designers and developers can leverage these hex codes to build clean, professional, and calming interfaces, refined branding, or understated architectural visualizations. Its cool, neutral nature ensures visual consistency and fosters a sense of stability and quiet sophistication.

Best used for

  • Minimalist corporate websites
  • Luxury home decor or furniture e-commerce
  • Architectural firm branding
  • Nature-inspired wellness apps
  • High-end photography portfolios
  • Sustainable fashion brand identities

Suggested color roles

primary

Utilize #707A80 as a strong, grounding primary for headers or important interactive elements.

secondary

Apply #8B969C for secondary content areas, subtle dividers, or background elements.

accent

Use #C3CACD as a light accent for hover states, subtle highlights, or delicate iconography.

background

The very light #DEE4E7 serves as an excellent clean, open canvas for content.

text

For optimal readability, use #707A80 for main body text on lighter backgrounds, or white on darker tones.

Accessibility notes

  • Ensure sufficient contrast when pairing different shades of grey, especially for text.
  • Text in #707A80 on #DEE4E7 provides excellent readability and meets WCAG standards.
  • Avoid using mid-grey text (e.g., #A7B0B4) on mid-grey backgrounds (e.g., #C3CACD) as contrast will be low.
  • Use a clear visual hierarchy with varying shades to guide users through the content effectively.

Recommended combinations

Deep & Light

Perfect for high-contrast text and background, or defining strong sections.

#707A80 · #DEE4E7 · #C3CACD

Stone Layers

Ideal for creating depth in UI elements, card backgrounds, or subtle gradients.

#8B969C · #A7B0B4 · #C3CACD

Clean Flow

Excellent for primary content areas, offering a crisp, readable foundation.

#DEE4E7 · #707A80 · #A7B0B4

CSS variables

:root {
  --cool-river-stone-1: #DEE4E7;
  --cool-river-stone-2: #C3CACD;
  --cool-river-stone-3: #A7B0B4;
  --cool-river-stone-4: #8B969C;
  --cool-river-stone-5: #707A80;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cool-river-stone": {
        1: "#DEE4E7",
        2: "#C3CACD",
        3: "#A7B0B4",
        4: "#8B969C",
        5: "#707A80",
      }
    }
  }
}

Related searches

cool grey color paletteriver stone hex codescalm neutral design colorsminimalist grey UI palettesophisticated cool tones

Palette colors

Hex values

Color 1#DEE4E7
·
Color 2#C3CACD
·
Color 3#A7B0B4
·
Color 4#8B969C
·
Color 5#707A80
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.4:1Fail
3.4:1AA18
2
1.3:1Fail
1.3:1Fail
1.8:1Fail
2.6:1Fail
3
1.7:1Fail
1.3:1Fail
1.4:1Fail
2:1Fail
4
2.4:1Fail
1.8:1Fail
1.4:1Fail
1.5:1Fail
5
3.4:1AA18
2.6:1Fail
2:1Fail
1.5:1Fail

Similar palettes

More like Cool River Stone

View all cool
Agate Grotto
Grey Cloud Reflection
Misty Sky Drizzle
River Stone
Riverbed Pebble Smooth
Seaside Morning Fog