Back to palettes

Palette

Zen Garden Flow

Reflects the tranquil simplicity and balanced harmony of a meticulously raked 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 Flow 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 Flow.

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

Data visualization

#F5F5F5#DCDCDC#A9A9A9#D3D3D3#8FBC8F

Palette guide

How to use Zen Garden Flow

Overview

The Zen Garden Flow palette (zen-garden-flow) embodies the tranquil simplicity of a meticulously raked Zen garden, offering a clean and balanced collection of neutrals with a single calming green accent. Featuring pristine grays like #F5F5F5, #DCDCDC, and #D3D3D3 for foundational elements, alongside the versatile mid-tone #A9A9A9, this palette is perfect for designs prioritizing minimalism and clarity. The subtle yet refreshing green of #8FBC8F provides a gentle focal point. Designers will find these exact hex codes ideal for creating serene user interfaces, elegant branding, or sophisticated editorial layouts that emphasize peace and effortless flow.

Best used for

  • Minimalist web and app interfaces
  • Corporate or professional design with a calming touch
  • Digital portfolios emphasizing clean aesthetics
  • Eco-friendly or sustainable brand identities
  • Wellness and lifestyle blogs
  • Modern architectural visualizations

Suggested color roles

primary

#A9A9A9 - A balanced medium gray, excellent for primary UI elements, subtle dividers, or backgrounds for secondary content.

secondary

#DCDCDC - A light, versatile gray, ideal for supporting content blocks, card backgrounds, or interactive states.

accent

#8FBC8F - A soft, muted green, perfect for calls-to-action, important icons, or subtle highlights to introduce a touch of nature and calm.

background

#F5F5F5 - The lightest, almost pure white, serving as a clean, expansive canvas that enhances readability and promotes an airy feel.

text

#A9A9A9 - A medium gray, suitable for body text on lighter backgrounds like #F5F5F5 or #DCDCDC, providing good readability without harshness. For darker text, consider a charcoal or black.

Accessibility notes

  • Ensure #A9A9A9 text on #F5F5F5 or #DCDCDC backgrounds meets WCAG AA contrast standards for body text.
  • The accent color #8FBC8F might require careful pairing for text; use it primarily for non-textual elements or with very dark text.
  • Avoid using the very light grays (#F5F5F5, #DCDCDC, #D3D3D3) for text against each other as contrast will be insufficient.
  • For interactive elements, #8FBC8F should have clear visual cues in addition to color, or be paired with a darker text/icon.

Recommended combinations

Clean & Green

Ideal for a minimalist website layout, with #F5F5F5 as the background, #A9A9A9 for text, and #8FBC8F for buttons or links.

#F5F5F5 · #A9A9A9 · #8FBC8F

Subtle Layers

Excellent for creating depth in UI elements like cards or layered panels, using the subtle variations in gray.

#DCDCDC · #D3D3D3 · #A9A9A9

Accent Focus

Use #F5F5F5 as a clean base, #8FBC8F for a prominent call-to-action, and #A9A9A9 for supporting text or secondary elements.

#F5F5F5 · #8FBC8F · #A9A9A9

CSS variables

:root {
  --zen-garden-flow-1: #F5F5F5;
  --zen-garden-flow-2: #DCDCDC;
  --zen-garden-flow-3: #A9A9A9;
  --zen-garden-flow-4: #D3D3D3;
  --zen-garden-flow-5: #8FBC8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-flow": {
        1: "#F5F5F5",
        2: "#DCDCDC",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#8FBC8F",
      }
    }
  }
}

Related searches

minimalist zen color palettecalm neutral green colorspeaceful ui design paletteclean web design colorssubtle accent color scheme

Palette colors

Hex values

Color 1#F5F5F5
·
Color 2#DCDCDC
·
Color 3#A9A9A9
·
Color 4#D3D3D3
·
Color 5#8FBC8F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.2:1Fail
1.4:1Fail
2:1Fail
2
1.3:1Fail
1.7:1Fail
1.1:1Fail
1.6:1Fail
3
2.2:1Fail
1.7:1Fail
1.6:1Fail
1.1:1Fail
4
1.4:1Fail
1.1:1Fail
1.6:1Fail
1.4:1Fail
5
2:1Fail
1.6:1Fail
1.1:1Fail
1.4:1Fail

Similar palettes

More like Zen Garden Flow

View all neutral
Zen Garden Pebble
Bamboo Serenity Path
Zen Garden Calm
Zen Garden Ryoanji
Zen Garden Stone
Mindful Stone Serenity