Back to palettes

Palette

Pebble Garden Calm

A serene, clean collection of muted greens, soft greys, and sand tones, inspired by the tranquil order of a Japanese Zen garden.

minimalminimal5 colors
More minimal palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0EAD9#C8DCCF#AABBC4#D7DCD0#F0F3E8

Palette guide

How to use Pebble Garden Calm

Overview

The Pebble Garden Calm palette offers a serene collection of muted greens, soft grays, and subtle sand tones, inspired by the tranquil order of a Japanese Zen garden. With gentle hues like the refreshing #E0EAD9, the soothing #C8DCCF, and the cool #AABBC4, this palette is ideal for designs seeking a minimalist, peaceful, and natural aesthetic. Designers and developers can leverage these harmonious colors to create calming user interfaces, eco-friendly branding, or serene interior concepts. The palette's inherent softness and low contrast promote a sense of relaxation and focus, making it perfect for conveying tranquility, balance, and understated elegance.

Best used for

  • Wellness and meditation apps
  • Eco-friendly and sustainable brands
  • Spa and retreat environments
  • Minimalist interior design concepts
  • Serene web and mobile interfaces
  • Nature-inspired art and photography

Suggested color roles

primary

Use #C8DCCF as a calming, muted green base for main content areas or larger sections, promoting a sense of peace.

secondary

Employ #D7DCD0 for soft supporting elements, subheadings, or secondary backgrounds, adding earthy balance.

accent

Apply #AABBC4 for subtle cool contrast, icons, or important highlights, offering a refined touch of blue-grey.

background

Utilize #F0F3E8 as an ultra-light, tranquil background for content areas, ensuring a clean and airy feel.

text

Given the lightness of the palette, a dark charcoal or deep forest green (not in palette, e.g., #4F5E4E) is recommended for body text to ensure readability.

Accessibility notes

  • Due to the palette's lightness, ensure text colors provide sufficient contrast against backgrounds to meet WCAG AA standards.
  • Prioritize a dark charcoal or similar dark neutral for essential text to maximize legibility.
  • Avoid using very light colors for small text or interactive elements, as readability will be compromised.
  • Use generous line spacing and larger font sizes to improve readability for text set in lighter shades.

Recommended combinations

Zen Lightness

Excellent for creating serene backgrounds, layered panels, or subtle distinctions in UI elements that require maximum luminosity.

#F0F3E8 · #E0EAD9 · #D7DCD0

Gentle Greenery

Ideal for conveying natural elements, soft gradients, or establishing a calming, organic flow in visual design.

#C8DCCF · #E0EAD9 · #D7DCD0

Subtle Coolness

Perfect for introducing a slight cool undertone, differentiating sections, or highlighting elements with a refined, soft blue-grey.

#AABBC4 · #D7DCD0 · #C8DCCF

CSS variables

:root {
  --pebble-garden-calm-1: #E0EAD9;
  --pebble-garden-calm-2: #C8DCCF;
  --pebble-garden-calm-3: #AABBC4;
  --pebble-garden-calm-4: #D7DCD0;
  --pebble-garden-calm-5: #F0F3E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pebble-garden-calm": {
        1: "#E0EAD9",
        2: "#C8DCCF",
        3: "#AABBC4",
        4: "#D7DCD0",
        5: "#F0F3E8",
      }
    }
  }
}

Related searches

zen garden palettecalm muted colorsminimalist green greyserene natural tonessoft earthy design

Palette colors

Hex values

Color 1#E0EAD9
·
Color 2#C8DCCF
·
Color 3#AABBC4
·
Color 4#D7DCD0
·
Color 5#F0F3E8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
1.1:1Fail
1.1:1Fail
2
1.2:1Fail
1.4:1Fail
1:1Fail
1.3:1Fail
3
1.6:1Fail
1.4:1Fail
1.4:1Fail
1.8:1Fail
4
1.1:1Fail
1:1Fail
1.4:1Fail
1.2:1Fail
5
1.1:1Fail
1.3:1Fail
1.8:1Fail
1.2:1Fail

Similar palettes

More like Pebble Garden Calm

View all minimal
Zen Stone Garden
Coastal Driftwood Grey
Whisper Clay Earth
Modernist Concrete Slab
Calm Pebble Path
Calm Stone Meditate