Back to palettes

Palette

Serene Pebble Path

Soft, muted grays and subtle blues emulate the quiet tranquility of a meticulously arranged pebble garden.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serene Pebble Path 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 Serene Pebble Path.

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

Data visualization

#A9A9A9#778899#DCDCDC#B0C4DE#6A5ACD

Palette guide

How to use Serene Pebble Path

Overview

The Serene Pebble Path palette evokes the quiet tranquility of a meticulously arranged zen garden, focusing on soft, muted grays and subtle blues. Anchored by the versatile dim gray `#A9A9A9` and dark slate gray `#778899`, it includes the bright gainsboro `#DCDCDC` and a gentle light steel blue `#B0C4DE`, with a striking slate blue `#6A5ACD` as an accent. This collection is ideal for designers and developers seeking a minimalist, sophisticated, and calming aesthetic. It provides excellent versatility for creating clean interfaces, where understated elegance and focus on content are paramount.

Best used for

  • Minimalist portfolio websites
  • Art gallery and museum digital presence
  • High-end product display pages
  • Corporate and professional service sites
  • Meditation and mindfulness applications
  • Zen-themed interior design concepts

Suggested color roles

primary

The dark slate gray `#778899` offers a solid, grounded primary, suitable for headers or main structural elements.

secondary

Dim gray `#A9A9A9` is perfect for supporting content, secondary navigation, or subtle background textures.

accent

The distinctive slate blue `#6A5ACD` provides a deliberate focal point for call-to-actions or key interactive elements.

background

Gainsboro `#DCDCDC` creates a clean, expansive, and very light background, ideal for readability.

text

For body text, use `#778899` for excellent contrast on lighter backgrounds, or a deep charcoal for optimal legibility.

Accessibility notes

  • Ensure sufficient contrast between `#DCDCDC` and `#B0C4DE` when used for text and background; darker text is often necessary.
  • The darker shades `#778899` and `#A9A9A9` provide good contrast for white or light gray text.
  • Avoid using `#A9A9A9` text on a `#B0C4DE` background without verifying contrast ratios.
  • The accent color `#6A5ACD` can be used to highlight important interactive elements for better visibility.

Recommended combinations

Stone Foundation

A classic minimalist pairing. `#778899` for depth, `#A9A9A9` for support, and `#DCDCDC` as a clean canvas.

#778899 · #A9A9A9 · #DCDCDC

Pebble Accent

Highlights the subtle blue accent; `#B0C4DE` as a soft background, `#6A5ACD` for pop, and `#778899` for text.

#B0C4DE · #6A5ACD · #778899

Muted Harmony

Creates an airy, layered gray-blue effect; ideal for soft backgrounds with very subtle color shifts and dark text.

#DCDCDC · #A9A9A9 · #B0C4DE

CSS variables

:root {
  --serene-pebble-path-1: #A9A9A9;
  --serene-pebble-path-2: #778899;
  --serene-pebble-path-3: #DCDCDC;
  --serene-pebble-path-4: #B0C4DE;
  --serene-pebble-path-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-pebble-path": {
        1: "#A9A9A9",
        2: "#778899",
        3: "#DCDCDC",
        4: "#B0C4DE",
        5: "#6A5ACD",
      }
    }
  }
}

Related searches

minimalist gray palettezen gray bluesubtle color schemetranquil stone colorsmodern neutral design

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#778899
·
Color 3#DCDCDC
·
Color 4#B0C4DE
·
Color 5#6A5ACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.7:1Fail
1.3:1Fail
2.3:1Fail
2
1.5:1Fail
2.7:1Fail
2:1Fail
1.5:1Fail
3
1.7:1Fail
2.7:1Fail
1.3:1Fail
3.9:1AA18
4
1.3:1Fail
2:1Fail
1.3:1Fail
3:1Fail
5
2.3:1Fail
1.5:1Fail
3.9:1AA18
3:1Fail

Similar palettes

More like Serene Pebble Path

View all neutral
Zen Garden Pebbles
Mindful Stone Serenity
River Stone Calm
Stone Meditation Path
Zen Garden Pebble
Zen Garden Ryoanji