Palette

Nebula Dream Shards

A celestial mix of deep purples and blues, with soft pink accents, inspired by swirling cosmic dust.

vibrantdark5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B0082#8A2BE2#000080#00BFFF#FFC0CB

Palette guide

How to use Nebula Dream Shards

Overview

The Nebula Dream Shards palette is a celestial mix of deep purples and blues, with soft pink accents, inspired by swirling cosmic dust. Featuring the profound #4B0082, the vibrant #8A2BE2, the deep #000080, the bright #00BFFF, and the delicate #FFC0CB, this collection offers a vivid and ethereal feel. Designers can leverage the strong contrast between deep blues and bright purples for impactful visuals, while the soft pink provides a gentle, cosmic touch. Developers will find this palette excellent for creating dynamic user interfaces, vibrant digital art, or any project that aims for a sense of wonder and ethereal beauty. It's a versatile choice for a vivid yet mysterious aesthetic.

Best used for

Fantasy game environments
Creative portfolio websites
Children's book illustrations
Interactive art installations
Event branding (especially festivals)
Cosmic-themed product packaging

Suggested color roles

primary

Utilize #000080 as a deep, anchoring background, providing a vast and mysterious canvas.

secondary

Apply #4B0082 for major sections or sophisticated headers, adding depth and richness.

accent

Highlight interactive elements or key information with #FFC0CB for a soft, inviting pop.

background

The profound #000080 creates an immersive, dark background, ideal for showcasing vibrant content.

text

For dark backgrounds, use white or a very light gray. On lighter elements like #FFC0CB, black or charcoal is suitable.

Accessibility notes

White text on #000080, #4B0082, and #8A2BE2 provides excellent contrast and readability.
Ensure sufficient contrast when using #FFC0CB for text on #00BFFF; they may be too close in value.
Avoid using #00BFFF for small text on #8A2BE2 without careful contrast verification.
Consider darker text (e.g., charcoal) for #FFC0CB if used as a background for body copy.

Recommended combinations

Cosmic Gaze

Creates a deep, contrasting visual with a soft accent, great for hero sections or brand identity.

#000080 · #4B0082 · #FFC0CB

Dreamy Swirl

Generates a vibrant yet ethereal blend, perfect for dynamic backgrounds or artistic elements.

#8A2BE2 · #00BFFF · #FFC0CB

Deep Accents

Offers strong contrast with a delicate highlight, suitable for dashboards or interactive components.

#000080 · #00BFFF · #FFC0CB

CSS variables

:root {
  --nebula-dream-shards-1: #4B0082;
  --nebula-dream-shards-2: #8A2BE2;
  --nebula-dream-shards-3: #000080;
  --nebula-dream-shards-4: #00BFFF;
  --nebula-dream-shards-5: #FFC0CB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nebula-dream-shards": {
        1: "#4B0082",
        2: "#8A2BE2",
        3: "#000080",
        4: "#00BFFF",
        5: "#FFC0CB",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8A2BE2

Color 3#000080

Color 4#00BFFF

Color 5#FFC0CB

Accessibility

Contrast checker

2.2:1Fail

1.2:1Fail

6.1:1AA

8.4:1AAA

2.2:1Fail

2.7:1Fail

2.8:1Fail

3.9:1AA18

1.2:1Fail

2.7:1Fail

7.5:1AAA

10.4:1AAA

6.1:1AA

2.8:1Fail

7.5:1AAA

1.4:1Fail

8.4:1AAA

3.9:1AA18

10.4:1AAA

1.4:1Fail

Similar palettes

More like Nebula Dream Shards

View all vibrant

Celestial Nebula Glow

Cosmic Dust Shimmer

Cosmic Bloom Nebula

Cosmic Cloud Bloom

Galactic Nebula Bloom

Nebula Veil Glimmer