coolvibrantdark
Aurora Borealis Color Palette
Aurora Borealis is a cool, vibrant and dark color palette of 5 colors: Oxford Blue (#011627), Tiffany Blue (#2ec4b6), Cornflower Blue (#20a4f3), Wisteria (#b388eb) and Mauve (#f7aef8). Its dominant hue is blue.
The darkest color, Oxford Blue, on the lightest, Mauve, gives a 10.79:1 contrast ratio — enough for body text at WCAG AAA. 4 pairs in this palette pass AA for normal text. Cornflower Blue (#20a4f3) is its most saturated color and a natural choice for buttons and links.
Colors
- Oxford Blue
- Tiffany Blue
- Cornflower Blue
- Wisteria
- Mauve
CSS Output
:root {
--aurora-borealis-1: #011627;
--aurora-borealis-2: #2ec4b6;
--aurora-borealis-3: #20a4f3;
--aurora-borealis-4: #b388eb;
--aurora-borealis-5: #f7aef8;
}Aurora Borealis on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Oxford Blue on Mauve#011627 on #f7aef810.79:1AAA
- Oxford Blue on Tiffany Blue#011627 on #2ec4b68.45:1AAA
- Oxford Blue on Cornflower Blue#011627 on #20a4f36.69:1AA
- Oxford Blue on Wisteria#011627 on #b388eb6.66:1AA