Back to palettes

Palette

Sugar Plum Fairy

Whimsical purples and soft lavenders dance together, inspired by a magical, sugar-dusted fantasy dreamscape.

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

#F5E0FF#D9B4F8#BB86FC#A44FE8#8000FF

Palette guide

How to use Sugar Plum Fairy

Overview

The Sugar Plum Fairy palette features whimsical purples and soft lavenders dancing together, inspired by a magical, sugar-dusted fantasy dreamscape. This captivating collection moves from the ethereal #F5E0FF to the deep #8000FF, with harmonious intermediate shades like #D9B4F8, #BB86FC, and #A44FE8. It’s perfect for projects requiring a touch of fantasy, playfulness, and sophisticated charm. Designers can leverage its gradient potential for enchanting branding, delicate web interfaces, or whimsical digital art. Developers will find these hex codes excellent for creating consistent and visually appealing UI components that evoke a sense of wonder, magic, and refined sweetness, making user experiences feel truly captivating and memorable.

Best used for

  • Magical themed children's games
  • Fantasy novel cover designs
  • Elegant confectionery branding
  • Beauty and skincare product packaging
  • Creative arts and craft websites
  • Dreamy event invitations

Suggested color roles

primary

A strong, vibrant pure violet #8000FF, ideal for primary brand elements, prominent headings, or impactful call-to-action buttons.

secondary

A slightly softer yet still intense purple #A44FE8, suitable for subheadings, navigation, or larger content blocks.

accent

This medium lavender #BB86FC provides a gentle, bright contrast, perfect for interactive elements, icons, or subtle highlights.

background

The palest shade #F5E0FF, offering a soft, ethereal base that enhances the dreamlike quality of the palette.

text

Too light for body text. For readability on #F5E0FF, use #8000FF or a dark charcoal like #333333.

Accessibility notes

  • Avoid using #D9B4F8 or #F5E0FF for small text on light backgrounds due to insufficient contrast.
  • Ensure critical text elements utilize #8000FF or a very dark neutral for optimal readability against #F5E0FF.
  • Lighter shades are best reserved for larger, decorative text or graphical elements.
  • Always test color combinations with accessibility tools to ensure compliance for all users.

Recommended combinations

Magical Spectrum

Create dynamic gradients for hero sections, backgrounds, or to define distinct content blocks.

#8000FF · #A44FE8 · #BB86FC

Frosted Glow

Ideal for subtle highlights, delicate patterns, or soft interactive states on a light background.

#F5E0FF · #D9B4F8 · #BB86FC

Deep Contrast

Use #8000FF as a strong base, #BB86FC for accents, and #F5E0FF for a crisp, light contrast.

#8000FF · #BB86FC · #F5E0FF

CSS variables

:root {
  --sugar-plum-fairy-3-1: #F5E0FF;
  --sugar-plum-fairy-3-2: #D9B4F8;
  --sugar-plum-fairy-3-3: #BB86FC;
  --sugar-plum-fairy-3-4: #A44FE8;
  --sugar-plum-fairy-3-5: #8000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sugar-plum-fairy-3": {
        1: "#F5E0FF",
        2: "#D9B4F8",
        3: "#BB86FC",
        4: "#A44FE8",
        5: "#8000FF",
      }
    }
  }
}

Related searches

sugar plum purple palettefantasy dream colorswhimsical violet brandingmagical UI design purplessoft vibrant purple scheme

Palette colors

Hex values

Color 1#F5E0FF
·
Color 2#D9B4F8
·
Color 3#BB86FC
·
Color 4#A44FE8
·
Color 5#8000FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3.5:1AA18
5.1:1AA
2
1.4:1Fail
1.5:1Fail
2.4:1Fail
3.5:1AA18
3
2.1:1Fail
1.5:1Fail
1.6:1Fail
2.4:1Fail
4
3.5:1AA18
2.4:1Fail
1.6:1Fail
1.4:1Fail
5
5.1:1AA
3.5:1AA18
2.4:1Fail
1.4:1Fail

Similar palettes

More like Sugar Plum Fairy

View all pastel
Sugar Plum Fairy
Sugar Plum Fairy
Sugar Plum Fairy
Candy Floss Dream
Candyfloss Cloud Dream
Confection Dream Puff