Palette

Iced Matcha Ritual

A soothing blend of soft greens and warm neutrals, inspired by the calming ritual of a frothy matcha beverage.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E8F4F1#A8D0C4#7CA18A#4E6B5D#D0EDE2

Palette guide

How to use Iced Matcha Ritual

Overview

The Iced Matcha Ritual palette offers a soothing blend of soft greens and warm neutrals, inspired by the calming ritual of a frothy matcha beverage. It features the airy #E8F4F1 (Mint Cream) and #D0EDE2 (Light Mint Green), alongside the gentle #A8D0C4 (Powder Green), the balanced #7CA18A (Sage Green), and the grounding #4E6B5D (Dark Sea Green). This palette is exceptionally useful for designers and developers seeking to convey tranquility, natural wellness, or a cozy, organic aesthetic. Its harmonious, muted tones are perfect for creating serene digital environments and branding that promotes a sense of peace and mindful living.

Best used for

Wellness and mindfulness applications
Organic food and beverage branding
Cozy cafe or tea shop websites
Eco-friendly product packaging
Yoga studio or meditation retreat promotions
Blogs focused on sustainable living or natural health

Suggested color roles

primary

#7CA18A acts as a calming primary, ideal for main headings, key content blocks, or calls-to-action that convey natural elegance.

secondary

#A8D0C4 provides a soft, supportive secondary, excellent for subheadings, background sections, or subtle UI elements.

accent

#4E6B5D serves as a deep, grounding accent, perfect for strong outlines, important interactive elements, or text that needs to stand out.

background

#E8F4F1 creates an airy, clean background, mimicking the frothy texture of matcha and providing a serene base.

text

For optimal readability, use #4E6B5D for headings and a dark charcoal for body text on lighter backgrounds like #E8F4F1 or #D0EDE2. White text works well on #4E6B5D.

Accessibility notes

Ensure sufficient contrast for all text, especially when using lighter greens like #A8D0C4 on #E8F4F1.
Dark text (e.g., #4E6B5D or black) is crucial for readability on #E8F4F1, #D0EDE2, and #A8D0C4.
Avoid using #E8F4F1 or #D0EDE2 as text colors due to low contrast on most backgrounds.
Verify contrast ratios for interactive elements to ensure they are easily discernible for users.

Recommended combinations

Calm & Clear

Use #E8F4F1 as a clean background, #4E6B5D for strong headings, and #7CA18A for body text, ensuring excellent readability.

#E8F4F1 · #4E6B5D · #7CA18A

Matcha Layers

Create subtle depth in UI cards or layered backgrounds, moving from #A8D0C4 to #D0EDE2 with #7CA18A as a reinforcing layer.

#A8D0C4 · #D0EDE2 · #7CA18A

Organic Focus

Apply #7CA18A as a primary content area, with #E8F4F1 for contrasting text or icons, and #4E6B5D for strong calls-to-action.

#7CA18A · #E8F4F1 · #4E6B5D

CSS variables

:root {
  --iced-matcha-ritual-1: #E8F4F1;
  --iced-matcha-ritual-2: #A8D0C4;
  --iced-matcha-ritual-3: #7CA18A;
  --iced-matcha-ritual-4: #4E6B5D;
  --iced-matcha-ritual-5: #D0EDE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "iced-matcha-ritual": {
        1: "#E8F4F1",
        2: "#A8D0C4",
        3: "#7CA18A",
        4: "#4E6B5D",
        5: "#D0EDE2",
      }
    }
  }
}

Hex values

Color 1#E8F4F1

Color 2#A8D0C4

Color 3#7CA18A

Color 4#4E6B5D

Color 5#D0EDE2

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

5.2:1AA

1.1:1Fail

1.5:1Fail

1.7:1Fail

3.5:1AA18

1.4:1Fail

2.5:1Fail

1.7:1Fail

2:1Fail

2.3:1Fail

5.2:1AA

3.5:1AA18

2:1Fail

4.7:1AA

1.1:1Fail

1.4:1Fail

2.3:1Fail

4.7:1AA

Similar palettes

More like Iced Matcha Ritual

Cerulean Pottery Glaze

Cloud Berry

Ethereal Forest Glade