Palette

Cosmic Violets

Deep, shimmering violets like starlight against a cosmic dark canvas, evoking mystery.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Violets 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 Cosmic Violets.

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

Data visualization

#4B0082#6A5ACD#8A2BE2#BA55D3#D8BFD8

Palette guide

How to use Cosmic Violets

Overview

The Cosmic Violets palette presents a luxurious and mystical collection of deep, shimmering violets, reminiscent of starlight against a dark cosmic canvas. It features the profound #4B0082 (Indigo), transitioning through the rich #6A5ACD (Slate Blue) and the vibrant #8A2BE2 (Blue Violet). Lighter, ethereal shades like #BA55D3 (Medium Orchid) and the luminous #D8BFD8 (Thistle) complete the spectrum, mimicking scattered starlight. This palette is ideal for designs that aim for elegance, mystery, and a touch of otherworldly allure, perfect for luxury branding, digital art, or sophisticated web applications.

Best used for

Luxury brand identity design
High-end fashion or beauty websites
Digital art and illustration of space phenomena
Event invitations for sophisticated gatherings
Dark-themed applications requiring a vibrant touch
Fantasy or mystical-themed design projects

Suggested color roles

primary

Use #4B0082 for dominant backgrounds, establishing a deep, mysterious foundation.

secondary

Apply #6A5ACD for supporting sections, navigation bars, or card elements to add depth.

accent

Leverage #BA55D3 or #8A2BE2 for impactful calls to action, interactive elements, or focal points, drawing the eye with brilliance.

background

The deepest purples, #4B0082 and #6A5ACD, are ideal for creating expansive dark canvases.

text

For general body text, use #D8BFD8 against the darker purples. For headings, use a pure white or #BA55D3.

Accessibility notes

Ensure #D8BFD8 text has sufficient contrast against #4B0082, #6A5ACD, and #8A2BE2 backgrounds.
The bright #BA55D3 should be tested for contrast when used as text on #D8BFD8, as they are both lighter tones.
Avoid using #8A2BE2 or #6A5ACD for small text on very similar background hues.
Provide alternative text descriptions or patterns for critical information conveyed solely by these purple hues for colorblind users.

Recommended combinations

Violet Depth

Creates a profound sense of depth for backgrounds with a soft, readable text color for content.

#4B0082 · #6A5ACD · #D8BFD8

Cosmic Shimmer

Highlights key features with vibrant purple accents against a darker base, ideal for gradients or layered effects.

#6A5ACD · #8A2BE2 · #BA55D3

Mystic Elegance

Ideal for dark UI elements, with a deep background, a vibrant middle purple for active states, and a bright accent.

#4B0082 · #BA55D3 · #D8BFD8

CSS variables

:root {
  --cosmic-violets-1: #4B0082;
  --cosmic-violets-2: #6A5ACD;
  --cosmic-violets-3: #8A2BE2;
  --cosmic-violets-4: #BA55D3;
  --cosmic-violets-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-violets": {
        1: "#4B0082",
        2: "#6A5ACD",
        3: "#8A2BE2",
        4: "#BA55D3",
        5: "#D8BFD8",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#6A5ACD

Color 3#8A2BE2

Color 4#BA55D3

Color 5#D8BFD8

Accessibility

Contrast checker

2.4:1Fail

2.2:1Fail

3.3:1AA18

7.6:1AAA

2.4:1Fail

1.1:1Fail

1.3:1Fail

3.1:1AA18

2.2:1Fail

1.1:1Fail

1.5:1Fail

3.5:1AA18

3.3:1AA18

1.3:1Fail

1.5:1Fail

2.3:1Fail

7.6:1AAA

3.1:1AA18

3.5:1AA18

2.3:1Fail

Similar palettes

More like Cosmic Violets

View all dark

Celestial Whisper Nebula

Cosmic Bloom

Ancient Geode Vein

Astral Dream Hues

Galactic Empress Gown

Galactic Starlight Veil