Back to palettes

Palette

Pale Blossom Serene

Soft, muted tones inspired by the delicate and transient beauty of early spring blossoms.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pale Blossom Serene 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 Pale Blossom Serene.

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

Data visualization

#F5E0E8#EEDEE7#E4D1D8#D8C3CC#CCD3D9

Palette guide

How to use Pale Blossom Serene

Overview

The Pale Blossom Serene palette offers a collection of soft, muted tones, inspired by the delicate and transient beauty of early spring blossoms. With hues ranging from the gentle #F5E0E8 and #EEDEE7 to the slightly deeper #D8C3CC and the cool gray-pink #CCD3D9, this scheme creates an atmosphere of calm and subtlety. Designers and developers can leverage these colors to craft designs that are ethereal, comforting, and understated. It's an excellent choice for projects requiring a gentle, feminine touch or for creating tranquil digital and physical spaces that promote relaxation and softness.

Best used for

  • Wedding invitations and stationery
  • Baby care products and apparel
  • Beauty and skincare brands
  • Feminine fashion and accessories
  • Serene interior design concepts
  • Wellness and mindfulness apps

Suggested color roles

primary

Use #E4D1D8 as a gentle, calming base color for main content areas or brand identity.

secondary

Employ #D8C3CC for supporting elements or sub-sections, providing a slightly deeper, supportive tone.

accent

Highlight subtle details or interactive elements with #CCD3D9, offering a cool, delicate contrast.

background

Utilize #F5E0E8 or #EEDEE7 for light, airy backgrounds to create a spacious and unobtrusive canvas.

text

Pair with a dark gray or soft charcoal, such as #666666, for optimal readability against these pale hues.

Accessibility notes

  • Very low contrast between most colors; rely heavily on dark text for readability.
  • Avoid using light-colored text on any of these pale shades, as it will be illegible.
  • Use bolder font weights for important text to improve visibility and hierarchy.
  • Interactive elements need clear visual cues (e.g., underlines, icons) beyond color differentiation.

Recommended combinations

Soft Bloom

Ideal for backgrounds, decorative elements, or patterns that require a gentle, harmonious blend.

#F5E0E8 · #E4D1D8 · #CCD3D9

Gentle Depth

Excellent for sub-sections, subtle branding, or elements that need a layered, understated look.

#EEDEE7 · #D8C3CC · #E4D1D8

Serene Contrast

Suitable for UI elements, slight differentiations in content, or delicate visual accents.

#CCD3D9 · #F5E0E8 · #D8C3CC

CSS variables

:root {
  --pale-blossom-serene-1: #F5E0E8;
  --pale-blossom-serene-2: #EEDEE7;
  --pale-blossom-serene-3: #E4D1D8;
  --pale-blossom-serene-4: #D8C3CC;
  --pale-blossom-serene-5: #CCD3D9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pale-blossom-serene": {
        1: "#F5E0E8",
        2: "#EEDEE7",
        3: "#E4D1D8",
        4: "#D8C3CC",
        5: "#CCD3D9",
      }
    }
  }
}

Related searches

pastel serene palettedelicate blossom colorssoft feminine schemetranquil UI designmuted pink grey

Palette colors

Hex values

Color 1#F5E0E8
·
Color 2#EEDEE7
·
Color 3#E4D1D8
·
Color 4#D8C3CC
·
Color 5#CCD3D9
·

Accessibility

Contrast checker

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

Similar palettes

More like Pale Blossom Serene

View all pastel
Cloudless Sky Wash
Dewdrop Petal Blush
Dreamy Skyscape Tint
Ethereal Forest Glade
Gentle Arctic Bloom
Gentle Sky Gaze