Palette

Basalt Stream Pebble

A serene grayscale collection inspired by smooth basalt pebbles found in a tranquil stream bed.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Basalt Stream Pebble 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 Basalt Stream Pebble.

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

Data visualization

#4F5D75#6D7E98#99A9C2#BFCCD9#3A475C

Palette guide

How to use Basalt Stream Pebble

Overview

The Basalt Stream Pebble palette offers a serene collection of cool blue-greys, inspired by smooth basalt pebbles in a tranquil stream bed. Featuring the deep blue-grey #3A475C, muted blue #4F5D75, and pale grey-blue #BFCCD9, this collection is perfect for designers and developers seeking a calm, minimalist aesthetic. The additional shades of #6D7E98 and #99A9C2 complete a spectrum that provides subtle variations, creating depth and a sense of natural tranquility. This palette is ideal for projects that require a soothing yet sophisticated presence, emphasizing cleanliness, coolness, and understated elegance.

Best used for

Serene and calm website designs and interfaces
Spa or wellness brand identities and marketing
Minimalist interior design concepts and decor
Nature-inspired product packaging and branding
Educational platforms with a gentle aesthetic
Eco-friendly and sustainable brand materials

Suggested color roles

primary

Utilize the deep blue-grey #3A475C for foundational elements, strong typography, or dominant sections, providing a robust anchor.

secondary

Apply the muted blue #4F5D75 for headers, secondary content areas, or accent panels, adding subtle distinction and calm.

accent

Employ the light grey-blue #BFCCD9 for subtle highlights, interactive elements, or delicate UI components, offering a touch of lightness.

background

Use the pale grey-blue #99A9C2 for a soft, airy base, creating an expansive canvas that promotes tranquility.

text

Integrate the dark blue-grey #3A475C for primary text on light backgrounds, or use white for optimal readability on darker shades.

Accessibility notes

The deep blue-grey #3A475C and muted blue #4F5D75 provide good contrast on #BFCCD9 and #99A9C2 for body text.
Ensure #6D7E98 text on #99A9C2 background meets WCAG contrast requirements for legibility.
For primary body text, use the darkest shades like #3A475C to ensure optimal readability.
Avoid using #BFCCD9 as text on #99A9C2 due to very low contrast, which will significantly hinder readability.

Recommended combinations

Calm Contrast

Create clear readability with a soft touch, ideal for main content, navigation, and informational sections in a serene design.

#3A475C · #BFCCD9 · #4F5D75

Gentle Gradient

Design a smooth and serene visual flow for layered sections or background elements, providing subtle depth and tranquility.

#4F5D75 · #6D7E98 · #99A9C2

Airy Base

Establish a light and refreshing design, providing clarity and a calming atmosphere for various UI elements and content blocks.

#99A9C2 · #3A475C · #BFCCD9

CSS variables

:root {
  --basalt-stream-pebble-1: #4F5D75;
  --basalt-stream-pebble-2: #6D7E98;
  --basalt-stream-pebble-3: #99A9C2;
  --basalt-stream-pebble-4: #BFCCD9;
  --basalt-stream-pebble-5: #3A475C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "basalt-stream-pebble": {
        1: "#4F5D75",
        2: "#6D7E98",
        3: "#99A9C2",
        4: "#BFCCD9",
        5: "#3A475C",
      }
    }
  }
}

Hex values

Color 1#4F5D75

Color 2#6D7E98

Color 3#99A9C2

Color 4#BFCCD9

Color 5#3A475C

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

4.1:1AA18

1.4:1Fail

1.6:1Fail

1.7:1Fail

2.5:1Fail

2.3:1Fail

2.8:1Fail

1.7:1Fail

1.5:1Fail

3.9:1AA18

4.1:1AA18

2.5:1Fail

1.5:1Fail

5.7:1AA

1.4:1Fail

2.3:1Fail

3.9:1AA18

5.7:1AA

Similar palettes

More like Basalt Stream Pebble

View all monochrome

Frosty Serene

Granite Peak Twilight

Monochromatic Granite

Monochrome Stone Garden

Nordic Mist Scale

Subtle Charcoal Wash