Palette

Pixie Dream Shimmer

Shimmering, light purples evoking the delicate and magical essence of pixie dust at twilight.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pixie Dream Shimmer 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 Pixie Dream Shimmer.

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

Data visualization

#E6CCFF#D1B3FF#BE99FF#A880FF#9166FF

Palette guide

How to use Pixie Dream Shimmer

Overview

The "Pixie Dream Shimmer" palette presents a harmonious gradient of shimmering light purples, evoking an ethereal and magical essence perfect for delicate designs. Ranging from the softest lavender of `#E6CCFF` to the deeper, richer violet of `#9166FF`, this monochromatic scheme offers subtle variations that create depth without harsh contrast. Designers and developers can leverage these hues to build elegant, serene interfaces, enchanting illustrations, or sophisticated branding. The consistent purple tone, exemplified by `#D1B3FF` and `#BE99FF`, ensures a cohesive and tranquil visual experience, ideal for projects aiming for a gentle yet captivating aesthetic.

Best used for

Ethereal branding for beauty or wellness products
Fantasy-themed illustrations and digital art
Wedding invitations or event decor
Soft UI/UX designs for meditation apps
Children's book illustrations
Feminine fashion or lifestyle blogs

Suggested color roles

primary

Use `#9166FF` as the deepest, most grounding purple for significant elements or bold text, offering elegance and depth.

secondary

`#D1B3FF` serves as an excellent mid-tone for secondary sections, backgrounds, or larger UI components, maintaining softness.

accent

`#E6CCFF` can act as a delicate highlight or a very light background element, adding an airy, shimmery touch.

background

`#E6CCFF` or `#D1B3FF` are ideal for light, airy backgrounds, creating a soft and inviting canvas.

text

For main body text, a dark charcoal or black provides necessary contrast against the lighter purples. For headings, use `#9166FF`.

Accessibility notes

Most colors in this palette are light; ensure sufficient contrast by pairing them with dark text (e.g., black or charcoal).
Avoid using adjacent colors from the palette for text and background (e.g., `#E6CCFF` on `#D1B3FF`) as contrast will be low.
For interactive elements, use `#9166FF` against a lighter background like `#E6CCFF` to ensure visibility.
Consider larger font sizes or bolding for text, especially when using the lighter shades for elements that need to be easily read.

Recommended combinations

Soft Gradient

Perfect for subtle background gradients, hero sections, or layered UI elements that need a gentle transition.

#E6CCFF · #D1B3FF · #BE99FF

Elegant Contrast

Use the lightest purple for background, the darkest for headings or primary buttons, and the mid-tone for secondary details.

#E6CCFF · #9166FF · #BE99FF

Ethereal Depth

Suitable for illustrations or graphic elements where depth is created through subtle shifts from a medium to a deeper purple.

#D1B3FF · #A880FF · #9166FF

CSS variables

:root {
  --pixie-dream-shimmer-1: #E6CCFF;
  --pixie-dream-shimmer-2: #D1B3FF;
  --pixie-dream-shimmer-3: #BE99FF;
  --pixie-dream-shimmer-4: #A880FF;
  --pixie-dream-shimmer-5: #9166FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pixie-dream-shimmer": {
        1: "#E6CCFF",
        2: "#D1B3FF",
        3: "#BE99FF",
        4: "#A880FF",
        5: "#9166FF",
      }
    }
  }
}

Hex values

Color 1#E6CCFF

Color 2#D1B3FF

Color 3#BE99FF

Color 4#A880FF

Color 5#9166FF

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

2:1Fail

2.6:1Fail

1.2:1Fail

1.3:1Fail

1.6:1Fail

2.1:1Fail

1.6:1Fail

1.3:1Fail

1.7:1Fail

2:1Fail

1.6:1Fail

1.3:1Fail

2.6:1Fail

2.1:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Pixie Dream Shimmer

Pixie Dream Shimmer

See it in context.

Ready when you are.

Built with Pixie Dream Shimmer.

How to use Pixie Dream Shimmer

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Gradient

Elegant Contrast

Ethereal Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pixie Dream Shimmer