Palette

Zen Temple

Serene and balanced tones of muted green and grey, inspired by the tranquility of a Zen temple.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7B8C8A#AABFB6#D1DED9#EBF3EF#5E716E

Palette guide

How to use Zen Temple

Overview

The Zen Temple palette embodies serene balance with its delicate blend of muted greens and soft grays, creating an atmosphere of peace and introspection. Featuring a deep, calming green-gray #5E716E, a lighter sage #AABFB6, and an airy near-white #EBF3EF, this palette is perfect for designs seeking understated elegance. Designers can use these tones to evoke tranquility and clarity, while developers will appreciate their harmonious nature for creating seamless, visually comfortable interfaces. The versatile #7B8C8A and #D1DED9 offer excellent options for layering and subtle contrast, promoting a sense of calm focus.

Best used for

Mindfulness and meditation resources
Holistic wellness brand identities
Minimalist home goods websites
Calm and focused workspace design
Digital publications with a serene aesthetic
Eco-friendly product showcases

Suggested color roles

primary

#5E716E provides a strong, yet gentle, primary for main headings, navigation, or key interactive elements.

secondary

#7B8C8A is excellent for secondary information, borders, or subtle background patterns, offering a harmonious support.

accent

#AABFB6 can serve as a soft, inviting accent, perfect for highlights, interactive states, or decorative flourishes.

background

#EBF3EF offers a pristine, airy canvas, ensuring excellent readability and a spacious feel.

text

For dark text on light backgrounds, #5E716E provides strong contrast. For light text on darker elements, #EBF3EF or a pure white is suitable.

Accessibility notes

Ensure #5E716E text on #EBF3EF or #D1DED9 backgrounds meets WCAG AA contrast.
#AABFB6 might need careful contrast checks when used for text against #EBF3EF; best for larger text or accents.
Use #7B8C8A for body text on light backgrounds like #EBF3EF for comfortable readability.
Avoid using very light colors like #D1DED9 as text on #EBF3EF due to low contrast; best for subtle UI elements.

Recommended combinations

Quiet Contemplation

A deep, grounding text color, a clean background, and a soft, inviting accent.

#5E716E · #EBF3EF · #AABFB6

Serene Layers

Ideal for layered UI cards, subtle gradients, and clean informational backgrounds.

#7B8C8A · #D1DED9 · #EBF3EF

Gentle Harmony

A light canvas with a soft accent and a deep, grounding color for emphasis.

#EBF3EF · #AABFB6 · #5E716E

CSS variables

:root {
  --zen-temple-1: #7B8C8A;
  --zen-temple-2: #AABFB6;
  --zen-temple-3: #D1DED9;
  --zen-temple-4: #EBF3EF;
  --zen-temple-5: #5E716E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-temple": {
        1: "#7B8C8A",
        2: "#AABFB6",
        3: "#D1DED9",
        4: "#EBF3EF",
        5: "#5E716E",
      }
    }
  }
}

Hex values

Color 1#7B8C8A

Color 2#AABFB6

Color 3#D1DED9

Color 4#EBF3EF

Color 5#5E716E

Accessibility

Contrast checker

1.8:1Fail

2.5:1Fail

3.1:1AA18

1.5:1Fail

1.8:1Fail

1.4:1Fail

1.7:1Fail

2.7:1Fail

2.5:1Fail

1.4:1Fail

1.2:1Fail

3.7:1AA18

3.1:1AA18

1.7:1Fail

1.2:1Fail

4.6:1AA

1.5:1Fail

2.7:1Fail

3.7:1AA18

4.6:1AA

Similar palettes

More like Zen Temple

View all neutral

Riverstone Meditation

Ancient Temple Stones