Back to palettes

Palette

Mint Leaf Morning

Fresh, invigorating greens of a new morning, reminiscent of crisp mint leaves and cool dew.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#53B88A#8FDEB2#C4F7D4#DBF7E8#2ECC71

Palette guide

How to use Mint Leaf Morning

Overview

The Mint Leaf Morning palette captures the invigorating essence of fresh, new greens, perfect for designs requiring energy and natural vitality. It features a robust #2ECC71 as its darkest tone, complemented by a balanced #53B88A. Lighter, airy shades like #8FDEB2, #C4F7D4, and #DBF7E8 complete the spectrum, providing a sense of growth and openness. This palette is excellent for brands in health, organic products, or any digital experience aiming for a clean, energetic, and eco-conscious feel. Designers can use its clear progression from deep to light to build intuitive visual hierarchies, while developers will find these distinct greens easy to implement for impactful UI elements.

Best used for

  • Organic food branding and packaging
  • Health and wellness apps
  • Gardening and outdoor lifestyle websites
  • Spring collection marketing materials
  • Eco-friendly product landing pages
  • Youth-focused educational platforms

Suggested color roles

primary

Designate #2ECC71 for primary calls to action, important headings, or dominant brand elements that need to pop.

secondary

Utilize #53B88A for secondary information, subheadings, or less critical interactive components.

accent

Apply #8FDEB2 as a vibrant accent for highlights, notifications, or small, energetic details.

background

Employ #DBF7E8 as a light, airy background color to provide a clean canvas and ample breathing room.

text

For optimal readability, use a dark color such as #333333 (charcoal) for body text. #53B88A can work for larger headings on light backgrounds.

Accessibility notes

  • Ensure sufficient contrast when using lighter greens like #C4F7D4 or #DBF7E8 for text on white or very light backgrounds.
  • The darkest shade, #2ECC71, provides excellent contrast with white or #DBF7E8 for text.
  • Avoid using #C4F7D4 as text on #DBF7E8 backgrounds due to very low contrast.
  • Always verify contrast ratios for critical text elements, especially with the lighter palette tones.

Recommended combinations

Vibrant Growth

Ideal for hero sections or banners needing a bold yet fresh statement.

#2ECC71 · #DBF7E8 · #53B88A

Clean Interface

Excellent for user interface elements, forms, and informational panels, promoting clarity.

#53B88A · #C4F7D4 · #8FDEB2

Dewy Fresh

Suitable for background patterns or subtle design accents that evoke natural freshness.

#8FDEB2 · #DBF7E8 · #2ECC71

CSS variables

:root {
  --mint-leaf-morning-1: #53B88A;
  --mint-leaf-morning-2: #8FDEB2;
  --mint-leaf-morning-3: #C4F7D4;
  --mint-leaf-morning-4: #DBF7E8;
  --mint-leaf-morning-5: #2ECC71;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mint-leaf-morning": {
        1: "#53B88A",
        2: "#8FDEB2",
        3: "#C4F7D4",
        4: "#DBF7E8",
        5: "#2ECC71",
      }
    }
  }
}

Related searches

energetic green palettefresh spring color schemeorganic brand colorseco-friendly web designmint leaf hex codes

Palette colors

Hex values

Color 1#53B88A
·
Color 2#8FDEB2
·
Color 3#C4F7D4
·
Color 4#DBF7E8
·
Color 5#2ECC71
·

Accessibility

Contrast checker

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

Similar palettes

More like Mint Leaf Morning

View all vibrant