Back to palettes

Palette

Northern Lights Magic

A dazzling display of vivid greens and turquoises, capturing the magical dance of 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 Magic 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 Magic.

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

Data visualization

#20B2AA#48D1CC#00FA9A#7FFFD4#AFEEEE

Palette guide

How to use Northern Lights Magic

Overview

The Northern Lights Magic palette is an energetic and dazzling display of vivid greens and turquoises, capturing the magical dance of the aurora borealis. This refreshing collection features the vibrant #20B2AA (Light Sea Green) and the captivating #48D1CC (Medium Turquoise), complemented by the brilliant #00FA9A (Medium Spring Green). The lighter, ethereal tones of #7FFFD4 (Aquamarine) and #AFEEEE (Pale Turquoise) complete the set, offering a luminous range for designs. Designers and developers can use this palette to evoke a sense of wonder, freshness, and dynamic energy, perfect for projects that need a vibrant, celestial touch.

Best used for

  • Eco-friendly product branding
  • Wellness and beauty app interfaces
  • Creative agency websites
  • Children's book illustrations
  • Spring or summer event promotions
  • Digital art and animation projects

Suggested color roles

primary

Use #20B2AA (Light Sea Green) or #48D1CC (Medium Turquoise) for main sections, headers, or prominent graphical elements, establishing a fresh tone.

secondary

Apply #00FA9A (Medium Spring Green) for subheadings, secondary calls-to-action, or to add a vibrant pop of green.

accent

Deploy #7FFFD4 (Aquamarine) or #AFEEEE (Pale Turquoise) for highlights, interactive states, or subtle background textures.

background

The lighter shades like #AFEEEE or #7FFFD4 provide a clean, airy canvas, allowing darker greens to stand out.

text

For lighter backgrounds, a deep charcoal or black ensures optimal readability. For darker elements, use #AFEEEE or white for text.

Accessibility notes

  • Ensure sufficient contrast between the light turquoise shades and any text placed upon them (e.g., #AFEEEE with dark text).
  • Avoid using #7FFFD4 for small text on #AFEEEE, as contrast might be too low for accessibility.
  • Use a dark contrasting color like charcoal or black for body text on the lighter background colors.
  • The vibrancy of #00FA9A may require careful use for text; reserve it for larger headings or accents where contrast is clear.

Recommended combinations

Fresh Glow

Ideal for clean, modern designs, using a pale turquoise base with light sea green and medium spring green accents.

#AFEEEE · #20B2AA · #00FA9A

Vibrant Stream

Excellent for dynamic data visualizations or interactive infographics, creating a harmonious flow of turquoises.

#48D1CC · #7FFFD4 · #20B2AA

Magic Shimmer

Perfect for highlights and calls-to-action, combining the brightest green with a light background and a medium turquoise accent.

#00FA9A · #AFEEEE · #48D1CC

CSS variables

:root {
  --northern-lights-magic-1: #20B2AA;
  --northern-lights-magic-2: #48D1CC;
  --northern-lights-magic-3: #00FA9A;
  --northern-lights-magic-4: #7FFFD4;
  --northern-lights-magic-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-lights-magic": {
        1: "#20B2AA",
        2: "#48D1CC",
        3: "#00FA9A",
        4: "#7FFFD4",
        5: "#AFEEEE",
      }
    }
  }
}

Related searches

vibrant green turquoise palettemagical aurora color schemecelestial fresh designenergetic light green colorsaquamarine spring green combo

Palette colors

Hex values

Color 1#20B2AA
·
Color 2#48D1CC
·
Color 3#00FA9A
·
Color 4#7FFFD4
·
Color 5#AFEEEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
2.1:1Fail
2:1Fail
2
1.4:1Fail
1.3:1Fail
1.5:1Fail
1.4:1Fail
3
1.9:1Fail
1.3:1Fail
1.1:1Fail
1.1:1Fail
4
2.1:1Fail
1.5:1Fail
1.1:1Fail
1.1:1Fail
5
2:1Fail
1.4:1Fail
1.1:1Fail
1.1:1Fail

Similar palettes

More like Northern Lights Magic

View all vibrant
Aurora Sky Shimmer
Celestial Arctic Dance
Cosmic Aurora Shimmer
Northern Lights Dance
Northern Lights Shimmer
Spectral Sky Dance