Palette

Violet Spellweave Dusk

A vibrant, yet soft, collection of purples inspired by moonlit herbs and magical flowers.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A057F#822498#B07BE0#D3AEEB#EED7F7

Palette guide

How to use Violet Spellweave Dusk

Overview

The Violet Spellweave Dusk palette offers a mystical gradient of purples, perfect for evoking elegance and dreams. Anchored by deep #6A057F and softening to a delicate #EED7F7, this collection is ideal for designers seeking a sophisticated yet ethereal feel. Its middle tones, like #B07BE0 and #D3AEEB, provide excellent versatility for UI elements and illustrations. Developers will find these hex codes blend seamlessly for magical themes, luxury branding, or serene digital interfaces, ensuring a cohesive and enchanting user experience. This palette avoids harsh contrasts, promoting a gentle visual flow, making it excellent for graceful applications.

Best used for

Luxury brand identity and packaging
Fantasy game UI and character design
Beauty and cosmetic product websites
Event invitations and decor (weddings, galas)
Meditation or wellness app interfaces
Feminine fashion and accessory branding

Suggested color roles

primary

Use #6A057F for commanding headlines or primary calls-to-action, establishing a deep, luxurious anchor.

secondary

Employ #822498 for subheadings, navigation links, or secondary interactive elements, providing depth without overwhelming.

accent

Highlight key information or interactive states with #B07BE0, offering a vibrant yet harmonious pop.

background

Apply #EED7F7 as a soft, ethereal background, allowing darker elements to stand out gently.

text

For body text on light backgrounds, use a dark charcoal like #1A1A1A. For text on darker backgrounds, utilize #D3AEEB for readability.

Accessibility notes

Ensure sufficient contrast when pairing #6A057F with lighter shades like #D3AEEB or #EED7F7 for text.
Avoid using #D3AEEB or #EED7F7 for small text against similarly light backgrounds.
Check contrast ratios for interactive elements, especially between #822498 and its surrounding colors.
Consider using a pure white or near-white text on #6A057F for optimal readability in primary content.

Recommended combinations

Deep Enchantment

Ideal for elegant headers, sub-elements, and clean backgrounds in luxury designs.

#6A057F · #B07BE0 · #EED7F7

Mystic Highlight

Effective for main content, highlighted features, and strong accents on a dark base.

#822498 · #D3AEEB · #6A057F

Soft Dreamscape

Perfect for subtle gradients, decorative elements, and light, airy interfaces.

#EED7F7 · #D3AEEB · #B07BE0

CSS variables

:root {
  --violet-spellweave-dusk-1: #6A057F;
  --violet-spellweave-dusk-2: #822498;
  --violet-spellweave-dusk-3: #B07BE0;
  --violet-spellweave-dusk-4: #D3AEEB;
  --violet-spellweave-dusk-5: #EED7F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "violet-spellweave-dusk": {
        1: "#6A057F",
        2: "#822498",
        3: "#B07BE0",
        4: "#D3AEEB",
        5: "#EED7F7",
      }
    }
  }
}

Hex values

Color 1#6A057F

Color 2#822498

Color 3#B07BE0

Color 4#D3AEEB

Color 5#EED7F7

Accessibility

Contrast checker

1.4:1Fail

3.5:1AA18

5.7:1AA

8.1:1AAA

1.4:1Fail

2.5:1Fail

4.2:1AA18

5.9:1AA

3.5:1AA18

2.5:1Fail

1.6:1Fail

2.3:1Fail

5.7:1AA

4.2:1AA18

1.6:1Fail

1.4:1Fail

8.1:1AAA

5.9:1AA

2.3:1Fail

1.4:1Fail

Similar palettes

More like Violet Spellweave Dusk

Violet Spellweave Dusk

See it in context.

Ready when you are.

Built with Violet Spellweave Dusk.

How to use Violet Spellweave Dusk

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Enchantment

Mystic Highlight

Soft Dreamscape

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Violet Spellweave Dusk