Back to palettes

Palette

Matcha Latte Calm

A soothing and subtle blend, inspired by the comforting, earthy tones of a warm matcha latte.

neutralcalm5 colors
More neutral 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

#6B8E23#8FBC8F#BDB76B#F5F5DC#FAFAD2

Palette guide

How to use Matcha Latte Calm

Overview

The "Matcha Latte Calm" palette offers a serene and earthy collection of hues perfect for creating a comforting and natural aesthetic. Inspired by the popular drink, this palette features a rich, deep matcha green, #6B8E23, complemented by a softer, more muted green, #8FBC8F. A warm, golden olive, #BDB76B, introduces a subtle brightness, while the creamy off-whites, #F5F5DC and #FAFAD2, provide versatile, gentle foundations. Developers can leverage these harmonious tones for user interfaces requiring a soft touch, and designers will find them ideal for branding that evokes tranquility, nature, or organic quality. This palette excels in bringing a sense of peace and groundedness to digital and print designs alike, ensuring a cohesive and inviting user experience.

Best used for

  • Wellness and meditation app interfaces
  • Organic and natural food brand packaging
  • Eco-conscious product websites and branding
  • Blogs and social media for cozy lifestyle or home decor
  • Spa, yoga studio, or holistic service branding
  • Children's book illustrations or educational materials

Suggested color roles

primary

Utilize #6B8E23 as the dominant brand color, ideal for headings, primary calls-to-action, or hero sections to establish a natural, grounding presence.

secondary

Apply #8FBC8F for supporting elements like secondary buttons, navigation links, or graphical accents, offering a softer yet cohesive green tone.

accent

Use #BDB76B sparingly to draw attention to key information, highlight interactive states, or add a subtle, warm accent without overwhelming the calm aesthetic.

background

Employ #F5F5DC or #FAFAD2 as clean, serene background colors for content areas, cards, or entire page layouts, providing excellent readability.

text

For optimal readability on light backgrounds like #F5F5DC, a dark charcoal such as #333333 is recommended. For text on #6B8E23, consider pure white or a very light cream.

Accessibility notes

  • Ensure sufficient contrast when pairing #6B8E23 with #F5F5DC or #FAFAD2 for text, meeting WCAG AA standards.
  • Exercise caution when using #BDB76B for small text or critical UI elements on light backgrounds, as its contrast might be borderline.
  • Prioritize larger font sizes or bolder weights for text set in #8FBC8F on lighter backgrounds to enhance readability.
  • Consider using a darker green like #6B8E23 for interactive states (hover/focus) on lighter elements to provide clear visual feedback.

Recommended combinations

Earthy Core

Ideal for establishing a primary brand presence; #6B8E23 for strong headings, #F5F5DC as a soft background, and #FAFAD2 for secondary text or card elements.

#6B8E23 · #F5F5DC · #FAFAD2

Muted Harmony

Excellent for serene UI components, illustrations, or content blocks where #8FBC8F provides a gentle accent, #BDB76B a warm highlight, and #F5F5DC a clean base.

#8FBC8F · #BDB76B · #F5F5DC

Nature's Depth

Suitable for creating rich, layered visuals in infographics or complex data displays, using the varying green tones to differentiate elements while maintaining cohesion.

#6B8E23 · #8FBC8F · #BDB76B

CSS variables

:root {
  --matcha-latte-calm-2-1: #6B8E23;
  --matcha-latte-calm-2-2: #8FBC8F;
  --matcha-latte-calm-2-3: #BDB76B;
  --matcha-latte-calm-2-4: #F5F5DC;
  --matcha-latte-calm-2-5: #FAFAD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "matcha-latte-calm-2": {
        1: "#6B8E23",
        2: "#8FBC8F",
        3: "#BDB76B",
        4: "#F5F5DC",
        5: "#FAFAD2",
      }
    }
  }
}

Related searches

matcha green color palettecalm green hex codesearthy neutral colorsserene web design paletteorganic brand color scheme

Palette colors

Hex values

Color 1#6B8E23
·
Color 2#8FBC8F
·
Color 3#BDB76B
·
Color 4#F5F5DC
·
Color 5#FAFAD2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
1.8:1Fail
3.4:1AA18
3.6:1AA18
2
1.8:1Fail
1:1Fail
1.9:1Fail
2:1Fail
3
1.8:1Fail
1:1Fail
1.9:1Fail
1.9:1Fail
4
3.4:1AA18
1.9:1Fail
1.9:1Fail
1:1Fail
5
3.6:1AA18
2:1Fail
1.9:1Fail
1:1Fail

Similar palettes

More like Matcha Latte Calm

View all neutral
Bamboo Serenity Path
Coastal Dune Grass
Cozy Espresso Nook
Green Tea Serene
Quiet Library Nook
Zen Garden Serenity