Palette

Sugar Plum

Soft, enchanting purples and lavenders, reminiscent of sweet dreams and whimsical fairy tales.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sugar Plum 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 Sugar Plum.

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

Data visualization

#5D2E8C#8B47AC#C67AC6#EBC0EB#FAE6FA

Palette guide

How to use Sugar Plum

Overview

The Sugar Plum palette offers a captivating gradient of purples, ranging from deep and mysterious to soft and ethereal, perfect for evoking sweet dreams and whimsical fairy tales. This collection features the rich #5D2E8C (Deep Plum) and #8B47AC (Medium Purple), transitioning gracefully to the lighter #C67AC6 (Lavender) and #EBC0EB (Thistle). The lightest shade, #FAE6FA (Lavender Blush), provides an airy finish, making this palette incredibly versatile for creating depth, elegance, and a touch of magic. Ideal for feminine branding, romantic themes, or sophisticated digital interfaces, it allows designers to craft visually engaging experiences with harmonious purple tones.

Best used for

Elegant feminine branding and logos
Romantic wedding and event stationery
Luxury beauty or fashion website design
Mystical fantasy art and illustrations
Sophisticated children's product packaging
Dreamy social media content creation

Suggested color roles

primary

Utilize #5D2E8C as a strong, luxurious primary for headings or key brand elements, establishing depth and authority.

secondary

Employ #8B47AC for subheadings, prominent buttons, or larger graphic accents, providing a rich, complementary tone.

accent

Apply #C67AC6 or #EBC0EB sparingly for interactive elements, highlights, or decorative details to add a light, magical sparkle.

background

Designate #FAE6FA as a soft, ethereal background, offering a gentle canvas that ensures excellent readability for darker text.

text

For optimal readability on lighter backgrounds, a deep plum (#5D2E8C) or charcoal is recommended. On darker backgrounds, crisp white (#FFFFFF) ensures clarity.

Accessibility notes

Ensure high contrast for text on #FAE6FA or #EBC0EB backgrounds; dark text is essential for legibility.
Avoid using #C67AC6 or #EBC0EB for small text against similar mid-tone backgrounds to prevent readability issues.
When using #5D2E8C for backgrounds, white text (#FFFFFF) will provide the best contrast.
Test color pairings for contrast, especially when combining adjacent shades, to ensure accessibility for all users.

Recommended combinations

Deep Enchantment

Creates a sophisticated gradient for hero sections or layered branding, conveying luxury and depth.

#5D2E8C · #8B47AC · #C67AC6

Light Whimsy

Ideal for soft backgrounds, delicate patterns, or UI elements that need an airy, dreamy feel.

#EBC0EB · #FAE6FA · #C67AC6

Vibrant Contrast

Perfect for calls-to-action or to highlight key information, offering a strong yet elegant visual pop.

#5D2E8C · #C67AC6 · #FAE6FA

CSS variables

:root {
  --sugar-plum-1: #5D2E8C;
  --sugar-plum-2: #8B47AC;
  --sugar-plum-3: #C67AC6;
  --sugar-plum-4: #EBC0EB;
  --sugar-plum-5: #FAE6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sugar-plum": {
        1: "#5D2E8C",
        2: "#8B47AC",
        3: "#C67AC6",
        4: "#EBC0EB",
        5: "#FAE6FA",
      }
    }
  }
}

Hex values

Color 1#5D2E8C

Color 2#8B47AC

Color 3#C67AC6

Color 4#EBC0EB

Color 5#FAE6FA

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

5.9:1AA

7.9:1AAA

1.6:1Fail

1.9:1Fail

3.7:1AA18

4.9:1AA

3.1:1AA18

1.9:1Fail

2.5:1Fail

5.9:1AA

3.7:1AA18

1.9:1Fail

1.3:1Fail

7.9:1AAA

4.9:1AA

2.5:1Fail

1.3:1Fail

Similar palettes

More like Sugar Plum

Sugar Plum

See it in context.

Ready when you are.

Built with Sugar Plum.

How to use Sugar Plum

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Enchantment

Light Whimsy

Vibrant Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sugar Plum