Palette

Violet Reverie

Vibrant and deep violets blend with lighter, dreamy purples, evoking a magical and imaginative mood.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9400D3#BF00FF#DA70D6#EE82EE#DDA0DD

Palette guide

How to use Violet Reverie

Overview

The Violet Reverie palette is a vibrant and imaginative collection that blends deep violets with lighter, dreamy purples, evoking a magical and playful mood. Featuring the powerful #9400D3, the bright #BF00FF, and the whimsical #EE82EE, this palette is perfect for designs seeking to inspire creativity and fantasy. It's an excellent choice for designers aiming to capture a sense of wonder, energy, and artistic expression. The dynamic range of shades allows for creating visually striking and memorable experiences, making it ideal for branding, digital interfaces, or print materials that demand a bold, imaginative, and spirited aesthetic.

Best used for

Creative agencies and art studios
Children's entertainment and toy brands
Fantasy game marketing and websites
Vibrant tech products and apps
Unique fashion lines and accessories
Imaginative event branding and promotions

Suggested color roles

primary

#9400D3 - A deep, powerful violet that provides a strong, magical foundation for backgrounds, headers, or significant brand elements.

secondary

#BF00FF - A bright, energetic fuchsia-purple perfect for supporting content blocks, sub-sections, or distinct UI components, adding vibrancy.

accent

#EE82EE - A playful, light magenta that serves as a captivating highlight for interactive elements, calls-to-action, or decorative details.

background

#DDA0DD - A soft, dreamy light purple that provides an inviting and ethereal background for content areas.

text

On darker shades like #9400D3 and #BF00FF, use white or a very light cream for optimal readability. For #DDA0DD, #9400D3 or a deep charcoal provides excellent contrast.

Accessibility notes

Ensure high contrast for text: White or light cream text on #9400D3 and #BF00FF is crucial for readability.
Be mindful of contrast between mid-tones: Text or UI elements in #DA70D6 may lack sufficient contrast on backgrounds like #EE82EE.
Check WCAG AA/AAA compliance for critical interactive elements, especially when using vibrant accents on lighter backgrounds.
Avoid using small body text in #DA70D6 against backgrounds that are too close in luminance, such as #DDA0DD.

Recommended combinations

Dreamy Pop

Ideal for a bold, imaginative design, using the deepest violet as a background, the playful magenta for headings, and the soft light purple for body text or subtle accents.

#9400D3 · #EE82EE · #DDA0DD

Fantasy Glow

Great for vibrant content sections or cards, where the bright fuchsia acts as a base, complemented by the softer mid-purple for text, and the deep violet for strong accents or links.

#BF00FF · #DA70D6 · #9400D3

Playful Magic

Effective for creating a light, whimsical interface, with the soft light purple as the background, the bright fuchsia for prominent text or icons, and the playful magenta for interactive elements.

#DDA0DD · #BF00FF · #EE82EE

CSS variables

:root {
  --violet-reverie-1: #9400D3;
  --violet-reverie-2: #BF00FF;
  --violet-reverie-3: #DA70D6;
  --violet-reverie-4: #EE82EE;
  --violet-reverie-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "violet-reverie": {
        1: "#9400D3",
        2: "#BF00FF",
        3: "#DA70D6",
        4: "#EE82EE",
        5: "#DDA0DD",
      }
    }
  }
}

Hex values

Color 1#9400D3

Color 2#BF00FF

Color 3#DA70D6

Color 4#EE82EE

Color 5#DDA0DD

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

2.8:1Fail

3.2:1AA18

1.5:1Fail

1.6:1Fail

1.9:1Fail

2.2:1Fail

2.3:1Fail

1.6:1Fail

1.2:1Fail

1.4:1Fail

2.8:1Fail

1.9:1Fail

1.2:1Fail

1.1:1Fail

3.2:1AA18

2.2:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Violet Reverie

View all vibrant

Bohemian Sky Weave

Enchanted Forest Glow