Palette

Sky Blossom Whispers

The gentle, ethereal combination of pale sky blues and delicate floral blushes, like blossoms floating in air.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sky Blossom Whispers 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 Sky Blossom Whispers.

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

Data visualization

#E6E6FA#ADD8E6#DDA0DD#FFF0F5#F0FFFF

Palette guide

How to use Sky Blossom Whispers

Overview

The Sky Blossom Whispers palette combines pale sky blues and delicate floral blushes, like blossoms floating in air. This ethereal collection features the soft #FFF0F5, the gentle #F0FFFF, the calming #E6E6FA, the inviting #ADD8E6, and the charming #DDA0DD. For designers and developers, these shades offer a light, dreamy, and feminine foundation, perfect for creating interfaces and branding that convey serenity, softness, and a touch of romantic charm. It’s an excellent choice for projects where a gentle, tranquil, and welcoming visual experience is desired, ensuring harmony and an uplifting feel across various applications.

Best used for

Spring-themed events and marketing
Children's storybooks and illustrations
Feminine product branding and packaging
Spa and beauty services websites
Wedding planning and bridal websites
Craft and hobby blogs and online shops

Suggested color roles

primary

Utilize #ADD8E6 as a calm, inviting sky blue for main content areas or prominent UI elements.

secondary

Employ #E6E6FA for soft lavender support, ideal for secondary information or subtle backgrounds.

accent

Apply #DDA0DD as a delicate floral blush for charming highlights, calls to action, or decorative elements.

background

Choose #FFF0F5 as an airy, very pale pink base to create an open and serene canvas.

text

For primary body text, use a dark neutral (e.g., #333333 or #4A4A4A), as palette colors are too light for most text sizes. #ADD8E6 or #DDA0DD can be used for larger decorative text elements on very light backgrounds.

Accessibility notes

This palette is predominantly very light; for body text, use a dark neutral color like charcoal or black to ensure readability.
#ADD8E6 and #DDA0DD may have sufficient contrast for larger headings on #FFF0F5 or #F0FFFF, but always verify WCAG AA.
Avoid using #E6E6FA or #F0FFFF for any essential text on the lightest backgrounds to prevent readability issues.
Ensure interactive elements are clearly discernible, possibly with a darker outline or text label for states.

Recommended combinations

Floral Sky

Creates a soft, natural blend ideal for serene backgrounds, headers, or delicate graphical elements.

#FFF0F5 · #ADD8E6 · #DDA0DD

Whisper Light

Offers a gentle, ethereal layering effect perfect for subtle gradients or expansive, airy layouts.

#FFF0F5 · #F0FFFF · #E6E6FA

Blossom Accent

Provides a clean base with a charming floral pop, suitable for highlighting key information or decorative features.

#F0FFFF · #ADD8E6 · #DDA0DD

CSS variables

:root {
  --sky-blossom-whispers-1: #E6E6FA;
  --sky-blossom-whispers-2: #ADD8E6;
  --sky-blossom-whispers-3: #DDA0DD;
  --sky-blossom-whispers-4: #FFF0F5;
  --sky-blossom-whispers-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sky-blossom-whispers": {
        1: "#E6E6FA",
        2: "#ADD8E6",
        3: "#DDA0DD",
        4: "#FFF0F5",
        5: "#F0FFFF",
      }
    }
  }
}

Hex values

Color 1#E6E6FA

Color 2#ADD8E6

Color 3#DDA0DD

Color 4#FFF0F5

Color 5#F0FFFF

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.5:1Fail

1.7:1Fail

1.4:1Fail

1.9:1Fail

2:1Fail

1.1:1Fail

1.4:1Fail

1.9:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

2:1Fail

1.1:1Fail

Similar palettes

More like Sky Blossom Whispers

Sky Blossom Whispers

See it in context.

Ready when you are.

Built with Sky Blossom Whispers.

How to use Sky Blossom Whispers

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Floral Sky

Whisper Light

Blossom Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sky Blossom Whispers