Aurora color palette
The northern lights in five colors: electric cyan #00C9FF, glowing mint #92FE9D, lavender #A18CD1, cotton pink #FBC2EB and a soft peach. They blend into gradients better than they work as flat blocks, and all of them are light to mid in value. Set them on a deep night background for drama or on white for something softer. Wellness app onboarding screens and festival posters are good places to start.
Aurora palette in use
Blend #00C9FF, #92FE9D and #FBC2EB into a hero gradient behind dark navy text. #A18CD1 suits buttons with dark labels and #FEA58C badges, with white or near-black as the base.
This pair measures 16.88:1, so it works for body text too. The button uses #00C9FF with black text.
ButtonGood for
- Gradient hero section
- Wellness app onboarding
- Music festival poster
- Creator brand kit
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Aurora palette as code
CSS variables
:root {
--aurora-1: #00C9FF;
--aurora-2: #92FE9D;
--aurora-3: #A18CD1;
--aurora-4: #FBC2EB;
--aurora-5: #FEA58C;
}Tailwind v4
@theme {
--color-aurora-1: #00C9FF;
--color-aurora-2: #92FE9D;
--color-aurora-3: #A18CD1;
--color-aurora-4: #FBC2EB;
--color-aurora-5: #FEA58C;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'aurora': {
100: '#00C9FF',
200: '#92FE9D',
300: '#A18CD1',
400: '#FBC2EB',
500: '#FEA58C',
},SCSS
$aurora-1: #00C9FF;
$aurora-2: #92FE9D;
$aurora-3: #A18CD1;
$aurora-4: #FBC2EB;
$aurora-5: #FEA58C;JSON
["#00C9FF","#92FE9D","#A18CD1","#FBC2EB","#FEA58C"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.