Back to palettes

Palette

Matcha Latte Calm

Gentle greens and creamy whites that capture the serene and comforting essence of a matcha latte.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C4D3B0#A0C28A#7CA867#E9F4DC#B3C89B

Palette guide

How to use Matcha Latte Calm

Overview

The Matcha Latte Calm palette captures a serene, comforting essence, ideal for designers and developers seeking a gentle aesthetic. Dominated by tranquil greens and creamy tones, this palette evokes nature and relaxation. Its core includes the airy #E9F4DC, a perfect base, complemented by the soft #C4D3B0 and the balanced #A0C28A. For depth, #B3C89B offers a muted green, while #7CA867 provides a richer, grounding tone. This collection is exceptionally versatile for creating user interfaces, branding, or digital content that promotes wellness, organic products, or peaceful environments, ensuring a harmonious and inviting user experience.

Best used for

  • Wellness and meditation apps
  • Organic food and beverage branding
  • Spa and beauty website design
  • Eco-friendly product packaging
  • Blog themes focused on mindfulness or lifestyle
  • Interior design visualization

Suggested color roles

primary

Use #A0C28A as the primary hue for main navigation, brand logos, or prominent headings, offering a natural and balanced feel.

secondary

Employ #C4D3B0 for secondary elements like subheadings, card backgrounds, or subtle graphical elements, providing warmth and softness.

accent

Apply #7CA867 for calls-to-action, important icons, or key highlights, ensuring sufficient contrast and a grounding visual anchor.

background

Utilize #E9F4DC extensively for clean, airy backgrounds, large content areas, or as a canvas that promotes a sense of calm and spaciousness.

text

For optimal readability, use a dark charcoal like #333333 or the deep #7CA867 for body text on lighter backgrounds such as #E9F4DC.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades like #C4D3B0 on #E9F4DC.
  • The darkest green, #7CA867, provides good contrast against #E9F4DC for body text or interactive elements.
  • Avoid using #C4D3B0 or #B3C89B for small text elements on #E9F4DC without checking WCAG contrast ratios.
  • Consider using a strong outline or bolding for interactive elements if they rely solely on subtle color changes for distinction.

Recommended combinations

Soft Interface

Ideal for creating gentle user interfaces, content cards, or subtle gradients that promote a sense of calm.

#E9F4DC · #C4D3B0 · #A0C28A

Natural Focus

Effective for highlighting key information or calls to action against a light background, providing clear visual hierarchy.

#A0C28A · #7CA867 · #E9F4DC

Tranquil Accent

Use for layered visual depth in illustrations, decorative elements, or progressive hover states for interactive components.

#C4D3B0 · #B3C89B · #7CA867

CSS variables

:root {
  --matcha-latte-calm-1: #C4D3B0;
  --matcha-latte-calm-2: #A0C28A;
  --matcha-latte-calm-3: #7CA867;
  --matcha-latte-calm-4: #E9F4DC;
  --matcha-latte-calm-5: #B3C89B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "matcha-latte-calm": {
        1: "#C4D3B0",
        2: "#A0C28A",
        3: "#7CA867",
        4: "#E9F4DC",
        5: "#B3C89B",
      }
    }
  }
}

Related searches

matcha green color schemecalming pastel palettesoft green brand colorstranquil nature paletteearthy cream green colors

Palette colors

Hex values

Color 1#C4D3B0
·
Color 2#A0C28A
·
Color 3#7CA867
·
Color 4#E9F4DC
·
Color 5#B3C89B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
1.4:1Fail
1.1:1Fail
2
1.3:1Fail
1.4:1Fail
1.7:1Fail
1.1:1Fail
3
1.7:1Fail
1.4:1Fail
2.4:1Fail
1.5:1Fail
4
1.4:1Fail
1.7:1Fail
2.4:1Fail
1.6:1Fail
5
1.1:1Fail
1.1:1Fail
1.5:1Fail
1.6:1Fail

Similar palettes

More like Matcha Latte Calm

View all pastel
Iced Matcha Ritual
Matcha Dream
Blossom Dew Kiss
Cerulean Pottery Glaze
Cloud Berry
Ethereal Forest Glade