Back to palettes

Palette

Minty Green Tea

A fresh and soothing gradient of greens, inspired by the calming ritual of a mint green tea.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Minty Green Tea 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 Minty Green Tea.

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

Data visualization

#D9ECC7#B0D7A9#87C28F#5DAB7C#349468

Palette guide

How to use Minty Green Tea

Overview

The 'Minty Green Tea' palette offers a soothing gradient of natural greens, inspired by the calming ritual of green tea. Featuring the gentle #D9ECC7, balanced #B0D7A9, and deep #349468, this collection provides designers with a harmonious foundation for creating serene and earthy aesthetics. The subtle shifts between hues like #87C28F and #5DAB7C allow for organic visual transitions and depth. Developers will find these tranquil tones excellent for crafting user interfaces that promote well-being, ideal for projects requiring a sense of nature, health, and understated elegance in their visual language.

Best used for

  • Organic food and beverage branding
  • Wellness and mindfulness apps
  • Herbal product packaging
  • Sustainable living websites
  • Nature photography portfolios
  • Spa and relaxation environments

Suggested color roles

primary

A balanced, earthy green (#87C28F), suitable for main content areas or primary navigation, offering a natural feel.

secondary

A slightly lighter, soft green (#B0D7A9), ideal for subheadings, secondary buttons, or supporting graphical elements.

accent

A deep, grounding forest green (#349468), perfect for impactful calls-to-action, interactive elements, or a strong footer color.

background

A very light, almost creamy green (#D9ECC7), serving as a clean, unobtrusive canvas that enhances content without distraction.

text

For body text, a dark charcoal or black provides optimal readability. For headings, #349468 offers a clear, natural option against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text when using #D9ECC7 or #B0D7A9 as backgrounds; darker text is essential.
  • The contrast between #B0D7A9 and #87C28F is moderate; use carefully for small text or critical UI elements.
  • Pair #349468 with the lightest shades for excellent readability on calls-to-action or important information.
  • Always test text legibility on all background shades, especially for users with visual impairments.

Recommended combinations

Tea Gradient

Creates a smooth, natural gradient perfect for serene backgrounds or header effects.

#D9ECC7 · #B0D7A9 · #87C28F

Earthy Focus

Uses a light background with a soft primary and a grounding accent for key information.

#D9ECC7 · #87C28F · #349468

Minty Depth

Suitable for content blocks or sections where a cohesive, slightly deeper green tone is desired.

#B0D7A9 · #5DAB7C · #349468

CSS variables

:root {
  --minty-green-tea-1: #D9ECC7;
  --minty-green-tea-2: #B0D7A9;
  --minty-green-tea-3: #87C28F;
  --minty-green-tea-4: #5DAB7C;
  --minty-green-tea-5: #349468;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "minty-green-tea": {
        1: "#D9ECC7",
        2: "#B0D7A9",
        3: "#87C28F",
        4: "#5DAB7C",
        5: "#349468",
      }
    }
  }
}

Related searches

green tea color schemecalming green palettenatural soothing colorsearthy mint toneswellness branding greens

Palette colors

Hex values

Color 1#D9ECC7
·
Color 2#B0D7A9
·
Color 3#87C28F
·
Color 4#5DAB7C
·
Color 5#349468
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.2:1Fail
3:1AA18
2
1.3:1Fail
1.3:1Fail
1.7:1Fail
2.4:1Fail
3
1.7:1Fail
1.3:1Fail
1.3:1Fail
1.8:1Fail
4
2.2:1Fail
1.7:1Fail
1.3:1Fail
1.4:1Fail
5
3:1AA18
2.4:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Minty Green Tea

View all pastel