Back to palettes

Palette

Mint Matcha Serenity

Refreshing mints and soft greens create a calm and invigorating feeling, like a soothing cup of matcha tea.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B4EEB4#98FB98#7CFC00#66CDAA#3CB371

Palette guide

How to use Mint Matcha Serenity

Overview

The Mint Matcha Serenity palette offers a calming yet invigorating collection of soft greens, reminiscent of a soothing cup of matcha tea. It features a vibrant #7CFC00 as its most energetic hue, balanced by the more subdued #66CDAA and #3CB371. Lighter, pastel greens like #B4EEB4 and #98FB98 provide an airy, harmonious feel, perfect for creating a sense of tranquility and natural health. This palette is well-suited for wellness brands, eco-friendly initiatives, or digital platforms focused on mindfulness and organic living. Designers can leverage its gentle gradient from deep to light to craft serene user interfaces, while developers will find these distinct shades effective for creating clear visual hierarchy.

Best used for

  • Yoga and meditation app interfaces
  • Organic food and beverage branding
  • Sustainable fashion websites
  • Wellness retreat marketing materials
  • Healthy lifestyle blogs and content
  • Eco-friendly product packaging

Suggested color roles

primary

Utilize #3CB371 as a grounding primary color for main headings or key interactive elements.

secondary

Employ #66CDAA for supporting information, subheadings, or secondary calls to action.

accent

Apply #7CFC00 as a vibrant accent for highlights, success messages, or small, impactful details.

background

Use #B4EEB4 as a soft, calming background color, providing a gentle canvas for content.

text

For optimal readability, a dark neutral like #333333 (charcoal) is recommended for body text. #3CB371 can be used for larger text on light backgrounds.

Accessibility notes

  • Ensure strong contrast between lighter greens like #B4EEB4 and #98FB98 when used for text on similar backgrounds.
  • The vibrant #7CFC00 will require a very dark text color to maintain WCAG AA readability standards.
  • Avoid using #B4EEB4 as text on #98FB98 backgrounds due to insufficient contrast.
  • Always verify contrast ratios for critical text elements, especially with the pastel tones in this palette.

Recommended combinations

Matcha Core

Ideal for main sections, conveying stability and a natural, calming presence.

#3CB371 · #B4EEB4 · #66CDAA

Zen Flow

Excellent for content blocks, progress indicators, or visual elements needing subtle energy.

#66CDAA · #98FB98 · #7CFC00

Fresh Highlight

Great for drawing attention to calls to action or important information with a vibrant touch.

#7CFC00 · #B4EEB4 · #3CB371

CSS variables

:root {
  --mint-matcha-serenity-1: #B4EEB4;
  --mint-matcha-serenity-2: #98FB98;
  --mint-matcha-serenity-3: #7CFC00;
  --mint-matcha-serenity-4: #66CDAA;
  --mint-matcha-serenity-5: #3CB371;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mint-matcha-serenity": {
        1: "#B4EEB4",
        2: "#98FB98",
        3: "#7CFC00",
        4: "#66CDAA",
        5: "#3CB371",
      }
    }
  }
}

Related searches

matcha green color paletteserene green hex codeswellness brand colorspastel mint schemecalm UI design greens

Palette colors

Hex values

Color 1#B4EEB4
·
Color 2#98FB98
·
Color 3#7CFC00
·
Color 4#66CDAA
·
Color 5#3CB371
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1:1Fail
1.5:1Fail
2:1Fail
2
1:1Fail
1.1:1Fail
1.5:1Fail
2.1:1Fail
3
1:1Fail
1.1:1Fail
1.5:1Fail
2:1Fail
4
1.5:1Fail
1.5:1Fail
1.5:1Fail
1.4:1Fail
5
2:1Fail
2.1:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Mint Matcha Serenity

View all pastel