Aurora Borealis Color Psychology & Meaning
Aurora borealis is photons made visible — the specific greens and purples of charged particles colliding with atmosphere, one of the few natural phenomena that looks artificial.
#030818
#00C896
#7B2FBE
#00AAFF
Background
Primary Accent
Secondary
Body Text
Aurora Borealis
richbeautifulpremium all brandingluxury
AAA
WCAG Grade
7.8:1
Contrast Ratio
2,200
Saves
5,900
AI Copies
Use #030818 as background. Use #00C896 as primary accent. Use #7B2FBE as secondary. Use #00AAFF as body text.
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: 0.3% | 3, 8, 24 | 88%, 67%, 0%, 91% | 226°, 78%, 5% | ||
| Primary Accent Luminance: 43.5% | 0, 200, 150 | 100%, 0%, 25%, 22% | 165°, 100%, 39% | ||
| Secondary Luminance: 10.0% | 123, 47, 190 | 35%, 75%, 0%, 25% | 272°, 60%, 46% | ||
| Body Text Luminance: 36.0% | 0, 170, 255 | 100%, 33%, 0%, 0% | 200°, 100%, 50% |
Color Harmony: Triadic Scheme
The Aurora Borealis palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
The aurora borealis (northern lights) has been recorded in art and mythology since antiquity. Its palette has been adopted by space, tech, and Nordic brands as a signal of natural wonder.
Best Design Use Cases
Very dark near-black for backgrounds. Electric green for primary. Purple for secondary. Bright blue for tertiary. Gradients between all three.
Industries This Palette Suits
Space brands, Nordic tourism, tech brands, science communication.
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 #030818 for the main background and #00C896 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #00AAFF and #030818 is 7.79:1 (AAA). Ensure your body text remains legible.