Back to palettes

Palette

River Stone Mosaic

Subtle variations of gray and blue-gray evoke the smooth, cool textures of riverbed stones.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8C9C9A#6C7D7B#4F5A59#333C3B#B7C7C5

Palette guide

How to use River Stone Mosaic

Overview

The River Stone Mosaic palette offers subtle variations of cool grey and blue-green, reflecting the smooth textures of riverbed stones. From the deep, almost black #333C3B to the lighter, airy #B7C7C5, it provides a sophisticated, natural, and calming foundation for design projects. Designers and developers can leverage its harmonious blend, including #6C7D7B and #8C9C9A, to create tranquil interfaces, eco-conscious branding, or serene digital environments, emphasizing depth, peace, and natural elegance.

Best used for

  • Nature-inspired branding
  • Calm digital interfaces
  • Eco-conscious product design
  • Tranquil interior spaces
  • Modern web layouts
  • Sustainable fashion visuals

Suggested color roles

primary

Use #6C7D7B as a mid-tone blue-grey primary, providing a stable and versatile base for main content.

secondary

Introduce #8C9C9A as a lighter blue-grey secondary for supporting elements, subtle borders, or soft accents.

accent

Apply #B7C7C5 as the lightest blue-grey for clean highlights, interactive states, or to create spaciousness.

background

Utilize #B7C7C5 for a light, airy backdrop, or #8C9C9A for a slightly deeper, soft background.

text

Employ #333C3B as the darkest, almost black, ensuring excellent readability for body text and headings on light backgrounds.

Accessibility notes

  • Ensure #333C3B text provides excellent contrast on #B7C7C5 or #8C9C9A backgrounds (WCAG AAA).
  • Avoid using #6C7D7B text on #8C9C9A for body text due to low contrast; reserve for larger titles.
  • Consider using #B7C7C5 for large headings or graphic elements on #333C3B for optimal visual impact.
  • Maintain consistent contrast for interactive elements, especially when using similar cool tones.

Recommended combinations

Deep Water

Creates a strong, natural contrast, ideal for impactful headings or key design elements in tranquil themes.

#333C3B · #B7C7C5 · #6C7D7B

Smooth Flow

Offers a gentle, cohesive blend, perfect for subtle backgrounds, layered elements, or soft visual transitions.

#8C9C9A · #6C7D7B · #4F5A59

Light & Grounded

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

#B7C7C5 · #4F5A59 · #333C3B

CSS variables

:root {
  --river-stone-mosaic-2-1: #8C9C9A;
  --river-stone-mosaic-2-2: #6C7D7B;
  --river-stone-mosaic-2-3: #4F5A59;
  --river-stone-mosaic-2-4: #333C3B;
  --river-stone-mosaic-2-5: #B7C7C5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-mosaic-2": {
        1: "#8C9C9A",
        2: "#6C7D7B",
        3: "#4F5A59",
        4: "#333C3B",
        5: "#B7C7C5",
      }
    }
  }
}

Related searches

cool grey blue palettenatural river stone colorsserene mosaic designeco-friendly color schemesubtle cool neutrals

Palette colors

Hex values

Color 1#8C9C9A
·
Color 2#6C7D7B
·
Color 3#4F5A59
·
Color 4#333C3B
·
Color 5#B7C7C5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4:1AA18
1.6:1Fail
2
1.5:1Fail
1.7:1Fail
2.6:1Fail
2.5:1Fail
3
2.5:1Fail
1.7:1Fail
1.6:1Fail
4.1:1AA18
4
4:1AA18
2.6:1Fail
1.6:1Fail
6.5:1AA
5
1.6:1Fail
2.5:1Fail
4.1:1AA18
6.5:1AA

Similar palettes

More like River Stone Mosaic

View all monochrome
Ancient Ruin Stone
Gravel Zen Meditations
River Stone Serenity
Riverbed Smooth Stones
Zen Garden Stone
Azure Depths Gradient