Aurora Borealis Color Palette
Northern lights over a dark sky: electric green, teal, violet, and magenta glowing against deep navy-black. Luminous and otherworldly, built so the colors read as light against night. For aurora and night-sky scenes, glowing effects, and cosmic illustration.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--aurora-borealis-1: #0C1426;
--aurora-borealis-2: #0A1120;
--aurora-borealis-3: #080E1A;
--aurora-borealis-4: #060B14;
--aurora-borealis-5: #04080E;
--aurora-borealis-6: #030509;
--aurora-borealis-7: #3FE0A0;
--aurora-borealis-8: #33D096;
--aurora-borealis-9: #2ABF8C;
--aurora-borealis-10: #22AD80;
--aurora-borealis-11: #1B9A72;
--aurora-borealis-12: #158864;
--aurora-borealis-13: #2EC6D0;
--aurora-borealis-14: #27B2C2;
--aurora-borealis-15: #209EB2;
--aurora-borealis-16: #1A8AA0;
--aurora-borealis-17: #15768C;
--aurora-borealis-18: #106278;
--aurora-borealis-19: #7A5CD0;
--aurora-borealis-20: #6B4CC2;
--aurora-borealis-21: #5D3EB2;
--aurora-borealis-22: #4F31A0;
--aurora-borealis-23: #42268E;
--aurora-borealis-24: #361D78;
--aurora-borealis-25: #C45CC0;
--aurora-borealis-26: #B24CB0;
--aurora-borealis-27: #A03D9E;
--aurora-borealis-28: #8E308C;
--aurora-borealis-29: #7C2578;
--aurora-borealis-30: #6A1C64;
}SCSS
$aurora-borealis-1: #0C1426;
$aurora-borealis-2: #0A1120;
$aurora-borealis-3: #080E1A;
$aurora-borealis-4: #060B14;
$aurora-borealis-5: #04080E;
$aurora-borealis-6: #030509;
$aurora-borealis-7: #3FE0A0;
$aurora-borealis-8: #33D096;
$aurora-borealis-9: #2ABF8C;
$aurora-borealis-10: #22AD80;
$aurora-borealis-11: #1B9A72;
$aurora-borealis-12: #158864;
$aurora-borealis-13: #2EC6D0;
$aurora-borealis-14: #27B2C2;
$aurora-borealis-15: #209EB2;
$aurora-borealis-16: #1A8AA0;
$aurora-borealis-17: #15768C;
$aurora-borealis-18: #106278;
$aurora-borealis-19: #7A5CD0;
$aurora-borealis-20: #6B4CC2;
$aurora-borealis-21: #5D3EB2;
$aurora-borealis-22: #4F31A0;
$aurora-borealis-23: #42268E;
$aurora-borealis-24: #361D78;
$aurora-borealis-25: #C45CC0;
$aurora-borealis-26: #B24CB0;
$aurora-borealis-27: #A03D9E;
$aurora-borealis-28: #8E308C;
$aurora-borealis-29: #7C2578;
$aurora-borealis-30: #6A1C64;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'aurora-borealis': {
'1': '#0C1426',
'2': '#0A1120',
'3': '#080E1A',
'4': '#060B14',
'5': '#04080E',
'6': '#030509',
'7': '#3FE0A0',
'8': '#33D096',
'9': '#2ABF8C',
'10': '#22AD80',
'11': '#1B9A72',
'12': '#158864',
'13': '#2EC6D0',
'14': '#27B2C2',
'15': '#209EB2',
'16': '#1A8AA0',
'17': '#15768C',
'18': '#106278',
'19': '#7A5CD0',
'20': '#6B4CC2',
'21': '#5D3EB2',
'22': '#4F31A0',
'23': '#42268E',
'24': '#361D78',
'25': '#C45CC0',
'26': '#B24CB0',
'27': '#A03D9E',
'28': '#8E308C',
'29': '#7C2578',
'30': '#6A1C64',
},
},
},
},
};JSON
{
"name": "Aurora Borealis",
"colors": [
"#0C1426",
"#0A1120",
"#080E1A",
"#060B14",
"#04080E",
"#030509",
"#3FE0A0",
"#33D096",
"#2ABF8C",
"#22AD80",
"#1B9A72",
"#158864",
"#2EC6D0",
"#27B2C2",
"#209EB2",
"#1A8AA0",
"#15768C",
"#106278",
"#7A5CD0",
"#6B4CC2",
"#5D3EB2",
"#4F31A0",
"#42268E",
"#361D78",
"#C45CC0",
"#B24CB0",
"#A03D9E",
"#8E308C",
"#7C2578",
"#6A1C64"
]
}Hex list
#0C1426
#0A1120
#080E1A
#060B14
#04080E
#030509
#3FE0A0
#33D096
#2ABF8C
#22AD80
#1B9A72
#158864
#2EC6D0
#27B2C2
#209EB2
#1A8AA0
#15768C
#106278
#7A5CD0
#6B4CC2
#5D3EB2
#4F31A0
#42268E
#361D78
#C45CC0
#B24CB0
#A03D9E
#8E308C
#7C2578
#6A1C64