Back to palettes

Palette

Cosmic Vapour Trails

Shrouded purples and cosmic blues depict distant gas clouds swirling in the mysterious depths of space.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0A1E#2A1F45#4E3E73#7E6DA8#B8ADD9

Palette guide

How to use Cosmic Vapour Trails

Overview

The Cosmic Vapour Trails palette unveils the mysterious beauty of distant gas clouds, combining deep purples and cosmic blues. It features the profound #0F0A1E, transitioning through the rich #2A1F45 and the sophisticated #4E3E73. Lighter, ethereal shades like #7E6DA8 and the luminous #B8ADD9 complete the spectrum, mimicking swirling cosmic dust. This palette is ideal for designs that seek a sense of awe and mystery, perfect for sci-fi themes, digital art, or any project requiring an elegant yet enigmatic visual presence.

Best used for

  • Sci-fi game interfaces and concept art
  • Digital art and illustration of nebulae
  • Creative agency branding
  • Event promotions for futuristic themes
  • Dark mode applications with a mystical touch
  • Science fiction book covers

Suggested color roles

primary

Use #0F0A1E as the dominant background for a truly deep, immersive cosmic experience, ideal for large areas.

secondary

Apply #2A1F45 for secondary backgrounds, panels, or navigation, providing subtle structure.

accent

Utilize #B8ADD9 for highlighting key information, interactive elements, or a soft, ethereal glow.

background

The darker shades #0F0A1E and #2A1F45 create powerful, mysterious backdrops.

text

For body text, use #B8ADD9 or #7E6DA8 against the darker backgrounds. For headings, a crisp white works well.

Accessibility notes

  • Ensure #B8ADD9 and #7E6DA8 provide sufficient contrast when used as text on #0F0A1E, #2A1F45, and #4E3E73 backgrounds.
  • Avoid using #4E3E73 text on #2A1F45 backgrounds for small text, as contrast might be low.
  • When using these purples for data visualization, ensure distinct enough shades for colorblind users.
  • Consider providing a pure white text option for maximum legibility on the darkest backgrounds.

Recommended combinations

Nebula UI

Creates an immersive dark mode UI with a profound background, a slightly lighter panel, and a clear, readable text color.

#0F0A1E · #2A1F45 · #B8ADD9

Vapour Accent

Ideal for layered elements, offering depth with a soft purple accent for interactive components or icons.

#2A1F45 · #4E3E73 · #7E6DA8

Mystic Gradient

Perfect for subtle background gradients or visual storytelling, moving from deep space to ethereal mist.

#0F0A1E · #4E3E73 · #B8ADD9

CSS variables

:root {
  --cosmic-vapour-trails-1: #0F0A1E;
  --cosmic-vapour-trails-2: #2A1F45;
  --cosmic-vapour-trails-3: #4E3E73;
  --cosmic-vapour-trails-4: #7E6DA8;
  --cosmic-vapour-trails-5: #B8ADD9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-vapour-trails": {
        1: "#0F0A1E",
        2: "#2A1F45",
        3: "#4E3E73",
        4: "#7E6DA8",
        5: "#B8ADD9",
      }
    }
  }
}

Related searches

dark purple space palettecosmic nebula colorsmysterious purple ui designethereal dark brandingscience fiction color scheme

Palette colors

Hex values

Color 1#0F0A1E
·
Color 2#2A1F45
·
Color 3#4E3E73
·
Color 4#7E6DA8
·
Color 5#B8ADD9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.1:1Fail
4.3:1AA18
9.3:1AAA
2
1.3:1Fail
1.6:1Fail
3.4:1AA18
7.3:1AAA
3
2.1:1Fail
1.6:1Fail
2.1:1Fail
4.4:1AA18
4
4.3:1AA18
3.4:1AA18
2.1:1Fail
2.2:1Fail
5
9.3:1AAA
7.3:1AAA
4.4:1AA18
2.2:1Fail

Similar palettes

More like Cosmic Vapour Trails

View all dark
Deep Space Nebula
Nebula Cloud Drift
Astral Dust Whisper
Celestial Dust Swirl
Celestial Shimmer Glow
Cosmic Dreamscape Dust