Back to palettes

Palette

Sugar Plum Fairy

Enchanting shades of lavender and violet, creating a whimsical and delicate confectionery dream.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9932CC#BA55D3#DDA0DD#EE82EE#DA70D6

Palette guide

How to use Sugar Plum Fairy

Overview

The Sugar Plum Fairy palette offers an enchanting selection of purples, perfect for designs requiring a touch of magic and whimsy. Featuring rich shades like #9932CC (Amethyst) and #BA55D3 (Medium Orchid), alongside lighter, ethereal tones such as #DDA0DD (Plum) and #EE82EE (Violet), this palette is inherently playful yet sophisticated. Designers can leverage these hues to create depth and visual interest, making it ideal for whimsical branding, elegant event invitations, or dreamy digital interfaces. The inclusion of #DA70D6 (Orchid) ensures a cohesive flow, allowing for smooth gradients and harmonious visual compositions in both web and print applications.

Best used for

  • Whimsical children's book illustrations
  • Elegant wedding stationery and event branding
  • Feminine beauty product packaging
  • Fantasy-themed website designs
  • Creative photography backdrops and props
  • Playful fashion and accessory designs

Suggested color roles

primary

Use #9932CC as a deep, luxurious primary for prominent headings or brand elements, establishing a strong, mystical presence.

secondary

Employ #BA55D3 for subheadings, buttons, or secondary graphic elements, offering a lighter yet still vibrant counterpoint to the primary.

accent

Apply #EE82EE sparingly for interactive elements, hover states, or small decorative details to add a bright, magical pop.

background

Utilize #DDA0DD or #DA70D6 for soft, ethereal backgrounds that provide a gentle canvas without overpowering content, allowing for good readability with darker text.

text

For body text, a dark charcoal or black (#000000) on lighter backgrounds like #DDA0DD ensures excellent readability. For text on darker primary colors, use a crisp white.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter colors like #DDA0DD with text; consider a darker shade for readability.
  • Avoid using #EE82EE or #DA70D6 for small text against similarly light backgrounds; increase font size or darken the text color.
  • When using #9932CC for backgrounds, white text (#FFFFFF) will provide strong contrast and legibility.
  • Test color blindness compatibility, as some purple shades can be challenging; offer alternative visual cues.

Recommended combinations

Mystic Depth

Ideal for a rich, layered aesthetic in branding or hero sections, providing depth and elegance.

#9932CC · #BA55D3 · #DDA0DD

Ethereal Glow

Perfect for light, airy designs like invitations or soft UI elements, creating a delicate and whimsical feel.

#DA70D6 · #EE82EE · #DDA0DD

Playful Accent

Use for calls-to-action or decorative elements where a vibrant, energetic contrast is desired.

#BA55D3 · #EE82EE · #9932CC

CSS variables

:root {
  --sugar-plum-fairy-5-1: #9932CC;
  --sugar-plum-fairy-5-2: #BA55D3;
  --sugar-plum-fairy-5-3: #DDA0DD;
  --sugar-plum-fairy-5-4: #EE82EE;
  --sugar-plum-fairy-5-5: #DA70D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sugar-plum-fairy-5": {
        1: "#9932CC",
        2: "#BA55D3",
        3: "#DDA0DD",
        4: "#EE82EE",
        5: "#DA70D6",
      }
    }
  }
}

Related searches

whimsical purple color schemepastel violet palette designfantasy dreamland colorselegant lavender brandinglight purple UI colors

Palette colors

Hex values

Color 1#9932CC
·
Color 2#BA55D3
·
Color 3#DDA0DD
·
Color 4#EE82EE
·
Color 5#DA70D6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.8:1Fail
2.5:1Fail
2:1Fail
2
1.4:1Fail
1.9:1Fail
1.7:1Fail
1.4:1Fail
3
2.8:1Fail
1.9:1Fail
1.1:1Fail
1.4:1Fail
4
2.5:1Fail
1.7:1Fail
1.1:1Fail
1.2:1Fail
5
2:1Fail
1.4:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Sugar Plum Fairy

View all pastel