Palette

Northern Lights Ethereal

Deep indigos and vibrant purples shimmer like the mystical dance of the aurora borealis.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Northern Lights Ethereal 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 Northern Lights Ethereal.

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

Data visualization

#0B0B3B#1C0F4A#3B1C6F#6A2D9D#A04FD6

Palette guide

How to use Northern Lights Ethereal

Overview

The Northern Lights Ethereal palette is a captivating blend of deep indigos and vibrant purples, perfectly capturing the mystical dance of the aurora borealis. This elegant collection starts with the profound #0B0B3B (Dark Midnight Blue) and transitions through #1C0F4A (Very Dark Purple) and #3B1C6F (Deep Indigo), culminating in the striking #6A2D9D (Medium Purple) and the luminous #A04FD6 (Light Purple). Designers and developers can leverage this gradient-rich palette to create sophisticated, deep, and visually immersive experiences, ideal for projects that aim for a sense of wonder, luxury, and cosmic elegance.

Best used for

Luxury tech or software branding
Space exploration themed websites
Abstract digital art and animations
High-end fashion or beauty product packaging
Elegant event branding and invitations
Dark mode interfaces for creative applications

Suggested color roles

primary

Use #0B0B3B (Dark Midnight Blue) or #1C0F4A (Very Dark Purple) as a dominant background to establish a deep, immersive feel.

secondary

Apply #3B1C6F (Deep Indigo) for navigation, content panels, or subheadings, providing a rich, supporting layer.

accent

Deploy #6A2D9D (Medium Purple) or #A04FD6 (Light Purple) for interactive elements, calls-to-action, or ethereal highlights.

background

The darker shades like #0B0B3B or #1C0F4A create a perfect canvas for glowing elements, enhancing depth.

text

For dark backgrounds, #A04FD6 offers good contrast for headings, while a crisp white or near-white is recommended for body text.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing mid-tones like #6A2D9D with darker purples.
White or a very light grey text on #0B0B3B and #1C0F4A will provide the best readability.
Avoid using #3B1C6F for small text on #1C0F4A backgrounds due to low contrast.
Consider using larger font sizes or bolder weights for text in #A04FD6 on slightly darker backgrounds like #6A2D9D.

Recommended combinations

Deep Cosmos

Ideal for hero sections or brand identity, creating a gradient from dark blue to light purple, evoking cosmic depth.

#0B0B3B · #3B1C6F · #A04FD6

Mystic Shimmer

Excellent for interactive elements or visualizers, where the purples shimmer against a very dark purple base.

#1C0F4A · #6A2D9D · #A04FD6

Elegant Gradient

Perfect for backgrounds or overlays that need a smooth, luxurious transition between deep indigo and medium purple.

#3B1C6F · #6A2D9D · #1C0F4A

CSS variables

:root {
  --northern-lights-ethereal-1: #0B0B3B;
  --northern-lights-ethereal-2: #1C0F4A;
  --northern-lights-ethereal-3: #3B1C6F;
  --northern-lights-ethereal-4: #6A2D9D;
  --northern-lights-ethereal-5: #A04FD6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-lights-ethereal": {
        1: "#0B0B3B",
        2: "#1C0F4A",
        3: "#3B1C6F",
        4: "#6A2D9D",
        5: "#A04FD6",
      }
    }
  }
}

Hex values

Color 1#0B0B3B

Color 2#1C0F4A

Color 3#3B1C6F

Color 4#6A2D9D

Color 5#A04FD6

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

2.2:1Fail

4.1:1AA18

1.1:1Fail

1.3:1Fail

2:1Fail

3.8:1AA18

1.4:1Fail

1.3:1Fail

1.6:1Fail

2.9:1Fail

2.2:1Fail

2:1Fail

1.6:1Fail

1.9:1Fail

4.1:1AA18

3.8:1AA18

2.9:1Fail

1.9:1Fail

Similar palettes

More like Northern Lights Ethereal

View all vibrant

Aurora Borealis Dream

Celestial Stardust Glaze