Back to palettes

Palette

Moroccan Mint Tea

Refreshing greens and soft creams reflect the invigorating taste of Moroccan mint tea.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moroccan Mint 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 Moroccan Mint Tea.

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

Data visualization

#F8F8F8#D8EAD9#B1D8B4#87C28C#6AAB70

Palette guide

How to use Moroccan Mint Tea

Overview

The Moroccan Mint Tea palette offers a refreshing and calm blend of greens and soft creams, perfectly reflecting the invigorating taste of its namesake. Featuring a clean #F8F8F8 (near white), gentle #D8EAD9 (a pale green), and progressively deeper greens like #B1D8B4, #87C28C, and #6AAB70 (dark mint green), this scheme is ideal for creating serene and fresh digital experiences. Designers and developers can leverage this palette to evoke tranquility, natural purity, and a sophisticated lightness, making it excellent for minimalist and wellness-focused applications.

Best used for

  • Wellness and spa brand websites
  • Eco-friendly product packaging and branding
  • Minimalist and clean UI designs for apps
  • Health and organic food blogs
  • Calming meditation or mindfulness apps
  • Sustainable fashion e-commerce

Suggested color roles

primary

Utilize #B1D8B4 as a calming central green for main content areas, providing a fresh and inviting feel.

secondary

Apply #87C28C for secondary headings, buttons, or distinct content blocks, offering a slightly deeper, more grounded green.

accent

Employ #6AAB70 for strong accents, important calls to action, or decorative elements that require more visual weight.

background

Use #F8F8F8 (near white) for clean, airy backgrounds, ensuring optimal readability for darker text.

text

A dark charcoal or deep forest green (like #6AAB70) provides excellent contrast and readability for primary body text. Use #D8EAD9 for subtle secondary text or links.

Accessibility notes

  • Ensure sufficient contrast for text on #F8F8F8, #D8EAD9, and #B1D8B4; dark text is crucial for readability.
  • Avoid using light greens (e.g., #D8EAD9) on white or near-white backgrounds for critical text due to low contrast.
  • Text on #6AAB70 will generally require white or a very light cream to meet WCAG contrast standards.
  • Check contrast for all interactive elements and icons, especially those using lighter green shades.

Recommended combinations

Fresh Breeze

Ideal for clean, airy layouts, subtle transitions, and background elements that need a gentle touch.

#F8F8F8 · #D8EAD9 · #B1D8B4

Minty Depth

Excellent for creating visual hierarchy, distinguishing content blocks, or adding depth to illustrations.

#B1D8B4 · #87C28C · #6AAB70

Subtle Greenery

Perfect for balancing a refreshing accent with a clean background, suitable for highlighting key information.

#D8EAD9 · #6AAB70 · #F8F8F8

CSS variables

:root {
  --moroccan-mint-tea-1: #F8F8F8;
  --moroccan-mint-tea-2: #D8EAD9;
  --moroccan-mint-tea-3: #B1D8B4;
  --moroccan-mint-tea-4: #87C28C;
  --moroccan-mint-tea-5: #6AAB70;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-mint-tea": {
        1: "#F8F8F8",
        2: "#D8EAD9",
        3: "#B1D8B4",
        4: "#87C28C",
        5: "#6AAB70",
      }
    }
  }
}

Related searches

mint green color palettefresh color scheme UIcalm green designeco-friendly brand colorsmoroccan tea inspiration

Palette colors

Hex values

Color 1#F8F8F8
·
Color 2#D8EAD9
·
Color 3#B1D8B4
·
Color 4#87C28C
·
Color 5#6AAB70
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2:1Fail
2.6:1Fail
2
1.2:1Fail
1.3:1Fail
1.6:1Fail
2.2:1Fail
3
1.5:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
2:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
5
2.6:1Fail
2.2:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Moroccan Mint Tea

View all cool