Palette

Interstellar Cloud Bloom

A wondrous display of deep purples and shimmering lilacs found in distant stellar nurseries.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Interstellar Cloud Bloom 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 Interstellar Cloud Bloom.

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

Data visualization

#2C1A3F#4B2E6A#6D4DA1#967BD0#BFABF5

Palette guide

How to use Interstellar Cloud Bloom

Overview

The Interstellar Cloud Bloom palette presents a wondrous display of deep purples and shimmering lilacs, akin to distant stellar nurseries. This enchanting collection transitions from the profound #2C1A3F to the ethereal #BFABF5, with captivating mid-tones like #6D4DA1. It's an exquisite tool for designers and developers crafting projects that evoke cosmic wonder, luxury, or a sense of magic and mystery. Utilize these sophisticated purples to build immersive sci-fi interfaces, fantasy branding, or any design that benefits from an elegant, otherworldly aesthetic, ensuring a truly captivating visual journey.

Best used for

Sci-fi game interfaces and environments
Fantasy branding and mystical themes
Luxury product packaging and design
Creative portfolios and artistic websites
Mystic-themed apps and digital experiences
Space exploration and astronomy visuals

Suggested color roles

primary

#2C1A3F serves as a deep, cosmic base for backgrounds, navigation, or primary container elements, providing gravitas.

secondary

#4B2E6A is ideal for main content blocks, darker elements on lighter purples, or supporting UI components, adding depth.

accent

#967BD0 provides glowing interactive elements, subtle highlights, or calls to action, drawing ethereal attention.

background

#2C1A3F creates an immersive dark, cosmic background, perfect for setting a mysterious and sophisticated mood.

text

#BFABF5 provides light, ethereal text on dark backgrounds like #2C1A3F or #4B2E6A, ensuring readability and elegance.

Accessibility notes

Ensure #BFABF5 or #967BD0 text on #2C1A3F or #4B2E6A provides sufficient contrast (WCAG AA).
Avoid using #6D4DA1 for body text on #967BD0 due to low contrast, hindering readability.
Pure white text can be used for optimal readability on the darkest purples for critical information.
Larger font sizes can help improve readability when using lighter purples on darker ones within the palette.

Recommended combinations

Cosmic Depth

Create deep, layered purples for immersive backgrounds or complex UI elements, suggesting vastness.

#2C1A3F · #4B2E6A · #6D4DA1

Nebula Glow

Mid-tone base with shimmering, lighter accents for glowing effects, highlights, or ethereal elements.

#4B2E6A · #967BD0 · #BFABF5

Starry Contrast

Dark background, bright text/highlights, and a supporting mid-tone for clear hierarchy and visual appeal.

#2C1A3F · #BFABF5 · #6D4DA1

CSS variables

:root {
  --interstellar-cloud-bloom-1: #2C1A3F;
  --interstellar-cloud-bloom-2: #4B2E6A;
  --interstellar-cloud-bloom-3: #6D4DA1;
  --interstellar-cloud-bloom-4: #967BD0;
  --interstellar-cloud-bloom-5: #BFABF5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "interstellar-cloud-bloom": {
        1: "#2C1A3F",
        2: "#4B2E6A",
        3: "#6D4DA1",
        4: "#967BD0",
        5: "#BFABF5",
      }
    }
  }
}

Hex values

Color 1#2C1A3F

Color 2#4B2E6A

Color 3#6D4DA1

Color 4#967BD0

Color 5#BFABF5

Accessibility

Contrast checker

1.4:1Fail

2.4:1Fail

4.6:1AA

7.8:1AAA

1.4:1Fail

1.7:1Fail

3.2:1AA18

5.5:1AA

2.4:1Fail

1.7:1Fail

1.9:1Fail

3.2:1AA18

4.6:1AA

3.2:1AA18

1.9:1Fail

1.7:1Fail

7.8:1AAA

5.5:1AA

3.2:1AA18

1.7:1Fail

Similar palettes

More like Interstellar Cloud Bloom

Interstellar Cloud Bloom

See it in context.

Ready when you are.

Built with Interstellar Cloud Bloom.

How to use Interstellar Cloud Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cosmic Depth

Nebula Glow

Starry Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Interstellar Cloud Bloom