Palette

Cosmic Bloom

Deep violets and enchanting purples create a mystical, cosmic bloom.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B0082#8A2BE2#9400D3#BA55D3#E6E6FA

Palette guide

How to use Cosmic Bloom

Overview

The Cosmic Bloom palette presents a rich spectrum of deep violets and enchanting purples, from the intense #4B0082 to the soft #E6E6FA. This mystical and elegant collection, reminiscent of a celestial bloom, offers designers a sophisticated choice for projects requiring depth and allure. The strong contrasts between dark and light purples allow for dynamic visual hierarchies, while the consistent purple theme maintains cohesion. Developers can implement these hex codes to create striking websites, applications, or digital art that convey luxury, mystery, and a touch of the otherworldly, ensuring a memorable and aesthetically pleasing user experience across various digital platforms.

Best used for

High-end luxury brand identities
Mystical or fantasy-themed digital products
Elegant wedding or gala invitations
Sophisticated website design for creative agencies
Fashion and beauty editorial layouts
Abstract art installations or digital galleries

Suggested color roles

primary

Designate #4B0082 as the primary, a profound violet perfect for commanding headers, brand logos, or key calls-to-action.

secondary

Utilize #8A2BE2 as a vibrant secondary, excellent for subheadings, navigation elements, or significant UI components.

accent

Apply #BA55D3 as a delicate accent, ideal for interactive states, small icons, or subtle highlights that need to catch the eye.

background

The pristine #E6E6FA serves as an excellent light background, offering a clean canvas for the deeper purples to shine.

text

For optimal readability, use a dark charcoal or black on #E6E6FA. White text works beautifully on #4B0082 or #9400D3.

Accessibility notes

Ensure sufficient contrast for text, especially when using #8A2BE2 or #BA55D3 on backgrounds like #E6E6FA.
White text on #4B0082, #8A2BE2, and #9400D3 should meet WCAG AA standards for accessibility.
Avoid pairing #BA55D3 with #E6E6FA for small text elements due to potential low contrast issues.
For body text on light backgrounds, consider a darker shade like #4B0082 or #9400D3 over a standard black for brand cohesion.

Recommended combinations

Regal Depth

Combine the darkest shades with the lightest for a dramatic, regal look in headers, footers, or landing page designs.

#4B0082 · #9400D3 · #E6E6FA

Mystical Glow

Create a gradient or layered effect for backgrounds and illustrations, evoking a soft, mystical glow against a light base.

#8A2BE2 · #BA55D3 · #E6E6FA

Vivid Accent

Use #E6E6FA as the main background, #4B0082 for primary text, and #BA55D3 for interactive elements or important callouts.

#E6E6FA · #4B0082 · #BA55D3

CSS variables

:root {
  --cosmic-bloom-1: #4B0082;
  --cosmic-bloom-2: #8A2BE2;
  --cosmic-bloom-3: #9400D3;
  --cosmic-bloom-4: #BA55D3;
  --cosmic-bloom-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-bloom": {
        1: "#4B0082",
        2: "#8A2BE2",
        3: "#9400D3",
        4: "#BA55D3",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8A2BE2

Color 3#9400D3

Color 4#BA55D3

Color 5#E6E6FA

Accessibility

Contrast checker

2.2:1Fail

2:1Fail

3.3:1AA18

10.5:1AAA

2.2:1Fail

1.1:1Fail

1.5:1Fail

4.8:1AA

2:1Fail

1.1:1Fail

1.7:1Fail

5.3:1AA

3.3:1AA18

1.5:1Fail

1.7:1Fail

3.2:1AA18

10.5:1AAA

4.8:1AA

5.3:1AA

3.2:1AA18

Similar palettes

More like Cosmic Bloom

View all dark

Cosmic Violets

Amethyst Veil Mystique

Ancient Geode Vein

Baroque Velvet Plum

Blackberry Bramble Luxe

Celestial Whisper Nebula