Back to palettes

Palette

Mint Leaf Refresh

Crisp and rejuvenating greens, capturing the invigorating freshness of crushed mint leaves.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mint Leaf Refresh 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 Mint Leaf Refresh.

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

Data visualization

#3CB371#98FB98#D9FAD9#F0FFF0#66CDAA

Palette guide

How to use Mint Leaf Refresh

Overview

The Mint Leaf Refresh palette is a collection of crisp, rejuvenating greens, designed to evoke the invigorating freshness of crushed mint leaves. It centers around a vibrant #3CB371, complemented by a softer #66CDAA. The lighter shades, including a bright #98FB98, a delicate #D9FAD9, and an almost white #F0FFF0, provide an airy and clean aesthetic. This palette is perfectly suited for brands in wellness, clean beauty, or any digital product aiming for a serene yet revitalizing user experience. Designers can leverage its gentle progression of greens to create depth and visual interest, while developers will find these distinct yet harmonious tones easy to integrate into responsive designs.

Best used for

  • Clean beauty product lines
  • Wellness and spa service websites
  • Eco-conscious lifestyle blogs
  • Spring-themed digital campaigns
  • Home goods and decor branding
  • Mobile app interfaces for productivity

Suggested color roles

primary

Utilize #3CB371 as the main color for headings, primary buttons, or key brand identifiers.

secondary

Employ #66CDAA for secondary content, subheadings, or supporting interactive elements.

accent

Apply #98FB98 as a refreshing accent for highlights, small icons, or subtle calls to attention.

background

Use #F0FFF0 as a clean, almost white background, offering maximum clarity and a minimalist feel.

text

For optimal readability, use a dark neutral like #333333 (charcoal) for body text. #3CB371 can be used for larger, impactful text on light backgrounds.

Accessibility notes

  • Ensure strong contrast when using the very light #D9FAD9 or #F0FFF0 for text on similar backgrounds.
  • The darker shades #3CB371 and #66CDAA provide good contrast against #F0FFF0 for text.
  • Avoid using #98FB98 for small text on light backgrounds; it may not meet WCAG AA standards.
  • Always test text and background color pairings with a contrast checker, especially for critical information.

Recommended combinations

Crisp Clarity

Ideal for clean layouts, headers, and navigation, providing a fresh and legible look.

#3CB371 · #F0FFF0 · #66CDAA

Gentle Flow

Suitable for content blocks, testimonials, or subtle background variations, creating a soft transition.

#66CDAA · #D9FAD9 · #98FB98

Minty Highlight

Great for accentuating specific elements or creating a light, airy visual separation.

#98FB98 · #F0FFF0 · #3CB371

CSS variables

:root {
  --mint-leaf-refresh-1: #3CB371;
  --mint-leaf-refresh-2: #98FB98;
  --mint-leaf-refresh-3: #D9FAD9;
  --mint-leaf-refresh-4: #F0FFF0;
  --mint-leaf-refresh-5: #66CDAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mint-leaf-refresh": {
        1: "#3CB371",
        2: "#98FB98",
        3: "#D9FAD9",
        4: "#F0FFF0",
        5: "#66CDAA",
      }
    }
  }
}

Related searches

refreshing green paletteclean mint color schemenature inspired UI colorswellness brand hex codeslight green web design

Palette colors

Hex values

Color 1#3CB371
·
Color 2#98FB98
·
Color 3#D9FAD9
·
Color 4#F0FFF0
·
Color 5#66CDAA
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
2.4:1Fail
2.6:1Fail
1.4:1Fail
2
2.1:1Fail
1.1:1Fail
1.2:1Fail
1.5:1Fail
3
2.4:1Fail
1.1:1Fail
1.1:1Fail
1.7:1Fail
4
2.6:1Fail
1.2:1Fail
1.1:1Fail
1.9:1Fail
5
1.4:1Fail
1.5:1Fail
1.7:1Fail
1.9:1Fail

Similar palettes

More like Mint Leaf Refresh

View all cool