Palette

Matcha Ceremony Calm

A calming blend of soft greens and grays, evoking the peaceful ritual of a traditional Japanese tea ceremony.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3F5F4F#7C9F8A#B8DCC8#E3F5EC#CCCDC1

Palette guide

How to use Matcha Ceremony Calm

Overview

The Matcha Ceremony Calm palette is a serene collection designed to evoke tranquility and subtle elegance. Featuring a harmonious blend of muted greens and a soft, grounding gray, this palette, including the deep forest green #3F5F4F and the airy, near-white #E3F5EC, is perfect for creating peaceful digital and physical spaces. Its gentle tones, like the soothing #7C9F8A and the versatile #CCCDC1, offer a sophisticated yet understated aesthetic. Designers can leverage this palette for projects requiring a sense of calm, natural beauty, and refined simplicity, ensuring a cohesive and inviting user experience. Developers will find these hex codes easy to implement for a consistent brand identity across various platforms.

Best used for

Meditation and wellness app interfaces
Spa and retreat branding or website design
Eco-friendly product packaging
Yoga studio interiors and marketing materials
Sustainable lifestyle blogs or e-commerce sites
Minimalist interior design concepts

Suggested color roles

primary

#3F5F4F - Use this deep, grounding forest green for main branding elements, prominent headers, or key calls to action to establish a sense of stability and sophistication.

secondary

#7C9F8A - Ideal for secondary navigation, subheadings, or background sections that require a slightly darker, more natural feel than the primary background.

accent

#B8DCC8 - Employ this soft, airy green for subtle highlights, interactive elements like buttons, or small decorative details that need a gentle pop without being overpowering.

background

#E3F5EC - This very light, almost off-white green provides a clean, calming canvas for content, ensuring high readability and a spacious, minimalist aesthetic.

text

#3F5F4F - Excellent for primary body text on light backgrounds like #E3F5EC, offering superb readability with a natural, sophisticated tone. For lighter text, consider a very dark charcoal.

Accessibility notes

Ensure sufficient contrast when using #3F5F4F for text on #E3F5EC; it meets WCAG AA for large text but might need careful consideration for small body text.
Avoid placing very light text directly on #B8DCC8 or #CCCDC1 without checking contrast ratios, as these shades are quite subtle.
For optimal readability, use a dark color like #3F5F4F or a true black for body text against the light #E3F5EC background.
The mid-tone #7C9F8A should have good contrast with #E3F5EC for text or UI elements, but always verify for accessibility standards.

Recommended combinations

Calm Foundation

Primary web page layouts, clean content areas, or tranquil branding where clarity and calm are paramount.

#E3F5EC · #3F5F4F · #7C9F8A

Gentle Harmony

Subtler sections, secondary information blocks, or soft graphic elements that require a slightly muted, earthy feel.

#CCCDC1 · #3F5F4F · #B8DCC8

Natural Depth

Infographics, illustrations, or UI components where depth and natural layering are desired, using the full range of greens.

#3F5F4F · #B8DCC8 · #7C9F8A

CSS variables

:root {
  --matcha-ceremony-calm-1: #3F5F4F;
  --matcha-ceremony-calm-2: #7C9F8A;
  --matcha-ceremony-calm-3: #B8DCC8;
  --matcha-ceremony-calm-4: #E3F5EC;
  --matcha-ceremony-calm-5: #CCCDC1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "matcha-ceremony-calm": {
        1: "#3F5F4F",
        2: "#7C9F8A",
        3: "#B8DCC8",
        4: "#E3F5EC",
        5: "#CCCDC1",
      }
    }
  }
}

Hex values

Color 1#3F5F4F

Color 2#7C9F8A

Color 3#B8DCC8

Color 4#E3F5EC

Color 5#CCCDC1

Accessibility

Contrast checker

2.4:1Fail

4.8:1AA

6.3:1AA

4.4:1AA18

2.4:1Fail

2:1Fail

2.6:1Fail

1.8:1Fail

4.8:1AA

2:1Fail

1.3:1Fail

1.1:1Fail

6.3:1AA

2.6:1Fail

1.3:1Fail

1.4:1Fail

4.4:1AA18

1.8:1Fail

1.1:1Fail

1.4:1Fail

Similar palettes

More like Matcha Ceremony Calm

Matcha Ceremonial Calm

Quiet Stone Arrange

Silent Woodland Mist