Palette

Stellar Cloud

A cosmic explosion of deep purples and vibrant pinks, depicting the ethereal beauty of a star-forming nebula.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#20B2AA#FF1493#8A2BE2#483D8B#000080

Palette guide

How to use Stellar Cloud

Overview

The Stellar Cloud palette explodes with cosmic energy, combining deep purples and vibrant pinks to depict the ethereal beauty of a star-forming nebula. This vivid collection features a striking medium aquamarine #20B2AA, a bold deep pink #FF1493, and rich purples like #8A2BE2 and #483D8B, anchored by a dark navy #000080. Designers can leverage these hex codes to create captivating digital art, immersive game interfaces, or dynamic branding that demands attention. Developers will find this palette ideal for crafting visually stunning web experiences, interactive dashboards, or applications that aim to convey creativity, mystery, and an energetic, otherworldly aesthetic.

Best used for

Sci-fi game interfaces
Creative agency branding
Digital art and illustration
Event promotion graphics
Music festival branding
Youth-oriented tech products

Suggested color roles

primary

#8A2BE2 - A vibrant blue-violet, excellent for primary brand elements or impactful headings.

secondary

#483D8B - A deep, rich indigo, suitable for backgrounds, secondary content, or subtle gradients.

accent

#FF1493 - A bold, vivid deep pink, perfect for calls-to-action, highlights, or energetic interactive elements.

background

#000080 - A very dark navy blue, providing a deep, cosmic canvas for vibrant elements to pop.

text

#20B2AA - A bright aquamarine that offers striking contrast on dark backgrounds, or use white text for general readability.

Accessibility notes

Exercise caution with combinations; many vibrant colors on dark backgrounds require careful contrast checking.
Ensure text using #20B2AA or white on #000080, #483D8B, or #8A2BE2 meets WCAG AA.
Avoid placing #FF1493 text on #8A2BE2 or #483D8B as contrast will be extremely poor.
Provide clear visual indicators for interactive elements beyond just color, such as underlines or icons.

Recommended combinations

Cosmic Depth

Creates a dramatic background with deep navy, a vibrant purple for content, and a bold pink for energetic accents.

#000080 · #8A2BE2 · #FF1493

Nebula Glow

Evokes a glowing nebula effect, using deep indigo as a base, with aquamarine and blue-violet for highlights and ethereal elements.

#483D8B · #20B2AA · #8A2BE2

Energetic Burst

A high-impact combination for calls-to-action or prominent features, with bright pink and aquamarine against a dark background.

#FF1493 · #20B2AA · #000080

CSS variables

:root {
  --stellar-cloud-1: #20B2AA;
  --stellar-cloud-2: #FF1493;
  --stellar-cloud-3: #8A2BE2;
  --stellar-cloud-4: #483D8B;
  --stellar-cloud-5: #000080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stellar-cloud": {
        1: "#20B2AA",
        2: "#FF1493",
        3: "#8A2BE2",
        4: "#483D8B",
        5: "#000080",
      }
    }
  }
}

Hex values

Color 1#20B2AA

Color 2#FF1493

Color 3#8A2BE2

Color 4#483D8B

Color 5#000080

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

3.5:1AA18

6.1:1AA

1.4:1Fail

1.6:1Fail

2.5:1Fail

4.4:1AA18

2.3:1Fail

1.6:1Fail

1.5:1Fail

2.7:1Fail

3.5:1AA18

2.5:1Fail

1.5:1Fail

1.8:1Fail

6.1:1AA

4.4:1AA18

2.7:1Fail

1.8:1Fail

Similar palettes

More like Stellar Cloud

View all vibrant

Celestial Nebula Hues

Cosmic Nebulae Dream

Galactic Bloom Sparkle

Nebula Dream Drift

Starlight Deep Nebula

Astral Nebula Bloom