Aurora Borealis Color Psychology & Meaning
Aurora captures the impossible greens of the northern lights — luminous emeralds that pulse against Arctic darkness. Nature's most spectacular light show.
#0D1B2A
#1A936F
#88D498
#C6F0C2
Background
Primary Accent
Secondary
Body Text
Aurora Borealis
nightcoolearthy winterspring brandingweb
AAA
WCAG Grade
13.8:1
Contrast Ratio
3,421
Saves
9,023
AI Copies
Use #0D1B2A as the background. Use #1A936F as the primary accent. Use #88D498 as secondary. Use #C6F0C2 as body text/supporting color. Palette mood: Aurora Borealis — night, cool, earthy.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Aurora Borealis color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 1.0% | 13, 27, 42 | 69%, 36%, 0%, 84% | 211°, 53%, 11% | ||
| Primary Accent Luminance: 22.2% | 26, 147, 111 | 82%, 0%, 24%, 42% | 162°, 70%, 34% | ||
| Secondary Luminance: 54.6% | 136, 212, 152 | 36%, 0%, 28%, 17% | 133°, 47%, 68% | ||
| Body Text Luminance: 78.2% | 198, 240, 194 | 17%, 0%, 19%, 6% | 115°, 61%, 85% |
Color Harmony: Custom Scheme
The Aurora Borealis palette is built using a custom relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A custom palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
The Aurora Borealis occurs at 100km altitude when solar particles interact with atmospheric gases. Scandinavian and Inuit cultures have mythology around this phenomenon.
Best Design Use Cases
Deep midnight blue-black as base. Luminous greens as the star of the show. Light mint for text against dark. Never add warm colors.
Industries This Palette Suits
Travel, Scandinavian brands, science, environmental.
How to Implement the Aurora Borealis Color Scheme
To use this Aurora Borealis color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #0D1B2A for the main background and #1A936F for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #C6F0C2 and #0D1B2A is 13.79:1 (AAA). Ensure your body text remains legible.