Back to palettes

Palette

Zen Garden Ryoanji

A tranquil blend of soft greys and muted whites, inspired by the serene, raked sands of a Zen garden.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DCDCDC#A9A9A9#E6E6FA#B0C4DE#848D9E

Palette guide

How to use Zen Garden Ryoanji

Overview

The Zen Garden Ryoanji palette embodies the quietude of its namesake, offering a serene blend of soft greys and muted blues. Inspired by raked sands and ancient stones, this palette features the near-white #DCDCDC and the gentle lavender of #E6E6FA, balanced by the deeper, contemplative #848D9E. Designers will find this combination perfect for evoking a sense of calm and sophistication, ideal for interfaces where peace and focus are paramount. Developers can utilize these subtle nuances to build visually harmonious applications that feel both refined and accessible, ensuring a tranquil user experience.

Best used for

  • Mindfulness and meditation apps
  • High-end interior design websites
  • Luxury brand digital presence
  • Educational platforms for art/history
  • Serene personal blogs
  • Digital portfolios for architects

Suggested color roles

primary

#A9A9A9 - A versatile mid-grey, forming a neutral anchor for main content, headings, or foundational UI elements.

secondary

#B0C4DE - A soft, muted blue-grey, excellent for secondary information, sub-sections, or subtle background variations, adding depth.

accent

#848D9E - A deeper, richer blue-grey, used sparingly for interactive states, key call-to-actions, or important visual cues.

background

#DCDCDC - A very light, almost white, grey, providing a clean and expansive canvas for all content.

text

#848D9E - A deep enough blue-grey for readable body text on light backgrounds, offering a softer alternative to black.

Accessibility notes

  • Ensure #848D9E text on #DCDCDC provides sufficient contrast; it should pass WCAG AA.
  • Avoid using #A9A9A9 or #B0C4DE for body text on #DCDCDC backgrounds due to potential low contrast.
  • Consider using a darker text color like charcoal or black for extensive body copy if #848D9E feels too light.
  • Interactive elements should have distinct hover/focus states to aid navigation.

Recommended combinations

Quiet Reflection

Soft, layered backgrounds for tranquil content areas or card designs.

#DCDCDC · #E6E6FA · #A9A9A9

Stone & Sky

Harmonious blend for main navigation, headers, or distinct sections.

#A9A9A9 · #B0C4DE · #848D9E

Zen Focus

Highlights key information with strong contrast against a soft backdrop.

#848D9E · #DCDCDC · #E6E6FA

CSS variables

:root {
  --zen-garden-ryoanji-1: #DCDCDC;
  --zen-garden-ryoanji-2: #A9A9A9;
  --zen-garden-ryoanji-3: #E6E6FA;
  --zen-garden-ryoanji-4: #B0C4DE;
  --zen-garden-ryoanji-5: #848D9E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-ryoanji": {
        1: "#DCDCDC",
        2: "#A9A9A9",
        3: "#E6E6FA",
        4: "#B0C4DE",
        5: "#848D9E",
      }
    }
  }
}

Related searches

ryoanji color palettecalm blue grey schemezen minimalist colorssoft neutral ui palettetranquil web design

Palette colors

Hex values

Color 1#DCDCDC
·
Color 2#A9A9A9
·
Color 3#E6E6FA
·
Color 4#B0C4DE
·
Color 5#848D9E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.1:1Fail
1.3:1Fail
2.4:1Fail
2
1.7:1Fail
1.9:1Fail
1.3:1Fail
1.4:1Fail
3
1.1:1Fail
1.9:1Fail
1.4:1Fail
2.7:1Fail
4
1.3:1Fail
1.3:1Fail
1.4:1Fail
1.9:1Fail
5
2.4:1Fail
1.4:1Fail
2.7:1Fail
1.9:1Fail

Similar palettes

More like Zen Garden Ryoanji

View all neutral
Zen Garden Stone
Mindful Stone Serenity
Serene Pebble Path
Zen Garden Calm
Zen Garden Calm
Zen Garden Pebble