Palette

Matcha Serene Brew

Reflecting the peaceful serenity of a Japanese matcha tea ceremony and a tranquil moss garden.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Matcha Serene Brew 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 Serene Brew.

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

Data visualization

#36453A#4CAF50#8BC34A#C8E6C9#2C3E30

Palette guide

How to use Matcha Serene Brew

Overview

The "Matcha Serene Brew" palette evokes tranquility and natural harmony, perfect for designs seeking a calming, sophisticated aesthetic. Inspired by lush moss gardens and traditional tea ceremonies, this collection features deep, grounding greens like #36453A and a near-black #2C3E30, balanced with fresh, vibrant tones such as #4CAF50 and the softer, more muted #8BC34A. A serene, almost minty light green, #C8E6C9, provides an excellent base. This versatile palette is ideal for creating a minimalist yet rich visual experience, guiding users towards a sense of peace and organic elegance in digital and print applications.

Best used for

Wellness and spa branding or websites
Organic food and beverage packaging
Eco-friendly product design and marketing
Yoga studio or meditation app interfaces
Nature-inspired illustrations and graphic design
Minimalist interior design mood boards

Suggested color roles

primary

#36453A (Deep Moss Green) – Use for main branding elements, prominent headers, or large content blocks to establish a calm, grounding presence.

secondary

#4CAF50 (Vibrant Leaf Green) – Ideal for secondary calls-to-action, active states, or graphic accents that need a fresh, natural feel without being overwhelming.

accent

#8BC34A (Light Matcha Green) – Perfect for subtle highlights, interactive elements, icons, or small graphical details to add a gentle pop of vibrancy.

background

#C8E6C9 (Serene Mint Green) – A soft, airy base color for page backgrounds, content cards, or large sections, promoting readability and a light, open feel.

text

#2C3E30 (Dark Forest Green) – Recommended for body text, headings, and crucial information to ensure excellent readability against lighter backgrounds like #C8E6C9. For less critical text, a slightly lighter version of this shade can be used.

Accessibility notes

Ensure sufficient contrast between text and background colors, especially for #2C3E30 on #C8E6C9 (WCAG AA compliant).
Test vibrancy of #4CAF50 and #8BC34A as interactive elements for users with color vision deficiencies.
Avoid using #C8E6C9 for small text elements; its lightness requires careful contrast pairing.
Use a robust color contrast checker for all text and UI element combinations to meet WCAG standards.

Recommended combinations

Zen Foundation

A clean, serene base with a strong primary for text and a fresh secondary for accents or calls-to-action.

#C8E6C9 · #36453A · #4CAF50

Earthy Depth

Utilize the very dark green as a striking background, with the lighter green for key information and the deep moss for subheadings.

#2C3E30 · #8BC34A · #36453A

Soft Transition

Combine the primary dark green with the light background for content, and use the vibrant green sparingly for highlights or interactive states.

#36453A · #C8E6C9 · #4CAF50

CSS variables

:root {
  --matcha-serene-brew-1: #36453A;
  --matcha-serene-brew-2: #4CAF50;
  --matcha-serene-brew-3: #8BC34A;
  --matcha-serene-brew-4: #C8E6C9;
  --matcha-serene-brew-5: #2C3E30;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "matcha-serene-brew": {
        1: "#36453A",
        2: "#4CAF50",
        3: "#8BC34A",
        4: "#C8E6C9",
        5: "#2C3E30",
      }
    }
  }
}

Hex values

Color 1#36453A

Color 2#4CAF50

Color 3#8BC34A

Color 4#C8E6C9

Color 5#2C3E30

Accessibility

Contrast checker

3.7:1AA18

4.8:1AA

7.5:1AAA

1.1:1Fail

3.7:1AA18

1.3:1Fail

2.1:1Fail

4.1:1AA18

4.8:1AA

1.3:1Fail

1.6:1Fail

5.4:1AA

7.5:1AAA

2.1:1Fail

1.6:1Fail

8.5:1AAA

1.1:1Fail

4.1:1AA18

5.4:1AA

8.5:1AAA

Similar palettes

More like Matcha Serene Brew

Enchanted Garden Gate

Forest Whisper Green