Palette

Glacial Mint Chill

Crisp, refreshing blues and greens that evoke the pure, untamed beauty of an icy mint landscape.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacial Mint Chill 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 Glacial Mint Chill.

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

Data visualization

#E0FFFF#AFEEEE#7FFFD4#40E0D0#20B2AA

Palette guide

How to use Glacial Mint Chill

Overview

The Glacial Mint Chill palette delivers a crisp and invigorating blend of minty blues and greens, evoking the purity of an icy landscape. From the deep #20B2AA to the luminous #E0FFFF, with vibrant intermediate shades like #40E0D0 and #7FFFD4, this collection is designed for designers and developers seeking to create refreshing and clean digital experiences. It’s perfect for projects that aim to convey freshness, natural purity, and a cool, modern aesthetic. The harmonious gradient of hues allows for versatile application, from striking brand elements to soothing background textures.

Best used for

Mint-flavored product packaging and branding
Skincare and beauty brands (refreshing focus)
Spa and relaxation service websites
Tech startups with a clean, modern aesthetic
Children's toy and apparel branding
Eco-conscious lifestyle brands

Suggested color roles

primary

Utilize #20B2AA as the grounding primary color for main headings, logos, or calls-to-action, providing a deep, stable presence.

secondary

Employ #40E0D0 for supporting content areas, subheadings, or active states, adding a vibrant and refreshing touch.

accent

Apply #7FFFD4 for bright highlights, progress indicators, or decorative elements that need an energetic pop of aquamarine.

background

The very light #E0FFFF offers an airy and clean background, perfect for enhancing content readability and a spacious feel.

text

For body text, use #20B2AA on #E0FFFF to ensure strong readability, or a dark charcoal for general content.

Accessibility notes

Ensure #20B2AA text on #E0FFFF background meets WCAG AA contrast for good readability.
Avoid using #AFEEEE or #7FFFD4 for small text on #E0FFFF due to insufficient contrast.
Use #40E0D0 for large headings on #E0FFFF, but verify contrast for smaller text sizes.
For interactive elements, #20B2AA provides excellent visibility and clarity.

Recommended combinations

Minty Header

A deep teal header (#20B2AA) on a very light background (#E0FFFF), with a vibrant turquoise accent (#40E0D0) for emphasis.

#20B2AA · #E0FFFF · #40E0D0

Fresh UI

A refreshing turquoise (#40E0D0) for main content, a soft aqua panel (#AFEEEE), and the lightest background (#E0FFFF) for a clean look.

#40E0D0 · #AFEEEE · #E0FFFF

Energetic Pop

Utilize the bright aquamarine (#7FFFD4) against a light background (#E0FFFF), with the deep teal (#20B2AA) providing strong contrast for key information.

#7FFFD4 · #E0FFFF · #20B2AA

CSS variables

:root {
  --glacial-mint-chill-1: #E0FFFF;
  --glacial-mint-chill-2: #AFEEEE;
  --glacial-mint-chill-3: #7FFFD4;
  --glacial-mint-chill-4: #40E0D0;
  --glacial-mint-chill-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-mint-chill": {
        1: "#E0FFFF",
        2: "#AFEEEE",
        3: "#7FFFD4",
        4: "#40E0D0",
        5: "#20B2AA",
      }
    }
  }
}

Hex values

Color 1#E0FFFF

Color 2#AFEEEE

Color 3#7FFFD4

Color 4#40E0D0

Color 5#20B2AA

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

2.5:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

2:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

2.1:1Fail

1.6:1Fail

1.3:1Fail

1.6:1Fail

2.5:1Fail

2:1Fail

2.1:1Fail

1.6:1Fail

Similar palettes

More like Glacial Mint Chill

Glacial Mint Chill

See it in context.

Ready when you are.

Built with Glacial Mint Chill.

How to use Glacial Mint Chill

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Minty Header

Fresh UI

Energetic Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Glacial Mint Chill