Palette

Aurora Borealis Dream

Ethereal greens and blues dance like the mystical aurora in a dark night sky, bringing a sense of wonder and cool light.

coolenergetic5 colors

More cool 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

#0F2027#2C5364#316E5A#6AAB9C#A1F7B4

Palette guide

How to use Aurora Borealis Dream

Overview

The "Aurora Borealis Dream" palette (ID: aurora-borealis-dream) is a cool and energetic collection of greens and blues, designed to evoke the mystical aurora dancing in a dark night sky. It ranges from a deep, grounding charcoal #0F2027 to a rich teal #2C5364, a vibrant forest green #316E5A, a luminous seafoam #6AAB9C, and a brilliant light green #A1F7B4. This palette is excellent for designers seeking to combine the tranquility of nature with an energetic, otherworldly glow. The harmonious blend of cool tones creates a refreshing and modern aesthetic, perfect for web interfaces, branding, or digital art that aims to be both captivating and serene. It offers a sense of wonder and cool light.

Best used for

Environmental non-profit websites
Outdoor adventure gear branding
Wellness and meditation platforms
Modern tech company interfaces
Nature-themed digital art
Sustainable product e-commerce

Suggested color roles

primary

#316E5A - A vibrant forest green, ideal for main interactive elements, key headings, or prominent sections to convey vitality and growth.

secondary

#2C5364 - A rich teal, excellent for supporting content, navigation backgrounds, or subheadings, adding depth and sophistication.

accent

#A1F7B4 - A brilliant light green, perfect for calls-to-action, hover states, or small decorative elements that need to pop with an energetic glow.

background

#0F2027 - A deep charcoal blue, providing a sophisticated and grounding foundation against which the lighter, glowing colors can truly shine.

text

#A1F7B4 - A light green that offers excellent readability on #0F2027 or #2C5364, or use a crisp white for general body text on the darkest backgrounds.

Accessibility notes

Ensure #A1F7B4 or #6AAB9C has sufficient contrast when used for text on #0F2027 or #2C5364 backgrounds.
#316E5A can be used for headings on #0F2027, but always verify contrast for smaller text.
Avoid using #2C5364 text directly on #316E5A, as the contrast might be insufficient.
For optimal readability, use a very light color (like #A1F7B4 or white) for body text on the darkest palette shades.

Recommended combinations

Deep Forest

Robust website footers, elegant dashboards, or nature-documentary branding.

#0F2027 · #2C5364 · #316E5A

Northern Glow

Vibrant hero sections, engaging infographics, or serene app interfaces.

#316E5A · #6AAB9C · #A1F7B4

Mystic Twilight

Dynamic gradient backgrounds, celestial-themed graphics, or impactful presentations.

#0F2027 · #316E5A · #A1F7B4

CSS variables

:root {
  --aurora-borealis-dream-1: #0F2027;
  --aurora-borealis-dream-2: #2C5364;
  --aurora-borealis-dream-3: #316E5A;
  --aurora-borealis-dream-4: #6AAB9C;
  --aurora-borealis-dream-5: #A1F7B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aurora-borealis-dream": {
        1: "#0F2027",
        2: "#2C5364",
        3: "#316E5A",
        4: "#6AAB9C",
        5: "#A1F7B4",
      }
    }
  }
}

Hex values

Color 1#0F2027

Color 2#2C5364

Color 3#316E5A

Color 4#6AAB9C

Color 5#A1F7B4

Accessibility

Contrast checker

2:1Fail

2.8:1Fail

6.3:1AA

13.1:1AAA

2:1Fail

1.4:1Fail

3.1:1AA18

6.5:1AA

2.8:1Fail

1.4:1Fail

2.3:1Fail

4.7:1AA

6.3:1AA

3.1:1AA18

2.3:1Fail

2.1:1Fail

13.1:1AAA

6.5:1AA

4.7:1AA

2.1:1Fail

Similar palettes

More like Aurora Borealis Dream