Palette

Pastel Blossom Dream

A delicate blend of soft hues, evoking the gentle beauty of spring blossoms.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pastel Blossom Dream 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 Pastel Blossom Dream.

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

Data visualization

#FDDDE6#CCE0FF#E6F0E6#FFFACD#EEDDFF

Palette guide

How to use Pastel Blossom Dream

Overview

The Pastel Blossom Dream palette offers a delicate blend of soft hues, perfectly evoking the gentle beauty of spring blossoms. Featuring a serene #CCE0FF blue, a calming #E6F0E6 green, and a tender #FDDDE6 pink, alongside a sunny #FFFACD yellow and a dreamy #EEDDFF lavender, this palette is ideal for designers and developers aiming for a tranquil and ethereal aesthetic. Its light, airy nature makes it versatile for projects requiring a sense of peace and natural elegance, ensuring a soft visual experience without being overtly vibrant. This collection radiates a calm, inviting atmosphere.

Best used for

Wedding invitations and stationery
Baby product branding and packaging
Spa and wellness website designs
Floral design portfolios
Gentle children's book illustrations
Soft fashion lookbooks and editorials

Suggested color roles

primary

Use #CCE0FF as a calming and expansive primary color, perfect for main sections or large backgrounds to set a serene tone.

secondary

Employ #E6F0E6 to introduce a natural, fresh complement, ideal for secondary elements, accents, or subtle graphic details.

accent

Apply #FDDDE6 for a tender and romantic accent, drawing attention to calls-to-action or decorative highlights.

background

Utilize #FFFACD as a very light, warm background to provide an airy and inviting canvas for content.

text

For optimal readability, use a dark charcoal text, such as #333333, or a deep plum for headings and body text.

Accessibility notes

Ensure sufficient contrast for all text elements against these light pastel backgrounds; WCAG AA is crucial.
Avoid using light pastels for small font sizes or thin line weights to maintain legibility.
Consider providing alternative visual cues (e.g., icons, bolding) for interactive elements to aid distinction.
Test color combinations with color blindness simulators to ensure all users can perceive key information.

Recommended combinations

Serene UI Base

Ideal for a soft user interface: #CCE0FF for background, #E6F0E6 for card elements, and #FDDDE6 for interactive buttons.

#CCE0FF · #E6F0E6 · #FDDDE6

Ethereal Accent

Create a dreamy layout: #FFFACD as a section background, #EEDDFF for delicate illustrations, and #CCE0FF for subtle text accents.

#FFFACD · #EEDDFF · #CCE0FF

Gentle Gradient

Combine for a smooth, subtle background gradient, adding depth to headers or hero sections.

#FDDDE6 · #CCE0FF · #E6F0E6

CSS variables

:root {
  --pastel-blossom-dream-1: #FDDDE6;
  --pastel-blossom-dream-2: #CCE0FF;
  --pastel-blossom-dream-3: #E6F0E6;
  --pastel-blossom-dream-4: #FFFACD;
  --pastel-blossom-dream-5: #EEDDFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-blossom-dream": {
        1: "#FDDDE6",
        2: "#CCE0FF",
        3: "#E6F0E6",
        4: "#FFFACD",
        5: "#EEDDFF",
      }
    }
  }
}

Hex values

Color 1#FDDDE6

Color 2#CCE0FF

Color 3#E6F0E6

Color 4#FFFACD

Color 5#EEDDFF

Accessibility

Contrast checker

1.1:1Fail

1.2:1Fail

1:1Fail

1.1:1Fail

1.3:1Fail

1:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1:1Fail

1.1:1Fail

1.2:1Fail

Similar palettes

More like Pastel Blossom Dream

Pastel Blossom Dream

See it in context.

Ready when you are.

Built with Pastel Blossom Dream.

How to use Pastel Blossom Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Serene UI Base

Ethereal Accent

Gentle Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pastel Blossom Dream