Back to palettes

Palette

Zephyr Bloom Drift

Soft mints and pale blues gently merge, mimicking the delicate drift of spring blossoms on a gentle breeze.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Zephyr Bloom Drift 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 Zephyr Bloom Drift.

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

Data visualization

#B3D9D2#C7E6E0#E0F2F0#8CBBBE#6FA5A8

Palette guide

How to use Zephyr Bloom Drift

Overview

The Zephyr Bloom Drift palette offers a delicate and airy aesthetic, perfect for designs that require a touch of gentleness. This collection features soft mints and pale blues, including the serene Honeydew (#E0F2F0), a calming Light Cyan (#C7E6E0), and the slightly deeper Cadet Blue (#8CBBBE). It's designed to mimic the gentle drift of spring blossoms on a breeze, creating a tranquil and sophisticated mood. Developers and designers can utilize these harmonious tones to build elegant interfaces, soothing brand identities, or delicate visual content that emphasizes lightness and subtle beauty.

Best used for

  • Baby product branding and packaging
  • Wedding invitations and stationery
  • Wellness and self-care app interfaces
  • Delicate floral design projects
  • Relaxed fashion and lifestyle blogs
  • Subtle, minimalist website designs

Suggested color roles

primary

Cadet Blue (#8CBBBE) provides a soft yet stable primary color, suitable for key sections or main elements.

secondary

Dark Cyan (#6FA5A8) acts as a deeper, grounding secondary color, good for subheadings or subtle accents.

accent

Light Cyan (#B3D9D2) offers a bright, ethereal highlight for interactive elements or delicate patterns.

background

Honeydew (#E0F2F0) serves as an exceptionally light, airy background, ideal for spacious layouts.

text

For readability, use Dark Cyan (#6FA5A8) for headings, or a dark charcoal/black for body text, especially on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when using text on the very light Honeydew (#E0F2F0) background; opt for dark text.
  • Dark Cyan (#6FA5A8) offers the best contrast within the palette for text on lighter shades like #E0F2F0 or #C7E6E0.
  • Avoid using Light Cyan (#B3D9D2) or Light Cyan (#C7E6E0) for small text to maintain readability.
  • For UI elements, use Cadet Blue (#8CBBBE) against #E0F2F0 for better visibility and a clear hierarchy.

Recommended combinations

Airy Base

Creates a seamless, light gradient for backgrounds, subtle overlays, or soft transitions.

#E0F2F0 · #C7E6E0 · #B3D9D2

Gentle Contrast

Provides clear visual hierarchy for headings and body text on a clean, light canvas.

#8CBBBE · #E0F2F0 · #6FA5A8

Bloom Highlight

Ideal for delicate accents, interactive states, or adding a touch of subtle color variation.

#B3D9D2 · #C7E6E0 · #6FA5A8

CSS variables

:root {
  --zephyr-bloom-drift-1: #B3D9D2;
  --zephyr-bloom-drift-2: #C7E6E0;
  --zephyr-bloom-drift-3: #E0F2F0;
  --zephyr-bloom-drift-4: #8CBBBE;
  --zephyr-bloom-drift-5: #6FA5A8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zephyr-bloom-drift": {
        1: "#B3D9D2",
        2: "#C7E6E0",
        3: "#E0F2F0",
        4: "#8CBBBE",
        5: "#6FA5A8",
      }
    }
  }
}

Related searches

pastel mint blue palettegentle spring colorsairy design schemedelicate ui palettebloom drift colors

Palette colors

Hex values

Color 1#B3D9D2
·
Color 2#C7E6E0
·
Color 3#E0F2F0
·
Color 4#8CBBBE
·
Color 5#6FA5A8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.4:1Fail
1.8:1Fail
2
1.1:1Fail
1.1:1Fail
1.6:1Fail
2.1:1Fail
3
1.3:1Fail
1.1:1Fail
1.8:1Fail
2.4:1Fail
4
1.4:1Fail
1.6:1Fail
1.8:1Fail
1.3:1Fail
5
1.8:1Fail
2.1:1Fail
2.4:1Fail
1.3:1Fail

Similar palettes

More like Zephyr Bloom Drift

View all pastel
Aqua Glimmer Dew
Azure Dream Canvas
Blooming Garden Sprig
Cherry Blossom Breeze
Cherry Blossom Breeze
Cherry Blossom Cloud