Back to palettes

Palette

Cool Mint Serene

A refreshing and crisp palette evoking the clean, invigorating sensation of a cool mint breeze, truly serene.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cool Mint Serene 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 Cool Mint Serene.

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

Data visualization

#98FB98#3CB371#F5F5F5#C0C0C0#ADD8E6

Palette guide

How to use Cool Mint Serene

Overview

The Cool Mint Serene palette offers a refreshing and crisp blend of minty greens, cool greys, and a touch of light blue, perfect for designs that aim for a clean, invigorating, and calming aesthetic. Featuring a vibrant #98FB98, a deeper #3CB371, balanced with neutral #F5F5F5 and #C0C0C0, and a soft blue #ADD8E6, this collection evokes a sense of freshness and tranquility. Designers and developers can leverage these hex codes to create clean, modern interfaces, nature-inspired branding, or soothing digital experiences. It's an excellent choice for projects requiring a vibrant yet serene feel, promoting a sense of well-being and clarity.

Best used for

  • Health and wellness app interfaces
  • Eco-friendly product branding
  • Spa or meditation website design
  • Spring-themed digital marketing campaigns
  • Minimalist interior design concepts
  • Fresh food or beverage packaging

Suggested color roles

primary

Use #3CB371 as a grounding primary color for headers, important buttons, or main sections.

secondary

Apply #98FB98 for secondary content areas, playful accents, or subtle highlights.

accent

Introduce #ADD8E6 as a cool, refreshing accent for interactive elements or contrasting details.

background

The clean #F5F5F5 serves as an excellent crisp, airy background for content.

text

A deep charcoal (#333333) or dark green (#1E4D2E) provides excellent contrast on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing light colors like #98FB98 and #ADD8E6 with text.
  • Text in a dark color on #F5F5F5 will be highly readable; check contrast for #C0C0C0.
  • White text will likely be necessary on #3CB371 for proper readability.
  • Use #3CB371 for key interactive elements to ensure they stand out against lighter backgrounds.

Recommended combinations

Fresh Start

Excellent for clean layouts, main content areas, or strong, clear headings.

#F5F5F5 · #3CB371 · #98FB98

Minty Calm

Use for refreshing accents, playful illustrations, or gentle data visualizations.

#98FB98 · #ADD8E6 · #3CB371

Cool Harmony

Ideal for layered backgrounds, subtle textures, or creating a balanced visual hierarchy.

#C0C0C0 · #F5F5F5 · #3CB371

CSS variables

:root {
  --cool-mint-serene-1: #98FB98;
  --cool-mint-serene-2: #3CB371;
  --cool-mint-serene-3: #F5F5F5;
  --cool-mint-serene-4: #C0C0C0;
  --cool-mint-serene-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cool-mint-serene": {
        1: "#98FB98",
        2: "#3CB371",
        3: "#F5F5F5",
        4: "#C0C0C0",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

cool mint green color paletteserene fresh design hex codesclean nature inspired UIcalming green grey blue paletteinvigorating wellness colors

Palette colors

Hex values

Color 1#98FB98
·
Color 2#3CB371
·
Color 3#F5F5F5
·
Color 4#C0C0C0
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

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

Similar palettes

More like Cool Mint Serene

View all cool
Eucalyptus Spa Serene
Fresh Mint Serenity
Frosted Spearmint Dew
Frosty Berry Bloom
Iced Mint Bloom
Mint Leaf Refresh