Palette

Matcha Tea Garden

A calming, fresh selection of greens inspired by the serene ritual of matcha tea in a quiet garden.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A7F66#97AF92#C0D6BB#E5E7DC#3B4D3C

Palette guide

How to use Matcha Tea Garden

Overview

The Matcha Tea Garden palette offers a calming, fresh selection of greens inspired by the serene ritual of matcha tea in a quiet garden. With hues like #6A7F66, #97AF92, and the deep #3B4D3C, this palette evokes tranquility, nature, and organic purity. It's an excellent choice for designers and developers crafting experiences for wellness brands, eco-conscious products, or any platform seeking to convey a sense of calm and natural harmony. The lighter tones, such as #C0D6BB and #E5E7DC, provide airy backgrounds that complement the deeper greens, creating a balanced and inviting visual environment.

Best used for

Wellness and spa brand identity
Eco-friendly product packaging
Organic food and beverage marketing
Nature-themed websites and blogs
Meditation and mindfulness applications
Sustainable fashion branding

Suggested color roles

primary

Use #3B4D3C as a deep, grounding color for primary text, strong headers, or foundational elements, providing stability.

secondary

Employ #6A7F66 for supporting sections, subheadings, or as a background that offers a rich, natural feel.

accent

The soft #C0D6BB serves as a fresh accent for highlights, delicate borders, or subtle interactive elements.

background

The lightest #E5E7DC offers an airy and clean background, perfect for content-heavy pages, creating a tranquil base.

text

For optimal readability, use #3B4D3C or a dark grey text against lighter palette colors, and white on #3B4D3C.

Accessibility notes

Ensure sufficient contrast for text, especially on lighter shades like #C0D6BB and #E5E7DC, by using dark text (e.g., #3B4D3C).
The deep #3B4D3C provides excellent contrast for white or light grey text, making it suitable for primary calls to action.
Avoid using light text on mid-tones such as #97AF92 to prevent readability issues for users with visual impairments.
Test all color pairings for WCAG 2.1 AA compliance, particularly for interactive elements and critical information.

Recommended combinations

Serene Base

Creates a harmonious and calming layout, perfect for main content areas with clear hierarchy.

#E5E7DC · #C0D6BB · #3B4D3C

Natural Depth

Ideal for gradients or layered graphics that require a natural, organic transition.

#3B4D3C · #6A7F66 · #97AF92

Fresh Contrast

Provides a gentle contrast for subtle accents or background variations within a tranquil design.

#97AF92 · #C0D6BB · #E5E7DC

CSS variables

:root {
  --matcha-tea-garden-1: #6A7F66;
  --matcha-tea-garden-2: #97AF92;
  --matcha-tea-garden-3: #C0D6BB;
  --matcha-tea-garden-4: #E5E7DC;
  --matcha-tea-garden-5: #3B4D3C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "matcha-tea-garden": {
        1: "#6A7F66",
        2: "#97AF92",
        3: "#C0D6BB",
        4: "#E5E7DC",
        5: "#3B4D3C",
      }
    }
  }
}

Hex values

Color 1#6A7F66

Color 2#97AF92

Color 3#C0D6BB

Color 4#E5E7DC

Color 5#3B4D3C

Accessibility

Contrast checker

1.8:1Fail

2.8:1Fail

3.5:1AA18

2.1:1Fail

1.8:1Fail

1.5:1Fail

1.9:1Fail

3.8:1AA18

2.8:1Fail

1.5:1Fail

1.2:1Fail

5.9:1AA

3.5:1AA18

1.9:1Fail

1.2:1Fail

7.3:1AAA

2.1:1Fail

3.8:1AA18

5.9:1AA

7.3:1AAA

Similar palettes

More like Matcha Tea Garden

View all earth

Enchanted Garden Gate