Back to palettes

Palette

Fresh Mint Serenity

Refreshing cool greens and blues, like a tranquil garden after a gentle rain.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fresh Mint Serenity 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 Fresh Mint Serenity.

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

Data visualization

#B2D8D8#8FDADA#6ADCDC#45DCDC#20DCDC

Palette guide

How to use Fresh Mint Serenity

Overview

The Fresh Mint Serenity palette is a calming, monochromatic collection of cool mint greens and aqua tones, designed to evoke tranquility and clarity. Ranging from the light #B2D8D8 to the deep #20DCDC, these colors create a refreshing and clean aesthetic. Designers and developers can harness this palette to build serene user interfaces, establish a soothing brand presence, or craft digital spaces that feel both modern and peaceful. It's an excellent choice for projects where a sense of calm, freshness, and understated elegance is paramount.

Best used for

  • Spa and wellness branding
  • Health and beauty applications
  • Clean technology interfaces
  • Aquatic or marine-themed designs
  • Children's educational apps
  • Modern interior design concepts

Suggested color roles

primary

Use #45DCDC as a vibrant yet serene primary color for calls-to-action, key features, or impactful headings.

secondary

Employ #6ADCDC for supporting content, subheadings, or background sections that require a gentle color lift.

accent

The deepest tone, #20DCDC, can be used for strong highlights, important notifications, or as a grounding dark element.

background

Opt for #B2D8D8 as a light, expansive background to create an airy and calming canvas for the design.

text

For optimal readability on light mints, use a dark gray or black. On darker shades like #20DCDC, white or #B2D8D8 provides excellent contrast.

Accessibility notes

  • Ensure sufficient contrast for text on lighter shades like #B2D8D8 and #8FDADA; use darker text colors.
  • The most vibrant colors, like #45DCDC, may need careful pairing with text to meet WCAG contrast guidelines.
  • For critical information, use #20DCDC with white text, or dark gray text on #B2D8D8.
  • Avoid using #B2D8D8 as a text color on similarly light backgrounds to prevent readability issues.

Recommended combinations

Cool Gradient

Ideal for subtle background gradients, data visualizations, or layered UI elements for depth.

#B2D8D8 · #8FDADA · #6ADCDC

Vibrant Pop

A striking combination for main calls-to-action, feature highlights, or prominent branding.

#B2D8D8 · #45DCDC · #20DCDC

Serene Base

A clean, calm foundation for content with readable dark gray text, perfect for web pages and apps.

#B2D8D8 · #8FDADA · #6ADCDC

CSS variables

:root {
  --fresh-mint-serenity-1: #B2D8D8;
  --fresh-mint-serenity-2: #8FDADA;
  --fresh-mint-serenity-3: #6ADCDC;
  --fresh-mint-serenity-4: #45DCDC;
  --fresh-mint-serenity-5: #20DCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fresh-mint-serenity": {
        1: "#B2D8D8",
        2: "#8FDADA",
        3: "#6ADCDC",
        4: "#45DCDC",
        5: "#20DCDC",
      }
    }
  }
}

Related searches

mint green color palettecool aqua colorsserene blue greenrefreshing design palettetranquil mint scheme

Palette colors

Hex values

Color 1#B2D8D8
·
Color 2#8FDADA
·
Color 3#6ADCDC
·
Color 4#45DCDC
·
Color 5#20DCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.1:1Fail
1.1:1Fail
1.1:1Fail
2
1:1Fail
1:1Fail
1.1:1Fail
1.1:1Fail
3
1.1:1Fail
1:1Fail
1:1Fail
1:1Fail
4
1.1:1Fail
1.1:1Fail
1:1Fail
1:1Fail
5
1.1:1Fail
1.1:1Fail
1:1Fail
1:1Fail

Similar palettes

More like Fresh Mint Serenity

View all cool
Frosted Spearmint Dew
Iced Mint Bloom
Mint Meadow Breeze
Minty Freshwater Stream
Cool Mint Serene
Eucalyptus Spa Serene