Back to palettes

Palette

Pastel Blossom Dream

Gentle, ethereal hues inspired by a dreamy garden in full bloom under a soft, morning light.

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

#F2D2DE#D5E1ED#EBE0F4#D0F4EB#F2E3D2

Palette guide

How to use Pastel Blossom Dream

Overview

The Pastel Blossom Dream palette offers gentle, ethereal hues inspired by a dreamy garden in full bloom under a soft, morning light. This serene collection features a delicate rose pink #F2D2DE, a calming sky blue #D5E1ED, an ethereal lavender #EBE0F4, a refreshing mint green #D0F4EB, and a soft creamy beige #F2E3D2. Designers and developers can leverage these muted tones to craft tranquil user interfaces, serene brand identities, or minimalist digital experiences. It's an excellent choice for projects aiming to convey calmness, purity, and a sophisticated gentleness, perfect for a truly dreamy and airy aesthetic.

Best used for

  • Wellness and meditation apps
  • Baby product websites and nursery decor
  • Minimalist art and design portfolios
  • Tranquil spa or beauty branding
  • Spring fashion collections and lookbooks
  • Serene e-commerce sites for artisan goods

Suggested color roles

primary

Use #D5E1ED or #EBE0F4 for main content areas or primary brand elements to convey calmness and spaciousness.

secondary

Apply #F2D2DE or #D0F4EB as a gentle supporting color for subheadings or decorative accents, adding subtle warmth.

accent

Introduce #F2E3D2 as a soft, grounding accent for buttons or information panels, blending harmoniously.

background

Utilize #F2E3D2 as the primary background color to create a spacious, clean, and inviting canvas.

text

Pair these extremely light pastels with a dark gray (e.g., #4A4A4A) or soft brown for optimal readability and a gentle contrast.

Accessibility notes

  • All colors are very light; dark text is essential for readability against these backgrounds.
  • Avoid using light text on any of these pastel backgrounds to prevent accessibility issues.
  • Test color combinations for WCAG AA compliance, as similar light hues require careful pairing.
  • Ensure sufficient contrast between different pastel shades when used adjacently for visual clarity.

Recommended combinations

Ethereal Sky

Ideal for soft gradients, background textures, or large content blocks that need to feel open and airy.

#D5E1ED · #EBE0F4 · #F2D2DE

Garden Mist

Perfect for clean layouts, secondary information panels, or calming illustrations that require a refreshing look.

#D0F4EB · #F2E3D2 · #D5E1ED

Soft Accent

Combine for elegant buttons, icons, or subtle data visualizations where clarity and a refined accent are needed.

#F2D2DE · #EBE0F4 · #F2E3D2

CSS variables

:root {
  --pastel-blossom-dream-3-1: #F2D2DE;
  --pastel-blossom-dream-3-2: #D5E1ED;
  --pastel-blossom-dream-3-3: #EBE0F4;
  --pastel-blossom-dream-3-4: #D0F4EB;
  --pastel-blossom-dream-3-5: #F2E3D2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-blossom-dream-3": {
        1: "#F2D2DE",
        2: "#D5E1ED",
        3: "#EBE0F4",
        4: "#D0F4EB",
        5: "#F2E3D2",
      }
    }
  }
}

Related searches

ethereal pastel palettesoft spring colorscalm blossom schemegentle UI designmuted dream palette

Palette colors

Hex values

Color 1#F2D2DE
·
Color 2#D5E1ED
·
Color 3#EBE0F4
·
Color 4#D0F4EB
·
Color 5#F2E3D2
·

Accessibility

Contrast checker

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

Similar palettes

More like Pastel Blossom Dream

View all pastel