Back to palettes

Palette

Frosted Pastels

Delicate, muted greens and blues, like soft pastels touched by a gentle frost.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frosted Pastels 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 Frosted Pastels.

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

Data visualization

#D4EDEA#CBE7E0#B4D7CD#9EC8BC#87B9AB

Palette guide

How to use Frosted Pastels

Overview

The Frosted Pastels palette offers a refreshing collection of delicate, muted greens and blues, evoking the serene beauty of pastels touched by frost. With shades like the soft #D4EDEA, the gentle #CBE7E0, and the deeper #B4D7CD, this palette is perfect for creating calm, airy, and inviting designs. Designers and developers will find these cool, subtle tones, including #9EC8BC and #87B9AB, highly effective for projects that require a fresh, natural, and soothing aesthetic. It's an excellent choice for environmental themes, wellness brands, or any application where a sense of tranquility and understated elegance is desired.

Best used for

  • Eco-friendly brand identity
  • Wellness and mindfulness apps
  • Nature-inspired digital art
  • Children's product design
  • Spa and relaxation website themes
  • Sustainable fashion branding

Suggested color roles

primary

Use #B4D7CD as a grounding primary color, offering a balanced muted green for main content areas or brand presence.

secondary

Employ #9EC8BC for supporting sections or UI elements, providing a slightly deeper hue that complements the primary.

accent

Highlight with #87B9AB to add a touch of richer depth, drawing attention to calls to action or important visual cues.

background

The lightest shade, #D4EDEA, creates a clean, airy background that enhances readability and maintains a fresh feel.

text

For body text, a dark grey or charcoal ensures optimal readability, while #87B9AB can be used for headings on very light backgrounds.

Accessibility notes

  • Ensure sufficient contrast between the light background #D4EDEA and any light text colors.
  • Pair the darker shades like #87B9AB with white or very light text for better contrast.
  • Avoid using adjacent pastel shades for critical information without strong visual separation.
  • Test all text and background combinations against WCAG guidelines for accessibility.

Recommended combinations

Minty Calm

Creates a tranquil and fresh interface, ideal for wellness or nature-themed apps.

#D4EDEA · #B4D7CD · #9EC8BC

Frosted Leaf

Provides a subtle, deepening gradient, great for elegant banners or background textures.

#CBE7E0 · #9EC8BC · #87B9AB

Airy Green

Effective for highlighting key information with a deeper accent against a soft, light base.

#D4EDEA · #87B9AB · #B4D7CD

CSS variables

:root {
  --frosted-pastels-1: #D4EDEA;
  --frosted-pastels-2: #CBE7E0;
  --frosted-pastels-3: #B4D7CD;
  --frosted-pastels-4: #9EC8BC;
  --frosted-pastels-5: #87B9AB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-pastels": {
        1: "#D4EDEA",
        2: "#CBE7E0",
        3: "#B4D7CD",
        4: "#9EC8BC",
        5: "#87B9AB",
      }
    }
  }
}

Related searches

muted green palettefrosted pastel colorscalm mint green schemeairy cool tones designsustainable brand colors

Palette colors

Hex values

Color 1#D4EDEA
·
Color 2#CBE7E0
·
Color 3#B4D7CD
·
Color 4#9EC8BC
·
Color 5#87B9AB
·

Accessibility

Contrast checker

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

Similar palettes

More like Frosted Pastels

View all pastel
Cerulean Pottery Glaze
Fresh Spring Breeze
Frosted Mint Delight
Frosted Spearmint Dew
Meadowland Sky Dream
Mint Matcha Serenity