Back to palettes

Palette

Northern Lights Shimmer

A spectacular display of vibrant greens, blues, and oranges mimicking the northern lights.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00BFFF#00FF7F#ADFF2F#FFFF00#FF4500

Palette guide

How to use Northern Lights Shimmer

Overview

The Northern Lights Shimmer palette is a spectacular display of vibrant greens, blues, and oranges, mimicking the dynamic and energetic northern lights. This high-energy collection features the dazzling #00BFFF (Deep Sky Blue) and the lively #00FF7F (Spring Green), alongside the invigorating #ADFF2F (Green Yellow). It introduces the bright intensity of #FFFF00 (Yellow) and the fiery #FF4500 (Orange Red), creating a truly vibrant and unforgettable visual experience. Designers and developers can leverage this palette to craft highly engaging, cheerful, and visually striking digital products that demand attention and convey excitement.

Best used for

  • Youth-oriented brand campaigns
  • Interactive game interfaces
  • Energetic event or festival branding
  • Creative digital advertisements
  • Music streaming platform visuals
  • Adventure travel website designs

Suggested color roles

primary

Use #00BFFF (Deep Sky Blue) or #00FF7F (Spring Green) for prominent headers, main graphical elements, or large background sections to establish vibrancy.

secondary

Apply #ADFF2F (Green Yellow) for subheadings, secondary buttons, or to introduce a fresh, zesty layer of color.

accent

Deploy #FFFF00 (Yellow) or #FF4500 (Orange Red) for calls-to-action, alerts, or striking highlights that need to pop.

background

Darker colors are absent here; consider using #00BFFF as a vibrant background with contrasting text, or a very light neutral if not from the palette.

text

On any of these vibrant colors, a stark black or deep charcoal is essential for readability. White can work on #00BFFF and #00FF7F.

Accessibility notes

  • Crucially, ensure sufficient contrast for text, especially when pairing similar value colors like #FFFF00 and #ADFF2F.
  • Always use a dark, high-contrast color like black for body text on any of these bright backgrounds.
  • Avoid using #FF4500 on #FFFF00 for text or small elements due to low contrast and potential for eye strain.
  • Consider larger font sizes and bolding for important text to enhance readability across the vibrant spectrum.

Recommended combinations

Vivid Burst

Ideal for calls-to-action or banners, creating an energetic and attention-grabbing focal point with bright blue, yellow, and orange-red.

#00BFFF · #FFFF00 · #FF4500

Aurora Spark

Excellent for dynamic infographics or playful illustrations, blending various greens with a refreshing deep sky blue.

#00FF7F · #ADFF2F · #00BFFF

Energetic Flare

Perfect for warnings or urgent notifications, combining high-contrast yellow and orange-red with a vibrant green accent.

#FFFF00 · #00FF7F · #FF4500

CSS variables

:root {
  --northern-lights-shimmer-1: #00BFFF;
  --northern-lights-shimmer-2: #00FF7F;
  --northern-lights-shimmer-3: #ADFF2F;
  --northern-lights-shimmer-4: #FFFF00;
  --northern-lights-shimmer-5: #FF4500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-lights-shimmer": {
        1: "#00BFFF",
        2: "#00FF7F",
        3: "#ADFF2F",
        4: "#FFFF00",
        5: "#FF4500",
      }
    }
  }
}

Related searches

vibrant green blue orange paletteenergetic aurora color schemebright northern lights colorsyellow orange green designdeep sky blue spring green

Palette colors

Hex values

Color 1#00BFFF
·
Color 2#00FF7F
·
Color 3#ADFF2F
·
Color 4#FFFF00
·
Color 5#FF4500
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.7:1Fail
2:1Fail
1.6:1Fail
2
1.6:1Fail
1.1:1Fail
1.3:1Fail
2.6:1Fail
3
1.7:1Fail
1.1:1Fail
1.1:1Fail
2.8:1Fail
4
2:1Fail
1.3:1Fail
1.1:1Fail
3.2:1AA18
5
1.6:1Fail
2.6:1Fail
2.8:1Fail
3.2:1AA18

Similar palettes

More like Northern Lights Shimmer

View all vibrant
Aurora Borealis
Aurora Borealis Dance
Dragonfly Wing Iridescence
Lagoon Paradise Sun
Meadow Bloom Burst
Northern Lights Magic