Palette

Serene Pebble Garden

Cool and contemplative blues and grays, inspired by the serene arrangement of pebbles in a peaceful zen garden.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5F9EA0#4682B4#6A5ACD#778899#839CA2

Palette guide

How to use Serene Pebble Garden

Overview

The Serene Pebble Garden palette offers a cool and contemplative collection of blues and grays, reminiscent of a peaceful zen garden. Featuring robust steel blue `#4682B4` and cadet blue `#5F9EA0`, it introduces a unique touch with the slate blue-purple `#6A5ACD`, rounded out by the versatile gray-blues `#778899` and `#839CA2`. This palette is genuinely useful for designers aiming to create calm, sophisticated, and reflective digital spaces. Its range allows for clear visual hierarchy and a soothing user experience, ideal for applications requiring focus and tranquility.

Best used for

Meditation and mindfulness apps
Spa and wellness center branding
Minimalist and clean website designs
Interior design inspiration (bathrooms, calm spaces)
Educational platforms requiring focus
High-end tech product interfaces

Suggested color roles

primary

The strong steel blue `#4682B4` is excellent for primary branding, headers, or key interactive elements.

secondary

Cadet blue `#5F9EA0` works well for supporting content, secondary navigation, or subtle background patterns.

accent

The distinctive slate blue-purple `#6A5ACD` provides a unique, sophisticated accent for call-to-actions or focal points.

background

Use the lighter gray-blue `#839CA2` or `#778899` for a soft, serene background that promotes readability.

text

For body text, the darker `#4682B4` provides good contrast on lighter backgrounds, or use a charcoal gray for accessibility.

Accessibility notes

Ensure sufficient contrast when using lighter gray-blues like `#839CA2` for text on backgrounds; darker text is often needed.
The deep `#4682B4` offers good contrast for white or very light gray text.
Avoid placing `#778899` text on a `#839CA2` background without verifying contrast ratios.
For interactive elements, use the accent color `#6A5ACD` to clearly distinguish them from surrounding content.

Recommended combinations

Deep Zen

A strong, yet calm foundation. Use `#4682B4` for impact, with the grays providing balanced support and background.

#4682B4 · #778899 · #839CA2

Pebble Contrast

Highlights the unique accent; `#5F9EA0` as a base, `#6A5ACD` for pop, and `#4682B4` for strong text or details.

#5F9EA0 · #6A5ACD · #4682B4

Misty Stone

Creates a soft, layered gray-blue effect; ideal for subtle branding or backgrounds with gentle color variations.

#839CA2 · #778899 · #5F9EA0

CSS variables

:root {
  --serene-pebble-garden-1: #5F9EA0;
  --serene-pebble-garden-2: #4682B4;
  --serene-pebble-garden-3: #6A5ACD;
  --serene-pebble-garden-4: #778899;
  --serene-pebble-garden-5: #839CA2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-pebble-garden": {
        1: "#5F9EA0",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#778899",
        5: "#839CA2",
      }
    }
  }
}

Hex values

Color 1#5F9EA0

Color 2#4682B4

Color 3#6A5ACD

Color 4#778899

Color 5#839CA2

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

1.7:1Fail

1.3:1Fail

1.5:1Fail

1.8:1Fail

1.2:1Fail

1.1:1Fail

1.5:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Serene Pebble Garden

Serene Pebble Garden

See it in context.

Ready when you are.

Built with Serene Pebble Garden.

How to use Serene Pebble Garden

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Zen

Pebble Contrast

Misty Stone

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Serene Pebble Garden