Back to palettes

Palette

Zen Garden Pebble

Soft, muted tones reflecting the serene simplicity of a meticulously raked pebble garden.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D2B48C#B0C4DE#778899#F5F5DC#8B4513

Palette guide

How to use Zen Garden Pebble

Overview

The Zen Garden Pebble palette (zen-garden-pebble-3) offers a unique blend of soft, muted tones, reflecting the serene simplicity of a meticulously raked pebble garden. Featuring the warm, sandy beige #D2B48C, the gentle steel blue #B0C4DE, and the subtle slate gray #778899, this palette is ideal for designs seeking a natural, understated elegance. The very light cream #F5F5DC provides an excellent airy background, while the deep saddle brown #8B4513 offers a strong, grounding accent. Designers can leverage these exact hex codes to create harmonious interfaces, branding, or editorial content that evokes calm and natural beauty.

Best used for

  • Nature-inspired lifestyle blogs
  • Artisan craft and handmade product branding
  • Spa and relaxation focused websites
  • Minimalist interior design mood boards
  • Sustainable fashion e-commerce
  • Digital art with a serene, earthy feel

Suggested color roles

primary

#D2B48C - A warm, inviting sandy beige, ideal for main content areas, headings, or primary UI elements, providing a soft foundation.

secondary

#B0C4DE - A cool, gentle steel blue, perfect for supporting content, secondary navigation, or subtle dividers, adding a touch of calm.

accent

#8B4513 - A deep, rich saddle brown, excellent for strong calls-to-action, important icons, or prominent textual emphasis, providing grounding contrast.

background

#F5F5DC - The lightest, warmest cream shade, serving as a soft, expansive canvas that enhances readability and promotes an airy feel.

text

#778899 - A medium-dark slate gray, highly suitable for body text on lighter backgrounds like #F5F5DC, offering good readability. For darker text, use #8B4513.

Accessibility notes

  • Ensure #778899 text on #F5F5DC backgrounds meets WCAG AA contrast standards for body text.
  • The darkest color, #8B4513, provides strong contrast against #F5F5DC, making it suitable for critical information and interactive elements.
  • Avoid using #D2B48C and #F5F5DC for text against each other due to insufficient contrast; reserve them for backgrounds or subtle UI elements.
  • For interactive elements, use colors with sufficient contrast like #8B4513 or #778899 to ensure clear visibility.

Recommended combinations

Earthy Calm

Creates a soft, natural website background with #F5F5DC, content blocks in #D2B48C, and text in #778899.

#F5F5DC · #D2B48C · #778899

Pebble & Sky

Ideal for showcasing natural elements, where #D2B48C is the ground, #B0C4DE is the sky, and #8B4513 provides a strong accent.

#D2B48C · #B0C4DE · #8B4513

Deep Ground

Use #8B4513 for a dark, impactful footer or hero section, with #F5F5DC for primary text and #778899 for secondary elements.

#8B4513 · #F5F5DC · #778899

CSS variables

:root {
  --zen-garden-pebble-3-1: #D2B48C;
  --zen-garden-pebble-3-2: #B0C4DE;
  --zen-garden-pebble-3-3: #778899;
  --zen-garden-pebble-3-4: #F5F5DC;
  --zen-garden-pebble-3-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebble-3": {
        1: "#D2B48C",
        2: "#B0C4DE",
        3: "#778899",
        4: "#F5F5DC",
        5: "#8B4513",
      }
    }
  }
}

Related searches

zen garden earth tonescalm neutral blue brownminimalist pebble palettenatural serene colorstranquil web design palette

Palette colors

Hex values

Color 1#D2B48C
·
Color 2#B0C4DE
·
Color 3#778899
·
Color 4#F5F5DC
·
Color 5#8B4513
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.8:1Fail
1.8:1Fail
3.6:1AA18
2
1.1:1Fail
2:1Fail
1.6:1Fail
4:1AA18
3
1.8:1Fail
2:1Fail
3.3:1AA18
1.9:1Fail
4
1.8:1Fail
1.6:1Fail
3.3:1AA18
6.4:1AA
5
3.6:1AA18
4:1AA18
1.9:1Fail
6.4:1AA

Similar palettes

More like Zen Garden Pebble

View all neutral
Calm Stone Pathway
Smoky Quartz Hues
Smooth Pebble Gradient
Stone Garden Path
Stone Garden Zen
Stone Garden Zen