Back to palettes

Palette

Matcha Dream

Soft and calming greens, reminiscent of the earthy, gentle tones of finely prepared matcha.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9CBF9D#B4CCB5#D2E0D4#7D9F7F#A4C4A6

Palette guide

How to use Matcha Dream

Overview

The Matcha Dream palette offers a serene collection of soft, earthy greens, perfect for evoking a sense of calm and natural tranquility. With hues like the gentle #9CBF9D, the airy #D2E0D4, and the grounding #7D9F7F, this palette is ideal for designs aiming for a subtle yet sophisticated organic feel. Its muted tones, including #B4CCB5 and #A4C4A6, make it incredibly versatile for creating harmonious interfaces and branding that prioritize comfort and well-being. Designers and developers will find these shades excellent for crafting welcoming digital experiences or elegant physical products, ensuring a consistent and soothing visual language.

Best used for

  • Wellness and meditation apps
  • Organic food and beverage branding
  • Eco-friendly product packaging
  • Nature-themed websites or blogs
  • Spas, yoga studios, or tranquil interior designs
  • Sustainable fashion labels

Suggested color roles

primary

A balanced, inviting green, #9CBF9D, excellent for main navigation elements, hero sections, or primary brand accents. It offers a gentle but noticeable presence.

secondary

A slightly lighter, complementary green, #A4C4A6, that provides visual interest without overpowering. Use for secondary buttons, active states, or supporting graphic elements.

accent

The deepest shade in the palette, #7D9F7F, perfect for drawing attention to calls-to-action, important icons, or subtle borders. Its depth adds sophistication and readability.

background

The lightest green, #D2E0D4, ideal for clean, airy backgrounds that promote readability and a sense of spaciousness. It provides a soft canvas for other elements.

text

A dark charcoal or nearly black (#333333) will provide optimal contrast and readability against the lighter greens, especially #D2E0D4 and #B4CCB5, ensuring accessibility.

Accessibility notes

  • Ensure sufficient contrast when using lighter greens like #D2E0D4 for text against #B4CCB5 backgrounds; a darker text color is generally required.
  • Use #7D9F7F for text on light backgrounds (#D2E0D4) to meet WCAG AA standards for small text, improving readability.
  • Avoid placing light text (e.g., white or near-white) directly on mid-tone greens (#9CBF9D or #A4C4A6) without careful contrast checking.
  • For interactive elements, ensure focus states have a clear, contrasting outline or fill against the surrounding palette colors for user guidance.

Recommended combinations

Gentle Harmony

Ideal for clean landing pages or calm user interfaces, with the lightest as background, mid-tone for key elements, and darkest for accents or strong calls-to-action.

#D2E0D4 · #9CBF9D · #7D9F7F

Natural Flow

Excellent for subtle gradients or layered designs where a smooth transition between similar tones is desired, such as data visualizations or soft branding elements.

#B4CCB5 · #A4C4A6 · #9CBF9D

Earthy Depth

Suitable for creating a sense of natural depth, using the darkest for headers or footers, the mid-tone for content blocks, and the lightest for background text.

#7D9F7F · #A4C4A6 · #D2E0D4

CSS variables

:root {
  --matcha-dream-1: #9CBF9D;
  --matcha-dream-2: #B4CCB5;
  --matcha-dream-3: #D2E0D4;
  --matcha-dream-4: #7D9F7F;
  --matcha-dream-5: #A4C4A6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "matcha-dream": {
        1: "#9CBF9D",
        2: "#B4CCB5",
        3: "#D2E0D4",
        4: "#7D9F7F",
        5: "#A4C4A6",
      }
    }
  }
}

Related searches

matcha green color schemecalming green palettesoft pastel greenstranquil nature colorsorganic brand colors

Palette colors

Hex values

Color 1#9CBF9D
·
Color 2#B4CCB5
·
Color 3#D2E0D4
·
Color 4#7D9F7F
·
Color 5#A4C4A6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.5:1Fail
1.1:1Fail
2
1.2:1Fail
1.3:1Fail
1.7:1Fail
1.1:1Fail
3
1.5:1Fail
1.3:1Fail
2.2:1Fail
1.4:1Fail
4
1.5:1Fail
1.7:1Fail
2.2:1Fail
1.5:1Fail
5
1.1:1Fail
1.1:1Fail
1.4:1Fail
1.5:1Fail

Similar palettes

More like Matcha Dream

View all pastel
Iced Matcha Ritual
Matcha Latte Calm
Blossom Dew Kiss
Cerulean Pottery Glaze
Desert Blossom Whisper
Dreamy Skyscape Tint