Palette

Aurora Borealis Dream

A dazzling spectrum of greens, echoing the mystical dance of the northern lights.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aurora Borealis Dream 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 Aurora Borealis Dream.

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

Data visualization

#2C5F2D#4CAF50#8BC34A#C8E6C9#1B471C

Palette guide

How to use Aurora Borealis Dream

Overview

The "Aurora Borealis Dream" palette (ID: aurora-borealis-dream-3) is a dazzling spectrum of greens, echoing the mystical dance of the northern lights. This vibrant palette features a deep forest green #2C5F2D, a classic emerald #4CAF50, a bright lime green #8BC34A, a soft mint #C8E6C9, and an intense dark green #1B471C. It's an excellent choice for designers looking to infuse energy and a strong connection to nature into their projects. The range from rich, grounding greens to luminous, ethereal shades allows for dynamic visual compositions, perfect for branding, web design, or digital art that aims to be both sophisticated and lively. This palette excels in creating fresh, clean, and vibrant aesthetics.

Best used for

Eco-conscious brand identities
Outdoor lifestyle websites
Health and wellness applications
Nature-themed product packaging
Agricultural or sustainable farming businesses
Fresh food or beverage branding

Suggested color roles

primary

#4CAF50 - A vibrant emerald green, ideal for main brand elements, significant calls-to-action, or hero sections to convey growth and vitality.

secondary

#2C5F2D - A deep forest green, excellent for providing a stable foundation, navigation bars, or supporting text, adding depth and elegance.

accent

#8BC34A - A bright lime green, perfect for highlights, interactive states, or small details that need to pop with a fresh, energetic glow.

background

#C8E6C9 - A very light mint green, serving as an airy and clean canvas that allows the richer greens to stand out beautifully without feeling stark.

text

#1B471C - An intense dark green that offers excellent readability on lighter shades like #C8E6C9, or use a crisp white for text on the darkest backgrounds.

Accessibility notes

Ensure #8BC34A has sufficient contrast when used for text on #C8E6C9; aim for AA or AAA standards.
#1B471C provides strong contrast against #C8E6C9, making it suitable for primary text and headings.
Avoid using #4CAF50 text directly on #8BC34A, as the contrast might be insufficient for readability.
For small text on dark backgrounds like #2C5F2D, consider using #C8E6C9 or white for better legibility.

Recommended combinations

Forest Canopy

Earthy branding, deep nature scenes, or robust website footers.

#1B471C · #2C5F2D · #4CAF50

Luminous Glade

Fresh UI designs, vibrant infographics, or spring-themed marketing.

#C8E6C9 · #8BC34A · #4CAF50

Aurora Spark

Dynamic headers, celestial illustrations, or modern presentation slides.

#2C5F2D · #8BC34A · #C8E6C9

CSS variables

:root {
  --aurora-borealis-dream-3-1: #2C5F2D;
  --aurora-borealis-dream-3-2: #4CAF50;
  --aurora-borealis-dream-3-3: #8BC34A;
  --aurora-borealis-dream-3-4: #C8E6C9;
  --aurora-borealis-dream-3-5: #1B471C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aurora-borealis-dream-3": {
        1: "#2C5F2D",
        2: "#4CAF50",
        3: "#8BC34A",
        4: "#C8E6C9",
        5: "#1B471C",
      }
    }
  }
}

Hex values

Color 1#2C5F2D

Color 2#4CAF50

Color 3#8BC34A

Color 4#C8E6C9

Color 5#1B471C

Accessibility

Contrast checker

2.7:1Fail

3.6:1AA18

5.6:1AA

1.4:1Fail

2.7:1Fail

1.3:1Fail

2.1:1Fail

3.8:1AA18

3.6:1AA18

1.3:1Fail

1.6:1Fail

5.1:1AA

5.6:1AA

2.1:1Fail

1.6:1Fail

7.9:1AAA

1.4:1Fail

3.8:1AA18

5.1:1AA

7.9:1AAA

Similar palettes

More like Aurora Borealis Dream

View all vibrant

Emerald City Gleam

Northern Lights Dream