Palette

Spectral Sky Dance

The breathtaking, dynamic dance of the aurora borealis, a spectacle of light in the night sky.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spectral Sky Dance 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 Spectral Sky Dance.

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

Data visualization

#3CB371#008080#8A2BE2#FF1493#0A1128

Palette guide

How to use Spectral Sky Dance

Overview

The Spectral Sky Dance palette captures the breathtaking energy of the aurora borealis, blending vibrant and deep hues for a truly dynamic visual experience. It features the lively #3CB371, the cool #008080, the majestic #8A2BE2, and the electrifying #FF1493, all grounded by the profound night sky of #0A1128. This palette offers designers and developers a powerful tool for creating high-impact, energetic, and mystical interfaces. The contrast between the deep navy and the vivid, almost neon-like colors allows for stunning visual hierarchies and an unforgettable user experience that truly dances with light.

Best used for

Event and concert branding
Gaming interfaces and streaming overlays
Futuristic technology websites
Creative portfolios and art galleries
Entertainment platforms
Digital art and animation

Suggested color roles

primary

Utilize #0A1128 as the primary background to provide a deep, grounding canvas for the vibrant aurora colors to truly pop.

secondary

Employ #008080 or #8A2BE2 for larger sections, banners, or interactive elements, creating a sense of ethereal movement.

accent

Apply #FF1493 or #3CB371 for crucial call-to-actions, highlights, or small icons, demanding immediate attention.

background

The deep #0A1128 is perfect for immersive, dark backgrounds, mimicking the night sky. For lighter elements, consider a subtle gradient.

text

For text on dark backgrounds, #3CB371, #8A2BE2, or #FF1493 can be used for headings. For body text, near-white ensures readability.

Accessibility notes

Ensure sufficient contrast when using vibrant colors like #FF1493 or #3CB371 for text on backgrounds like #0A1128.
Avoid using two vibrant colors (e.g., #3CB371 on #008080) for text-heavy areas due to potential readability issues.
Always test contrast ratios for small text against any background, especially with the purple #8A2BE2.
For critical information, use near-white text on #0A1128 for maximum accessibility.

Recommended combinations

Aurora Glow

Ideal for hero sections or prominent feature blocks, creating a dynamic and highly energetic focal point.

#0A1128 · #FF1493 · #3CB371

Mystic Shift

Excellent for navigation elements or section dividers, offering a smooth, mystical transition between colors.

#0A1128 · #8A2BE2 · #008080

Vibrant Night

Perfect for interactive elements or animated graphics, showcasing the palette's vibrant contrasts effectively.

#008080 · #FF1493 · #0A1128

CSS variables

:root {
  --spectral-sky-dance-1: #3CB371;
  --spectral-sky-dance-2: #008080;
  --spectral-sky-dance-3: #8A2BE2;
  --spectral-sky-dance-4: #FF1493;
  --spectral-sky-dance-5: #0A1128;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spectral-sky-dance": {
        1: "#3CB371",
        2: "#008080",
        3: "#8A2BE2",
        4: "#FF1493",
        5: "#0A1128",
      }
    }
  }
}

Hex values

Color 1#3CB371

Color 2#008080

Color 3#8A2BE2

Color 4#FF1493

Color 5#0A1128

Accessibility

Contrast checker

1.8:1Fail

2.2:1Fail

1.4:1Fail

7:1AAA

1.8:1Fail

1.2:1Fail

1.3:1Fail

3.9:1AA18

2.2:1Fail

1.2:1Fail

1.6:1Fail

3.1:1AA18

1.4:1Fail

1.3:1Fail

1.6:1Fail

5.1:1AA

7:1AAA

3.9:1AA18

3.1:1AA18

5.1:1AA

Similar palettes

More like Spectral Sky Dance

View all vibrant

Aurora Borealis Hues

Aurora Sky Shimmer

Celestial Aurora Hues

Celestial Veil Dance

Cosmic Aurora Shimmer

Northern Lights Dance