Palette

Cosmic Cloud Veil

Deep, atmospheric purples transitioning to soft, misty lavenders, like nebulae in deep space.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F0B3A#4E1B5A#7B2F8F#C87ED4#E9C6F0

Palette guide

How to use Cosmic Cloud Veil

Overview

The Cosmic Cloud Veil palette guides designers through a spectrum of deep, atmospheric purples transitioning to soft, misty lavenders, including #2F0B3A, #7B2F8F, and #E9C6F0. This collection beautifully evokes nebulae in deep space, offering a mysterious yet ethereal aesthetic. Designers can leverage the strong contrast between dark and light tones to create compelling visual narratives, perfect for conveying depth and subtle wonder. Developers will find these hex codes ideal for crafting immersive digital experiences, from sophisticated dark mode interfaces to elegant website themes, ensuring a visually rich and engaging user journey across various digital platforms with a touch of cosmic mystery.

Best used for

Luxury dark mode UI/UX design
Mystical or fantasy game interfaces
High-end event or brand identity
Digital art with deep space themes
E-commerce for unique artisanal products
Fashion editorial layouts with an elegant edge

Suggested color roles

primary

Designate #2F0B3A as a profound primary, ideal for main backgrounds, commanding headers, or foundational brand elements.

secondary

Utilize #4E1B5A as a rich secondary, excellent for subheadings, navigation, or larger background sections to add depth.

accent

Apply #7B2F8F as a vibrant accent, perfect for interactive elements, icons, or highlights that need to draw attention.

background

The deep #2F0B3A provides an immersive dark canvas. Alternatively, #E9C6F0 can serve as a delicate, ethereal background.

text

White or a very light gray provides excellent contrast on #2F0B3A and #4E1B5A. Use #2F0B3A for text on #E9C6F0.

Accessibility notes

Ensure white text on #2F0B3A, #4E1B5A, and #7B2F8F meets WCAG AA contrast standards for readability.
Avoid pairing #C87ED4 and #E9C6F0 for small text due to their close values and potential low contrast.
The lighter shades like #C87ED4 and #E9C6F0 work well for larger graphic elements or subtle background textures.
For body text on #E9C6F0, consider using #2F0B3A or #4E1B5A for better legibility than a standard black.

Recommended combinations

Deep Veil

Combine the darkest shades for a profound background with the lightest for striking text or key UI elements.

#2F0B3A · #4E1B5A · #E9C6F0

Misty Transition

Create smooth gradients or layered effects in UI design, mimicking the atmospheric transition of nebulae.

#4E1B5A · #7B2F8F · #C87ED4

Ethereal Accent

Use #E9C6F0 as a light background, #2F0B3A for primary text, and #7B2F8F for vibrant accents or interactive elements.

#E9C6F0 · #2F0B3A · #7B2F8F

CSS variables

:root {
  --cosmic-cloud-veil-1: #2F0B3A;
  --cosmic-cloud-veil-2: #4E1B5A;
  --cosmic-cloud-veil-3: #7B2F8F;
  --cosmic-cloud-veil-4: #C87ED4;
  --cosmic-cloud-veil-5: #E9C6F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-cloud-veil": {
        1: "#2F0B3A",
        2: "#4E1B5A",
        3: "#7B2F8F",
        4: "#C87ED4",
        5: "#E9C6F0",
      }
    }
  }
}

Hex values

Color 1#2F0B3A

Color 2#4E1B5A

Color 3#7B2F8F

Color 4#C87ED4

Color 5#E9C6F0

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

6:1AA

11.2:1AAA

1.3:1Fail

1.6:1Fail

4.5:1AA

8.5:1AAA

2.2:1Fail

1.6:1Fail

2.8:1Fail

5.2:1AA