Palette

Matcha Ritual

A serene and natural palette, inspired by the tranquil hues of a traditional matcha tea ceremony.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#355E3B#4F7942#8FBC8F#F0F8FF#F5F5DC

Palette guide

How to use Matcha Ritual

Overview

The "Matcha Ritual" color palette offers a serene and grounding experience, drawing inspiration from traditional Japanese tea ceremonies and lush natural landscapes. This harmonious collection features deep forest green (#355E3B), a vibrant mid-tone green (#4F7942), a gentle sage green (#8FBC8F), a crisp near-white (#F0F8FF), and a warm, inviting cream (#F5F5DC). Designers and developers can leverage this palette to evoke a sense of calm, tradition, and natural elegance. It's ideal for creating interfaces and branding that feel organic, mindful, and sophisticated, promoting tranquility and focus without being overly stark.

Best used for

Wellness and spa branding or websites
Eco-friendly product packaging and marketing
Japanese cuisine or cultural event promotions
Minimalist interior design concepts
Yoga studios or meditation app interfaces
Sustainable fashion brands

Suggested color roles

primary

Use this deep, grounding green, #355E3B, for primary branding elements, prominent headings, or sections that require a strong, stable presence. It signifies depth and tradition.

secondary

A versatile, balanced green, #4F7942, perfect for supporting elements, subheadings, interactive components, or large content blocks to maintain a natural flow.

accent

This soft, tranquil green, #8FBC8F, works beautifully for subtle highlights, hover states, decorative graphics, or as a gentle background for card elements, adding a touch of freshness.

background

Provides a clean, airy, and slightly cool foundation for content with #F0F8FF, enhancing readability and giving the overall design a light, spacious feel. #F5F5DC can be used for warmer sections.

text

Use a dark neutral like charcoal or black for main body text against lighter backgrounds such as #F0F8FF or #F5F5DC to ensure optimal readability. For headings, #355E3B offers excellent contrast.

Accessibility notes

Ensure sufficient contrast when using #8FBC8F (Light Green) for text against #F0F8FF or #F5F5DC; it's generally too light for small body text.
The contrast between #355E3B and #F0F8FF or #F5F5DC is excellent for text and interactive elements.
For interactive elements using #4F7942, ensure clear visual feedback for states like hover or focus, perhaps by pairing with #8FBC8F.
Avoid placing #8FBC8F text directly on #4F7942 or #355E3B backgrounds without checking WCAG contrast ratios; it might lack sufficient contrast.

Recommended combinations

Matcha & Cream

Ideal for a sophisticated, warm brand identity. Use #355E3B for main text/accents, #F5F5DC as a primary background, and #4F7942 for secondary elements.

#355E3B · #F5F5DC · #4F7942

Zen Garden Fresh

Creates a light, airy, and modern feel. #F0F8FF for clean backgrounds, #4F7942 for headings/buttons, and #8FBC8F for subtle highlights or secondary text.

#4F7942 · #F0F8FF · #8FBC8F

Deep Forest Calm

Best for a strong, yet tranquil presence. #355E3B for dominant branding, #8FBC8F as a delicate accent, and #F0F8FF for a crisp, spacious backdrop.

#355E3B · #8FBC8F · #F0F8FF

CSS variables

:root {
  --matcha-ritual-1: #355E3B;
  --matcha-ritual-2: #4F7942;
  --matcha-ritual-3: #8FBC8F;
  --matcha-ritual-4: #F0F8FF;
  --matcha-ritual-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "matcha-ritual": {
        1: "#355E3B",
        2: "#4F7942",
        3: "#8FBC8F",
        4: "#F0F8FF",
        5: "#F5F5DC",
      }
    }
  }
}

Hex values

Color 1#355E3B

Color 2#4F7942

Color 3#8FBC8F

Color 4#F0F8FF

Color 5#F5F5DC

Accessibility

Contrast checker

1.5:1Fail

3.5:1AA18

7:1AA

6.7:1AA

1.5:1Fail

2.4:1Fail

4.7:1AA

4.6:1AA

3.5:1AA18

2.4:1Fail

2:1Fail

1.9:1Fail

7:1AA

4.7:1AA

2:1Fail

1:1Fail

6.7:1AA

4.6:1AA

1.9:1Fail

1:1Fail

Similar palettes

More like Matcha Ritual

Enchanted Garden Gate

Forest Whisper Green

Garden Gate Ivy