Palette

Matcha Tea Zen

Fresh greens inspired by a calming matcha tea ceremony, evoking peace and natural harmony.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A6337#6C8B4D#8FB566#B2DD7E#DAF4BE

Palette guide

How to use Matcha Tea Zen

Overview

The Matcha Tea Zen palette offers a serene journey through nature's calming greens, perfect for creating tranquil and harmonious digital experiences. Anchored by the deep, grounding tone of #4A6337, it transitions through refreshing mid-greens like #6C8B4D and #8FB566, culminating in the airy, almost pastel #DAF4BE. This gradient of natural hues, including #B2DD7E, is ideal for designers and developers aiming to evoke a sense of peace, organic freshness, and eco-consciousness. Its balanced tones are highly versatile for branding, web interfaces, and content that benefits from a natural, restorative aesthetic, promoting calm and clarity.

Best used for

Wellness and spa brand identities
Organic food and beverage packaging
Yoga and meditation app interfaces
Eco-friendly product websites
Nature-themed photography portfolios
Sustainable lifestyle blogs

Suggested color roles

primary

Use #4A6337 as a foundational brand color or for prominent headings, establishing a deep, natural presence and strong visual anchor.

secondary

Apply #6C8B4D for supporting elements, secondary navigation, or as a rich background for specific content sections, providing balance.

accent

Employ #B2DD7E or #8FB566 for interactive elements, calls to action, or small design details that require a fresh, inviting pop.

background

#DAF4BE provides a light, airy canvas, ideal for main content areas, offering a clean, natural, and visually calming feel.

text

For optimal readability, use #4A6337 for dark text on lighter backgrounds like #DAF4BE, or a near-black for general body copy to ensure contrast.

Accessibility notes

Ensure #4A6337 text on #DAF4BE background meets WCAG AAA contrast for optimal readability.
Avoid using #DAF4BE for text on #B2DD7E or #8FB566 as contrast will likely be insufficient.
When using #B2DD7E for interactive elements, verify sufficient contrast against its background color.
For general body text, consider a dark charcoal or pure black on the lightest greens to maximize legibility for all users.

Recommended combinations

Forest Calm

Ideal for high-contrast branding, dark text on light backgrounds, with a refreshing mid-tone accent for calls to action or key details.

#4A6337 · #DAF4BE · #8FB566

Green Harmony

Suited for softer interfaces, hero sections, or content blocks where a gentle gradient is preferred, anchored by a deep, grounding primary.

#6C8B4D · #B2DD7E · #4A6337

Matcha Zest

Great for light header backgrounds with vibrant accents, or for illustrating a fresh, energetic feel in product displays and UI components.

#DAF4BE · #B2DD7E · #6C8B4D

CSS variables

:root {
  --matcha-tea-zen-1: #4A6337;
  --matcha-tea-zen-2: #6C8B4D;
  --matcha-tea-zen-3: #8FB566;
  --matcha-tea-zen-4: #B2DD7E;
  --matcha-tea-zen-5: #DAF4BE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "matcha-tea-zen": {
        1: "#4A6337",
        2: "#6C8B4D",
        3: "#8FB566",
        4: "#B2DD7E",
        5: "#DAF4BE",
      }
    }
  }
}

Hex values

Color 1#4A6337

Color 2#6C8B4D

Color 3#8FB566

Color 4#B2DD7E

Color 5#DAF4BE

Accessibility

Contrast checker

1.7:1Fail

2.9:1Fail

4.3:1AA18

5.6:1AA

1.7:1Fail

1.6:1Fail

2.5:1Fail

3.2:1AA18

2.9:1Fail

1.6:1Fail

1.5:1Fail

2:1Fail

4.3:1AA18

2.5:1Fail

1.5:1Fail

1.3:1Fail

5.6:1AA

3.2:1AA18

2:1Fail

1.3:1Fail

Similar palettes

More like Matcha Tea Zen

View all earth

Emerald Bazaar Spice

Enchanted Garden Gate

Matcha Ceremonial Blend

Matcha Ceremony Peace

Matcha Tea Ceremony

Misty Forest Clearing