Palette

Winter Aurora Hues

Captures the breathtaking, dancing lights of the aurora borealis against a cold, winter night sky.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Aurora Hues 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 Winter Aurora Hues.

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

Data visualization

#008B8B#FF00FF#191970#ADD8E6#F8F8FF

Palette guide

How to use Winter Aurora Hues

Overview

The Winter Aurora Hues palette captures the breathtaking, dancing lights of the aurora borealis against a cold, winter night sky. This dramatic and ethereal collection features deep indigo (#191970), vibrant teal (#008B8B), and striking magenta (#FF00FF), balanced by icy light blue (#ADD8E6) and a near-white frost (#F8F8FF). Ideal for designers and developers seeking to evoke a sense of wonder, this palette offers high contrast and luminous accents. Its cool, vibrant tones are perfect for creating immersive digital experiences, dramatic branding, or captivating visual narratives, allowing for both bold statements and subtle, glowing effects in your projects.

Best used for

Dramatic digital art and illustrations
Immersive event branding and promotions
High-energy gaming UI/UX design
Ethereal fashion and beauty campaigns
Abstract and experimental graphic design
Night sky themed web backgrounds

Suggested color roles

primary

Use #191970 as a deep, anchoring night sky background or for substantial blocks of content, providing a strong foundation.

secondary

Apply #008B8B for prominent elements, interactive states, or as a vibrant secondary background, reminiscent of the aurora's glow.

accent

Deploy #FF00FF sparingly for impactful calls-to-action, key highlights, or decorative flourishes to add a dramatic, electric pop.

background

Utilize #F8F8FF or #ADD8E6 as a clean, ethereal canvas, allowing the vibrant colors to truly stand out with a frosty appearance.

text

For optimal legibility on light backgrounds, use a deep charcoal or #191970. On darker backgrounds, white or #F8F8FF ensures clarity.

Accessibility notes

Ensure sufficient contrast when using #ADD8E6 for text against #F8F8FF; use darker colors for readability.
Avoid placing #FF00FF directly on #008B8B for small text due to potential low contrast for some users.
Use #191970 or black text on light backgrounds (#ADD8E6, #F8F8FF) to meet WCAG AA standards.
Test color combinations for large headings and buttons, as vibrant accents might require larger text sizes for legibility.

Recommended combinations

Deep Night Glow

Creates a dramatic, high-contrast effect perfect for headers, navigation, or hero sections, mimicking the aurora against the night.

#191970 · #008B8B · #F8F8FF

Ethereal Accent

A light, airy base with vibrant pops, ideal for highlighting interactive elements or adding a playful, energetic touch.

#ADD8E6 · #FF00FF · #008B8B

Subtle Depth

Offers a serene, elegant feel for backgrounds and body text, with the deep indigo providing grounding contrast.

#F8F8FF · #ADD8E6 · #191970

CSS variables

:root {
  --winter-aurora-hues-1: #008B8B;
  --winter-aurora-hues-2: #FF00FF;
  --winter-aurora-hues-3: #191970;
  --winter-aurora-hues-4: #ADD8E6;
  --winter-aurora-hues-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-aurora-hues": {
        1: "#008B8B",
        2: "#FF00FF",
        3: "#191970",
        4: "#ADD8E6",
        5: "#F8F8FF",
      }
    }
  }
}

Hex values

Color 1#008B8B

Color 2#FF00FF

Color 3#191970

Color 4#ADD8E6

Color 5#F8F8FF

Accessibility

Contrast checker

1.3:1Fail

3.6:1AA18

2.7:1Fail

3.9:1AA18

1.3:1Fail

4.7:1AA

2.1:1Fail

3:1Fail

3.6:1AA18

4.7:1AA

9.7:1AAA

14:1AAA

2.7:1Fail

2.1:1Fail

9.7:1AAA

1.4:1Fail

3.9:1AA18

3:1Fail

14:1AAA

1.4:1Fail

Similar palettes

More like Winter Aurora Hues