Back to palettes

Palette

Gentle Stream Pebbles

Smooth, cool tones reflecting the serene beauty of pebbles at the bottom of a gentle stream.

MonochromeCalm5 colors
More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gentle Stream Pebbles 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 Gentle Stream Pebbles.

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

Data visualization

#708090#A9A9A9#D3D3D3#F0F8FF#B0C4DE

Palette guide

How to use Gentle Stream Pebbles

Overview

The Gentle Stream Pebbles palette (version 2) delivers a sophisticated range of cool grays and a serene, almost white blue, perfect for creating a clean, grounded, and modern aesthetic. It features the deep slate gray #708090, mid-tone #A9A9A9, and light gray #D3D3D3, complemented by the very subtle #F0F8FF and the soft blue-gray #B0C4DE. This collection is versatile for both digital and print applications, offering a sense of stability and tranquility. Designers can use these hues to build minimalist interfaces, while developers will appreciate their consistency for scalable design systems.

Best used for

  • Corporate websites and professional portfolios
  • Minimalist e-commerce interfaces
  • Interior design concepts for modern spaces
  • Technical documentation and user manuals
  • Architectural renders and urban planning visuals
  • Branding for eco-conscious or sustainable products

Suggested color roles

primary

#708090 serves as a strong, grounding primary color for headers, footers, or main content sections, offering substance.

secondary

#A9A9A9 provides a balanced mid-tone, excellent for secondary navigation, card borders, or inactive states.

accent

#B0C4DE introduces a subtle cool blue accent, perfect for subtle highlights, active states, or graphic elements.

background

#F0F8FF offers an extremely light, near-white background, ensuring maximum readability and a fresh feel.

text

Use #708090 for primary body text, or a standard black for ultimate contrast on lighter backgrounds.

Accessibility notes

  • #708090 on #F0F8FF provides excellent contrast for body text.
  • Ensure any text on #A9A9A9 or #D3D3D3 is sufficiently dark (e.g., black or very dark gray).
  • Avoid light text on #B0C4DE; instead, use a dark color like #708090.
  • Use #D3D3D3 or #F0F8FF as backgrounds for critical information when using darker text.

Recommended combinations

Foundation Stack

For robust layouts, using dark for headers, mid-tone for content, and light for backgrounds.

#708090 · #A9A9A9 · #F0F8FF

Subtle Contrast

Great for UI elements like buttons or cards, providing depth without strong color.

#D3D3D3 · #B0C4DE · #A9A9A9

Clean Horizon

Ideal for clean interfaces with a light base, a touch of blue, and a strong text color.

#F0F8FF · #B0C4DE · #708090

CSS variables

:root {
  --gentle-stream-pebbles-2-1: #708090;
  --gentle-stream-pebbles-2-2: #A9A9A9;
  --gentle-stream-pebbles-2-3: #D3D3D3;
  --gentle-stream-pebbles-2-4: #F0F8FF;
  --gentle-stream-pebbles-2-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-stream-pebbles-2": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#F0F8FF",
        5: "#B0C4DE",
      }
    }
  }
}

Related searches

cool gray color paletteminimalist blue graycalm professional colorsmodern neutral schemestream inspired design

Palette colors

Hex values

Color 1#708090
·
Color 2#A9A9A9
·
Color 3#D3D3D3
·
Color 4#F0F8FF
·
Color 5#B0C4DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
3.8:1AA18
2.3:1Fail
2
1.7:1Fail
1.6:1Fail
2.2:1Fail
1.3:1Fail
3
2.7:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail
4
3.8:1AA18
2.2:1Fail
1.4:1Fail
1.7:1Fail
5
2.3:1Fail
1.3:1Fail
1.2:1Fail
1.7:1Fail

Similar palettes

More like Gentle Stream Pebbles

View all Monochrome