Back to palettes

Palette

Fresh Spring Breeze

Crisp and refreshing, embodying the cool, invigorating scent of mint on a spring day.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fresh Spring Breeze 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 Spring Breeze.

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

Data visualization

#98FF98#AFEEEE#D0F0C0#E0FFFF#F0FFF0

Palette guide

How to use Fresh Spring Breeze

Overview

The Fresh Spring Breeze palette is a collection of crisp, airy pastels, embodying the cool and invigorating essence of a spring day. With shades ranging from the soft mint #98FF98 to the serene aqua #AFEEEE and the ethereal #F0FFF0, this palette creates a light, refreshing, and calming atmosphere. Designers and developers can utilize these gentle hues to craft inviting user interfaces, establish a soothing brand presence, or create digital experiences that feel clean, tranquil, and optimistic. It's ideal for projects seeking a light touch and a sense of renewal.

Best used for

  • Children's clothing and toy brands
  • Wellness and mindfulness applications
  • Spa and relaxation service websites
  • Clean technology and eco-friendly products
  • Spring seasonal marketing campaigns
  • Minimalist UI design

Suggested color roles

primary

Utilize #AFEEEE as a serene primary color for main content, headers, or calming UI elements.

secondary

Employ #98FF98 for supporting content, background sections, or illustrations, adding a fresh, playful feel.

accent

The pale green #D0F0C0 can serve as a subtle accent for delicate highlights, interactive states, or decorative details.

background

Opt for #F0FFF0 or #E0FFFF as a very light, expansive background to provide a clean and airy canvas.

text

For optimal readability on these very light colors, use a medium gray, dark green, or soft charcoal. Avoid light text on light backgrounds.

Accessibility notes

  • Crucially, ensure strong contrast for all text, as the palette consists of extremely light colors. Use dark text exclusively.
  • Avoid using any of the palette's lighter shades for small text; reserve them for backgrounds or large graphical elements.
  • When using colors like #98FF98 for text, ensure it's on a significantly lighter background like #F0FFF0 to meet contrast guidelines.
  • Provide alternative visual cues for interactive elements, as color changes alone may be too subtle on these pastels.

Recommended combinations

Airy Serenity

Creates a soft, calming gradient for backgrounds, large headers, or serene hero sections.

#AFEEEE · #D0F0C0 · #F0FFF0

Spring Whisper

Ideal for fresh, clean layouts, offering subtle accents and clear content separation.

#98FF98 · #E0FFFF · #D0F0C0

Cool Refresh

A balanced combination for body text and backgrounds, ensuring readability with a fresh, tranquil touch.

#AFEEEE · #98FF98 · #D0F0C0

CSS variables

:root {
  --fresh-spring-breeze-1: #98FF98;
  --fresh-spring-breeze-2: #AFEEEE;
  --fresh-spring-breeze-3: #D0F0C0;
  --fresh-spring-breeze-4: #E0FFFF;
  --fresh-spring-breeze-5: #F0FFF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fresh-spring-breeze": {
        1: "#98FF98",
        2: "#AFEEEE",
        3: "#D0F0C0",
        4: "#E0FFFF",
        5: "#F0FFF0",
      }
    }
  }
}

Related searches

spring pastel palettemint green blue paletteairy calm colorsrefreshing UI colorscool light greens

Palette colors

Hex values

Color 1#98FF98
·
Color 2#AFEEEE
·
Color 3#D0F0C0
·
Color 4#E0FFFF
·
Color 5#F0FFF0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1:1Fail
1.2:1Fail
1.2:1Fail
2
1:1Fail
1:1Fail
1.2:1Fail
1.2:1Fail
3
1:1Fail
1:1Fail
1.2:1Fail
1.2:1Fail
4
1.2:1Fail
1.2:1Fail
1.2:1Fail
1:1Fail
5
1.2:1Fail
1.2:1Fail
1.2:1Fail
1:1Fail

Similar palettes

More like Fresh Spring Breeze

View all pastel