Back to palettes

Palette

River Stone Mosaic

Muted, cool greys and soft blues inspired by the smooth, water-worn pebbles of a tranquil riverbed.

neutralcalm5 colors
More neutral 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

#708090#A9A9A9#B0C4DE#DCDCDC#C0C0C0

Palette guide

How to use River Stone Mosaic

Overview

The River Stone Mosaic palette combines muted, cool greys and soft blues, reminiscent of water-worn pebbles in a tranquil riverbed. From the grounding #708090 (slate grey) to the airy #DCDCDC (gainsboro), this palette offers a calm, sophisticated, and versatile foundation for various design applications, fostering a sense of peace and natural elegance. Designers and developers can leverage shades like #A9A9A9 and #B0C4DE to create harmonious interfaces, branding, or print materials with a serene, understated appeal.

Best used for

  • Coastal-themed branding
  • Serene web interfaces
  • Spa and wellness marketing
  • Understated packaging design
  • Natural history museum exhibits
  • Minimalist interior design

Suggested color roles

primary

Use #708090 (slate grey) as a solid, calming primary for main content and foundational elements.

secondary

Introduce #A9A9A9 (dark grey) as a versatile secondary for supporting elements, borders, or subtle text.

accent

Apply #B0C4DE (light steel blue) to introduce a gentle, cool accent for interactive elements or highlights.

background

Utilize #DCDCDC (gainsboro) as a very light, clean background, or #C0C0C0 (silver) for a slightly deeper base.

text

Employ #708090 or a darker shade like charcoal black for optimal readability for body text against lighter backgrounds.

Accessibility notes

  • Ensure #708090 text provides good contrast on #DCDCDC or #C0C0C0 backgrounds (WCAG AA).
  • Avoid using #A9A9A9 text on #C0C0C0 background for body text due to low contrast.
  • Consider using #DCDCDC for large headings or graphic elements on #708090 for better visibility.
  • Maintain consistent contrast for interactive elements, especially buttons and links, throughout the palette.

Recommended combinations

Cool Harmony

Creates a balanced, refreshing combination, ideal for primary content areas and clean interfaces with a touch of blue.

#708090 · #DCDCDC · #B0C4DE

Soft Grey Blend

Offers a gentle, cohesive blend of light greys, perfect for subtle backgrounds, secondary information, or layered elements.

#A9A9A9 · #C0C0C0 · #DCDCDC

Blue Accent

Provides a subtle pop of cool blue against a grounded grey base, suitable for highlights or branding accents.

#B0C4DE · #708090 · #A9A9A9

CSS variables

:root {
  --river-stone-mosaic-1: #708090;
  --river-stone-mosaic-2: #A9A9A9;
  --river-stone-mosaic-3: #B0C4DE;
  --river-stone-mosaic-4: #DCDCDC;
  --river-stone-mosaic-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "river-stone-mosaic": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#B0C4DE",
        4: "#DCDCDC",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

cool grey blue palettetranquil river colorsnatural stone mosaiccalm neutral designserene UI colors

Palette colors

Hex values

Color 1#708090
·
Color 2#A9A9A9
·
Color 3#B0C4DE
·
Color 4#DCDCDC
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.3:1Fail
3:1Fail
2.2:1Fail
2
1.7:1Fail
1.3:1Fail
1.7:1Fail
1.3:1Fail
3
2.3:1Fail
1.3:1Fail
1.3:1Fail
1:1Fail
4
3:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
2.2:1Fail
1.3:1Fail
1:1Fail
1.3:1Fail

Similar palettes

More like River Stone Mosaic

View all neutral
Gentle River Stones
River Stone Harmony
River Stone Whisper
River Stone Whisper
Tranquil River Stone
Quiet Morning Fog