Back to palettes

Palette

Northern Lights Aura

Deep greens and mysterious dark tones that mimic the vibrant yet elusive glow of the Northern Lights.

darkenergetic5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000F08#00361C#005F36#00875C#00AE87

Palette guide

How to use Northern Lights Aura

Overview

The Northern Lights Aura palette captures the vibrant yet elusive glow of the aurora borealis with deep greens and mysterious dark tones. This energetic and captivating collection is ideal for designers and developers seeking to create an immersive, mystical, and visually dynamic aesthetic. It ranges from the profound #000F08 and #00361C to the luminous #00AE87, with #005F36 and #00875C providing rich mid-tones. This palette is highly effective for projects that require a sense of awe, mystery, and natural wonder, making it perfect for dark mode interfaces, gaming, or content that benefits from a dramatic and enchanting visual presence. It evokes the magic of a celestial display.

Best used for

  • Gaming interfaces and immersive digital experiences
  • Sci-fi media branding and concept art
  • Environmental technology and sustainable energy websites
  • Dark mode UI designs for sophisticated applications
  • Night photography and astrophotography websites
  • Mystical or spiritual event promotions

Suggested color roles

primary

Use #005F36 as a vibrant, glowing green primary for key interactive elements, headers, or significant visual components.

secondary

Employ #00361C for supporting elements, subheadings, or secondary calls to action, providing a deeper, harmonious green.

accent

Reserve #00AE87 for bright, energetic highlights, critical notifications, or eye-catching calls to action, leveraging its luminosity.

background

Utilize #000F08 as the primary background, establishing a dark, immersive, and mysterious canvas that allows the greens to truly glow.

text

For optimal readability on dark backgrounds, use #00AE87 or a crisp white for body text and headings. For lighter text on darker elements, #00875C can work for larger titles.

Accessibility notes

  • Ensure #00AE87 or pure white on #000F08 provides excellent contrast for all text, meeting WCAG AAA standards.
  • Verify that #00875C on #00361C maintains sufficient contrast for larger text, but avoid for small text due to potential WCAG AA failures.
  • Avoid using #000F08 as text on other dark greens; it will lack contrast and be unreadable.
  • Interactive elements should have clearly defined hover and focus states, possibly using #00AE87 for a bright, clear indicator.

Recommended combinations

Deep Aurora

A deep background (#000F08) with a vibrant accent (#00AE87) for text or icons, supported by #005F36 for secondary information.

#000F08 · #00AE87 · #005F36

Vibrant Glow

Ideal for gradient effects or layered elements, where #005F36 transitions to #00875C, with #00361C providing depth.

#005F36 · #00875C · #00361C

Night Sky

Combines a deep green (#00361C) with a luminous highlight (#00AE87) and the darkest shade (#000F08) for dramatic contrast.

#00361C · #00AE87 · #000F08

CSS variables

:root {
  --northern-lights-aura-1: #000F08;
  --northern-lights-aura-2: #00361C;
  --northern-lights-aura-3: #005F36;
  --northern-lights-aura-4: #00875C;
  --northern-lights-aura-5: #00AE87;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-lights-aura": {
        1: "#000F08",
        2: "#00361C",
        3: "#005F36",
        4: "#00875C",
        5: "#00AE87",
      }
    }
  }
}

Related searches

northern lights green palettedark mode aurora colorsmystical green UI designspace themed color schemevibrant dark green branding

Palette colors

Hex values

Color 1#000F08
·
Color 2#00361C
·
Color 3#005F36
·
Color 4#00875C
·
Color 5#00AE87
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.5:1Fail
4.3:1AA18
6.9:1AA
2
1.4:1Fail
1.7:1Fail
3:1Fail
4.8:1AA
3
2.5:1Fail
1.7:1Fail
1.7:1Fail
2.8:1Fail
4
4.3:1AA18
3:1Fail
1.7:1Fail
1.6:1Fail
5
6.9:1AA
4.8:1AA
2.8:1Fail
1.6:1Fail

Similar palettes

More like Northern Lights Aura

View all dark
Carnival Midnight Sky
Cyberpunk Cityscape
Cyberpunk Metropolis
Digital Synthwave Haze
Midnight City Glare
Molten Core