Palette

Evening Blossom Reverie

A tranquil blend of dusky purples and soft pinks, evoking a serene garden scene at twilight.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Evening Blossom Reverie 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 Evening Blossom Reverie.

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

Data visualization

#5D3F6A#8F6E9A#D2B4D2#E9B8B6#F8E4EA

Palette guide

How to use Evening Blossom Reverie

Overview

The Evening Blossom Reverie palette evokes a tranquil garden scene at twilight, blending dusky purples with soft, ethereal pinks. This captivating collection features the rich, deep purple of #5D3F6A, balanced by the softer #8F6E9A. It gracefully transitions into delicate lavenders like #D2B4D2, and then into the warm, subtle pinks of #E9B8B6 and the almost-white #F8E4EA. Designers aiming for a dreamy, romantic, or sophisticated feminine aesthetic will find this palette incredibly versatile. It's ideal for high-end fashion branding, wedding invitations, luxury cosmetics, or digital interfaces that require a soft, inviting, and elegant touch. Developers can leverage these hex codes to craft enchanting visual experiences, from subtle gradients to engaging interactive elements.

Best used for

Luxury cosmetic or fragrance branding
Wedding and event stationery design
Feminine fashion or lifestyle e-commerce
Romantic novel covers or editorial layouts
High-end confectionery packaging
Dream-themed digital art and illustrations

Suggested color roles

primary

A deep, rich plum purple, #5D3F6A, excellent for main headings, navigation bars, or key brand elements, conveying luxury and depth.

secondary

A softer, elegant purple, #8F6E9A, suitable for subheadings, secondary calls-to-action, or supporting design elements, adding sophistication.

accent

A soft, warm blush pink, #E9B8B6, perfect for subtle highlights, hover states, or delicate UI indicators, adding a touch of romance.

background

A very light, almost white, with a gentle pink undertone, #F8E4EA, providing a clean, airy canvas that enhances readability.

text

A deep, dark violet or charcoal like #402C4D is recommended for body text on lighter backgrounds to ensure optimal readability and maintain the palette's elegant feel.

Accessibility notes

Ensure sufficient contrast when using #8F6E9A as text on #D2B4D2 or #E9B8B6; they might be too light for small text.
The darkest color, #5D3F6A, provides excellent contrast against #F8E4EA for text.
Always use a dark, contrasting color (e.g., black or deep violet) for body text against any of the lighter palette backgrounds.
Avoid using #F8E4EA or #E9B8B6 as text colors due to extremely low contrast on most backgrounds.

Recommended combinations

Twilight Bloom

Ideal for creating elegant gradients or layered elements that evoke depth and a sophisticated transition.

#5D3F6A · #8F6E9A · #D2B4D2

Petal Whisper

Excellent for light, airy backgrounds, delicate patterns, or subtle UI elements that feel soft and inviting.

#F8E4EA · #E9B8B6 · #D2B4D2

Reverie Dream

Perfect for striking contrasts in branding, creating focal points with the deep purple on light, romantic backgrounds.

#5D3F6A · #E9B8B6 · #F8E4EA

CSS variables

:root {
  --evening-blossom-reverie-1: #5D3F6A;
  --evening-blossom-reverie-2: #8F6E9A;
  --evening-blossom-reverie-3: #D2B4D2;
  --evening-blossom-reverie-4: #E9B8B6;
  --evening-blossom-reverie-5: #F8E4EA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "evening-blossom-reverie": {
        1: "#5D3F6A",
        2: "#8F6E9A",
        3: "#D2B4D2",
        4: "#E9B8B6",
        5: "#F8E4EA",
      }
    }
  }
}

Hex values

Color 1#5D3F6A

Color 2#8F6E9A

Color 3#D2B4D2

Color 4#E9B8B6

Color 5#F8E4EA

Accessibility

Contrast checker

2:1Fail

4.7:1AA

5:1AA

7.2:1AAA

2:1Fail

2.3:1Fail

2.5:1Fail

3.6:1AA18

4.7:1AA

2.3:1Fail

1.1:1Fail

1.5:1Fail