Back to palettes

Palette

Cloud Blossom Breeze

Light, airy whites and muted grays, like delicate blossoms drifting on a gentle cloud breeze.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Blossom 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 Cloud Blossom Breeze.

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

Data visualization

#F8F8FF#F0F8FF#E6E6FA#DCDCDC#C0C0C0

Palette guide

How to use Cloud Blossom Breeze

Overview

The Cloud Blossom Breeze palette is a delicate fusion of light, airy whites and muted grays, evoking the serene image of delicate blossoms drifting on a gentle cloud breeze. Featuring pristine whites like #F8F8FF and #F0F8FF, it introduces subtle warmth with #E6E6FA (lavender blush) and grounds the lightness with #DCDCDC and #C0C0C0. This collection is ideal for creating minimalist, serene, and sophisticated designs, perfect for brands that value purity, tranquility, and understated elegance in their visual presence.

Best used for

  • Wedding photography websites
  • Minimalist fashion lookbooks
  • Luxury spa and wellness branding
  • Serene digital art and illustrations
  • Baby product design and packaging
  • Clean editorial layouts

Suggested color roles

primary

Use #F8F8FF or #F0F8FF as the main background to establish a pristine, airy, and expansive canvas.

secondary

Apply #E6E6FA (light lavender blush) or #DCDCDC (light grey) for subtle differentiation in sections or UI elements.

accent

Introduce #C0C0C0 (medium grey) for grounding elements, fine lines, or very subtle interactive components.

background

A base of #F8F8FF provides an ethereal and clean foundation, allowing content to breathe.

text

For optimal readability, use a dark grey (e.g., #333333) or black text color on these very light backgrounds.

Accessibility notes

  • Text contrast is critical; always use dark text on these extremely light backgrounds.
  • Ensure interactive elements are clearly distinguishable from their background colors.
  • Avoid using light grey text on white or near-white backgrounds for any essential information.
  • Verify contrast ratios with accessibility tools for all text and UI elements.

Recommended combinations

Airy Foundation

Creates a soft, layered background effect, perfect for a gentle and inviting user interface.

#F8F8FF · #F0F8FF · #E6E6FA

Blossom Ground

Provides a balance of lightness with grounding grey, ideal for content cards or subtle borders.

#F0F8FF · #DCDCDC · #C0C0C0

Serene Contrast

Combines the purest white with the deepest grey for subtle contrast, adding definition without harshness.

#F8F8FF · #C0C0C0 · #E6E6FA

CSS variables

:root {
  --cloud-blossom-breeze-1: #F8F8FF;
  --cloud-blossom-breeze-2: #F0F8FF;
  --cloud-blossom-breeze-3: #E6E6FA;
  --cloud-blossom-breeze-4: #DCDCDC;
  --cloud-blossom-breeze-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-blossom-breeze": {
        1: "#F8F8FF",
        2: "#F0F8FF",
        3: "#E6E6FA",
        4: "#DCDCDC",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

airy white grey palettesoft blossom colorsminimalist calm designlight serene tonessubtle pastel greys

Palette colors

Hex values

Color 1#F8F8FF
·
Color 2#F0F8FF
·
Color 3#E6E6FA
·
Color 4#DCDCDC
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

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

Similar palettes

More like Cloud Blossom Breeze

View all pastel
Ethereal Cloud Veil
Azure Dream Canvas
Celestial Blush
Cloud Dream Whisper
Cloud Mist Whisper
Cloud Puff Dream