Palette

Starlight Cosmos

Deep, mysterious purples blend with soft lavenders to evoke the infinite wonder of a starlit cosmic expanse.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight Cosmos 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 Starlight Cosmos.

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

Data visualization

#2A0A4A#4F2E72#8C5DAE#BF95D6#E9DAF5

Palette guide

How to use Starlight Cosmos

Overview

The Starlight Cosmos palette masterfully blends deep, mysterious purples with soft, ethereal lavenders, perfect for evoking a sense of cosmic wonder and elegant sophistication. Anchored by the profound #2A0A4A, it transitions through the rich #4F2E72 and vibrant #8C5DAE, culminating in the delicate #BF95D6 and luminous #E9DAF5. This gradient of color is ideal for creating immersive digital experiences, luxurious branding, or captivating visual narratives that require depth and a touch of the sublime. Designers will find its versatility allows for striking contrasts and harmonious transitions, while developers can implement these shades to build interfaces with a dreamy, high-end aesthetic.

Best used for

Luxury brand websites and apps
Astrology or spiritual content design
High-end event invitations and decor
Dark mode UI themes for software
Creative digital art and illustrations
Fashion or beauty product branding

Suggested color roles

primary

Use #2A0A4A to establish a deep, mysterious foundation for backgrounds or dominant brand elements, conveying elegance and gravitas.

secondary

Apply #4F2E72 for subheadings, navigation elements, or secondary sections to add depth without overwhelming the primary color.

accent

Designate #8C5DAE for calls-to-action, interactive elements, or key visual highlights, providing a vibrant yet sophisticated pop.

background

Utilize #2A0A4A for an immersive, dark, and elegant backdrop. Alternatively, #E9DAF5 can serve as a very light, ethereal background for a different mood.

text

Employ #E9DAF5 for primary text on dark backgrounds like #2A0A4A or #4F2E72, ensuring readability with a soft glow. For a slightly bolder contrast, consider a near-white like #F5F5F5.

Accessibility notes

Ensure sufficient contrast between #2A0A4A or #4F2E72 backgrounds and lighter text colors like #E9DAF5 for WCAG AA compliance.
Avoid using mid-tone #8C5DAE for small text on similar background shades; pair it with very dark or very light contrasts for readability.
Check contrast ratios for all interactive elements, especially buttons using #BF95D6 or #8C5DAE against their chosen backgrounds.
Consider providing a high-contrast mode for users, potentially utilizing pure white text on the darkest purples for maximum readability.

Recommended combinations

Deep Night Sky

Perfect for a dark mode interface, with the deep purple as background, light lavender for primary text, and very light lavender for accents or highlights.

#2A0A4A · #BF95D6 · #E9DAF5

Cosmic Glow

Ideal for branding, where the dark purple serves as a sophisticated base, the mid-tone purple adds dimension, and the lightest shade provides luminous accents or iconography.

#4F2E72 · #8C5DAE · #E9DAF5

Ethereal Gradient

Useful for subtle UI gradients, data visualization, or layered design elements that require a smooth transition from deep to vibrant purple.

#2A0A4A · #4F2E72 · #8C5DAE

CSS variables

:root {
  --starlight-cosmos-1: #2A0A4A;
  --starlight-cosmos-2: #4F2E72;
  --starlight-cosmos-3: #8C5DAE;
  --starlight-cosmos-4: #BF95D6;
  --starlight-cosmos-5: #E9DAF5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-cosmos": {
        1: "#2A0A4A",
        2: "#4F2E72",
        3: "#8C5DAE",
        4: "#BF95D6",
        5: "#E9DAF5",
      }
    }
  }
}

Hex values

Color 1#2A0A4A

Color 2#4F2E72

Color 3#8C5DAE

Color 4#BF95D6

Color 5#E9DAF5

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

6.8:1AA

12.7:1AAA

1.6:1Fail

2.2:1Fail

4.3:1AA18

8:1AAA

3.5:1AA18

2.2:1Fail

2:1Fail

3.7:1AA18

6.8:1AA

4.3:1AA18

2:1Fail

1.9:1Fail

12.7:1AAA

8:1AAA

3.7:1AA18

1.9:1Fail

Similar palettes

More like Starlight Cosmos

View all dark

Celestial Dust Trail

Celestial Stardust Trails

Cosmic Stardust Haze

Galactic Starlight Veil

Midnight Celestial Bloom

Stardust Cloudscape