Back to palettes

Palette

Stone River Bed

Subtle grays with a hint of deep blue, inspired by smooth river stones and clear, flowing water.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#708090#A9A9A9#D3D3D3#4682B4#36454F

Palette guide

How to use Stone River Bed

Overview

The Stone River Bed palette is a harmonious blend of subtle grays with a captivating hint of deep blue, drawing inspiration from smooth river stones and clear, flowing water. This collection ranges from the tranquil #D3D3D3 to the robust #36454F, with the striking #4682B4 (Steel Blue) providing a vibrant focal point. Mid-tones like #A9A9A9 and #708090 offer versatile support. Designers can leverage this palette to create calm, natural, and visually engaging experiences that convey stability, clarity, and a connection to nature, making it highly effective for various brand identities and digital applications.

Best used for

  • Environmental non-profit websites
  • Wellness and meditation applications
  • Outdoor adventure gear branding
  • Serene home decor product lines
  • Aquatic product packaging
  • Educational content on nature

Suggested color roles

primary

Use #4682B4 (Steel Blue) as the primary focal point, ideal for calls to action, key navigation, or brand highlights.

secondary

Apply #708090 (Slate Gray) as a stable, stone-like base for primary content areas or section headers.

accent

Employ #A9A9A9 (Dark Gray) for subtle textures, secondary buttons, or to add gentle depth to UI elements.

background

Utilize #D3D3D3 (Light Gray) for expansive, calm backgrounds, providing a clean and inviting canvas.

text

Choose #36454F (Charcoal) for body text and important headings to ensure excellent readability and a strong presence.

Accessibility notes

  • Ensure #36454F text on #D3D3D3 backgrounds provides strong contrast for optimal readability.
  • The vibrant #4682B4 offers excellent contrast on #D3D3D3 for headlines and interactive elements.
  • Avoid using #A9A9A9 for critical small text on #708090 backgrounds due to potential low contrast.
  • When layering colors, ensure sufficient differentiation in lightness to prevent visual fatigue.

Recommended combinations

River Flow

Excellent for backgrounds, primary calls to action, and section headers that need to stand out.

#D3D3D3 · #4682B4 · #708090

Stone Depth

Ideal for dark text, subtle UI elements, and a clean, bright canvas, creating a sophisticated look.

#36454F · #A9A9A9 · #D3D3D3

Calm Waters

Perfect for interactive elements, supportive details, and the main page background, creating a serene feel.

#4682B4 · #A9A9A9 · #D3D3D3

CSS variables

:root {
  --stone-river-bed-1: #708090;
  --stone-river-bed-2: #A9A9A9;
  --stone-river-bed-3: #D3D3D3;
  --stone-river-bed-4: #4682B4;
  --stone-river-bed-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-river-bed": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#4682B4",
        5: "#36454F",
      }
    }
  }
}

Related searches

river stone palettecalm blue gray colorsnatural cool tonesserene design palettewater inspired colors

Palette colors

Hex values

Color 1#708090
·
Color 2#A9A9A9
·
Color 3#D3D3D3
·
Color 4#4682B4
·
Color 5#36454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
1:1Fail
2.4:1Fail
2
1.7:1Fail
1.6:1Fail
1.7:1Fail
4.2:1AA18
3
2.7:1Fail
1.6:1Fail
2.7:1Fail
6.6:1AA
4
1:1Fail
1.7:1Fail
2.7:1Fail
2.4:1Fail
5
2.4:1Fail
4.2:1AA18
6.6:1AA
2.4:1Fail

Similar palettes

More like Stone River Bed

View all neutral
Gentle River Stones
River Stone Harmony
Tranquil River Stone
Mindful Stone Serenity
River Stone Calm
River Stone Mosaic