Palette

Space Cadet Dreams

Deep purples fading into lighter tones, like distant nebulae in the vast expanse of space.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Space Cadet Dreams 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 Space Cadet Dreams.

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

Data visualization

#0E0A1F#3A2B5F#6D5C8A#A59AC0#DED7EC

Palette guide

How to use Space Cadet Dreams

Overview

The Space Cadet Dreams palette offers a celestial journey through deep purples and ethereal lavenders, perfect for creating an immersive, mystical atmosphere. Anchored by the profound #0E0A1F and enriched by the velvety #3A2B5F, it transitions smoothly through the contemplative #6D5C8A to the softer #A59AC0 and the illuminating #DED7EC. This gradient of color, reminiscent of distant nebulae, provides designers and developers with a sophisticated tool for projects requiring depth, elegance, and a touch of cosmic wonder. It's ideal for evoking luxury and introspection, allowing for both bold statements and subtle, dreamy effects.

Best used for

Luxury brand websites and apps
Sci-fi themed games or interfaces
Creative agency portfolios
Meditation or wellness platforms
Ethereal event branding
High-end fashion photography

Suggested color roles

primary

Use #0E0A1F as a deep, grounding primary for backgrounds or main structural elements, providing a vast, immersive feel.

secondary

Employ #3A2B5F for secondary sections, navigation, or larger text blocks, offering a rich, supportive depth.

accent

Apply #A59AC0 for subtle highlights, interactive elements, or iconography, drawing attention without being overpowering.

background

The deepest #0E0A1F or #3A2B5F creates a dramatic, cosmic background, while #DED7EC can serve as a light, airy canvas.

text

For optimal readability on dark backgrounds, use #DED7EC. For larger headings or accents on lighter backgrounds, a deep charcoal or near-black can work.

Accessibility notes

Ensure sufficient contrast between #0E0A1F or #3A2B5F and lighter text colors like #DED7EC for readability.
Avoid using #6D5C8A or #A59AC0 for small text on similarly mid-toned backgrounds due to potential low contrast.
When pairing #DED7EC with #A59AC0, check contrast ratios carefully, especially for essential information.
Use #0E0A1F as text on #DED7EC for the highest contrast and readability in body copy.

Recommended combinations

Deep Cosmos

Ideal for header sections or hero images, establishing a luxurious and profound visual identity with clear text.

#0E0A1F · #DED7EC · #3A2B5F

Nebula Glow

Excellent for secondary content blocks, testimonials, or subtle call-to-action buttons, offering a softer, inviting look.

#3A2B5F · #A59AC0 · #DED7EC

Celestial Outline

Perfect for UI elements, borders, or dividers, providing structure and a touch of mystical elegance.

#0E0A1F · #6D5C8A · #DED7EC

CSS variables

:root {
  --space-cadet-dreams-1: #0E0A1F;
  --space-cadet-dreams-2: #3A2B5F;
  --space-cadet-dreams-3: #6D5C8A;
  --space-cadet-dreams-4: #A59AC0;
  --space-cadet-dreams-5: #DED7EC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "space-cadet-dreams": {
        1: "#0E0A1F",
        2: "#3A2B5F",
        3: "#6D5C8A",
        4: "#A59AC0",
        5: "#DED7EC",
      }
    }
  }
}

Hex values

Color 1#0E0A1F

Color 2#3A2B5F

Color 3#6D5C8A

Color 4#A59AC0

Color 5#DED7EC

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

7.4:1AAA

13.9:1AAA

1.6:1Fail

2.1:1Fail

4.7:1AA

8.9:1AAA

3.3:1AA18

2.1:1Fail

2.3:1Fail

4.2:1AA18

7.4:1AAA

4.7:1AA

2.3:1Fail

1.9:1Fail

13.9:1AAA

8.9:1AAA

4.2:1AA18

1.9:1Fail

Similar palettes

More like Space Cadet Dreams

View all dark

Celestial Glimmer Dust

Cosmic Nebula Veil

Galactic Cloud Swirl

Galactic Dust Cloud

Galactic Nebula Swirl

Mystic Nebula Gaze