Palette

Midnight Star Trail

A mysterious journey through the dark expanse of space, illuminated by distant starlight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Star Trail 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 Midnight Star Trail.

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

Data visualization

#0B0A0C#2E0F45#5A2A82#945BBE#D8BDDE

Palette guide

How to use Midnight Star Trail

Overview

The Midnight Star Trail palette offers a captivating journey through deep purples and a profound charcoal base, evoking the mystery and elegance of a starlit cosmic expanse. Grounded by #0B0A0C, it features the rich #2E0F45, the vibrant #5A2A82, and the ethereal #945BBE, culminating in the soft luminosity of #D8BDDE. This collection is perfect for designers and developers aiming for a luxurious, mystical, or creatively expressive aesthetic. Its harmonious blend of dark and light purples ensures a sophisticated feel, suitable for high-end branding, artistic projects, and engaging digital experiences.

Best used for

Luxury branding and packaging
Creative portfolios and art websites
Mystic or spiritual themed designs
Fashion and beauty industry branding
Event invitations (weddings, galas)
Digital art and illustration

Suggested color roles

primary

Utilize #0B0A0C as the foundational dark background, creating a deep and mysterious base for your design.

secondary

Employ #2E0F45 for main content blocks, navigation, or secondary headings, adding depth without harshness.

accent

Reserve #D8BDDE for delicate highlights, calls-to-action, or subtle graphic elements to provide soft contrast and elegance.

background

The deep #0B0A0C offers an excellent, profound background, while #2E0F45 can be used for section backgrounds.

text

For primary body text on dark backgrounds, #D8BDDE ensures excellent readability. For headings, #945BBE provides a rich, elegant choice.

Accessibility notes

Ensure #D8BDDE text on #0B0A0C or #2E0F45 meets WCAG AA contrast standards for body text.
Be cautious using #945BBE on #5A2A82 for small text, as the contrast might be borderline.
For larger headlines, #5A2A82 on #0B0A0C can be effective, but always verify readability.
If using lighter backgrounds, pair with a dark text color like #0B0A0C or #2E0F45.

Recommended combinations

Cosmic Depth

Ideal for overall website themes, providing a strong dark base with a vibrant mid-purple and a luminous accent.

#0B0A0C · #2E0F45 · #D8BDDE

Purple Aura

Perfect for creating subtle gradients or layered effects in UI, offering a sophisticated purple progression.

#2E0F45 · #5A2A82 · #945BBE

Starlight

Use for prominent feature blocks or callout boxes, where the light accent stands out against the deep background.

#0B0A0C · #D8BDDE · #5A2A82

CSS variables

:root {
  --midnight-star-trail-1: #0B0A0C;
  --midnight-star-trail-2: #2E0F45;
  --midnight-star-trail-3: #5A2A82;
  --midnight-star-trail-4: #945BBE;
  --midnight-star-trail-5: #D8BDDE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-star-trail": {
        1: "#0B0A0C",
        2: "#2E0F45",
        3: "#5A2A82",
        4: "#945BBE",
        5: "#D8BDDE",
      }
    }
  }
}

Hex values

Color 1#0B0A0C

Color 2#2E0F45

Color 3#5A2A82

Color 4#945BBE

Color 5#D8BDDE

Accessibility

Contrast checker

1.2:1Fail

2:1Fail

4.2:1AA18

11.5:1AAA

1.2:1Fail

1.6:1Fail

3.5:1AA18

9.6:1AAA

2:1Fail

1.6:1Fail

2.2:1Fail

5.9:1AA

4.2:1AA18

3.5:1AA18

2.2:1Fail

2.7:1Fail

11.5:1AAA

9.6:1AAA

5.9:1AA

2.7:1Fail

Similar palettes

More like Midnight Star Trail

View all dark

Cosmic Starlight Gaze

Galactic Nebula Swirl