Palette

Nebula Cloud

Hues of deep violet and ethereal blue swirl together, mirroring the distant beauty of cosmic dust clouds.

CoolElegant5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B0082#8A2BE2#BA55D3#DDA0DD#ADD8E6

Palette guide

How to use Nebula Cloud

Overview

The Nebula Cloud palette captures the distant beauty of cosmic dust clouds with its harmonious blend of deep violets and ethereal blues. Featuring the profound #4B0082, the vibrant #8A2BE2, and the softer #BA55D3, it transitions to the delicate #DDA0DD and the serene #ADD8E6. This palette is perfectly suited for designs that aim to be both elegant and mystical, offering a sense of calm and wonder. Designers can use the darker purples for grounding elements and the lighter blues for airy, expansive feels. Developers will find this palette excellent for creating sophisticated interfaces, especially in applications related to space, technology, or refined aesthetics.

Best used for

Tech startup branding
Educational astronomy websites
Elegant mobile app themes
Digital art portfolios
Fashion and beauty branding
High-tech product showcases

Suggested color roles

primary

Utilize #4B0082 for main navigation or hero backgrounds, setting a deep, sophisticated tone.

secondary

Apply #8A2BE2 to key sections or interactive components, providing a vibrant yet refined contrast.

accent

Highlight calls to action or important details with #BA55D3, ensuring a soft, inviting pop.

background

A medium tone like #ADD8E6 can serve as a light, airy background, while #4B0082 offers a darker alternative.

text

For dark backgrounds, use white or a light gray. For light backgrounds like #ADD8E6, a dark charcoal or black is recommended.

Accessibility notes

White text on #4B0082 or #8A2BE2 offers excellent readability for primary content.
Be cautious when using #DDA0DD for text on #BA55D3; ensure sufficient contrast for accessibility.
For #ADD8E6 as a background, ensure text color (e.g., black or dark gray) meets WCAG AA standards.
Avoid using light purples like #DDA0DD for small font sizes on similar-value backgrounds.

Recommended combinations

Deep Space

Creates a balanced, deep-to-light visual, great for headers or infographic elements.

#4B0082 · #8A2BE2 · #ADD8E6

Mystic Haze

Generates a soft, ethereal look, perfect for subtle backgrounds or delicate illustrations.

#BA55D3 · #DDA0DD · #ADD8E6

Cosmic Flow

Combines depth with airy lightness, suitable for elegant branding or clean UI designs.

#4B0082 · #BA55D3 · #ADD8E6

CSS variables

:root {
  --nebula-cloud-1: #4B0082;
  --nebula-cloud-2: #8A2BE2;
  --nebula-cloud-3: #BA55D3;
  --nebula-cloud-4: #DDA0DD;
  --nebula-cloud-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nebula-cloud": {
        1: "#4B0082",
        2: "#8A2BE2",
        3: "#BA55D3",
        4: "#DDA0DD",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8A2BE2

Color 3#BA55D3

Color 4#DDA0DD

Color 5#ADD8E6

Accessibility

Contrast checker

2.2:1Fail

3.3:1AA18

6.3:1AA

8.5:1AAA

2.2:1Fail

1.5:1Fail

2.9:1Fail

3.9:1AA18

3.3:1AA18

1.5:1Fail

1.9:1Fail

2.6:1Fail

6.3:1AA

2.9:1Fail

1.9:1Fail

1.4:1Fail

8.5:1AAA

3.9:1AA18

2.6:1Fail

1.4:1Fail

Similar palettes

More like Nebula Cloud