darkcoolbrand-like
Polar Night Color Palette
Polar Night is a dark, cool and brand-ready color palette of 5 colors: Black (#05070b), Oxford Blue (#111827), Gunmetal (#1f2937), Medium Slate Blue (#6366f1) and Light Steel Blue (#a5b4fc). Its dominant hue is blue.
The darkest color, Black, on the lightest, Light Steel Blue, gives a 10.11:1 contrast ratio — enough for body text at WCAG AAA. 4 pairs in this palette pass AA for normal text. Medium Slate Blue (#6366f1) is its most saturated color and a natural choice for buttons and links.
Colors
- Black
- Oxford Blue
- Gunmetal
- Medium Slate Blue
- Light Steel Blue
CSS Output
:root {
--polar-night-1: #05070b;
--polar-night-2: #111827;
--polar-night-3: #1f2937;
--polar-night-4: #6366f1;
--polar-night-5: #a5b4fc;
}Polar Night 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.
- Black on Light Steel Blue#05070b on #a5b4fc10.11:1AAA
- Oxford Blue on Light Steel Blue#111827 on #a5b4fc8.89:1AAA
- Gunmetal on Light Steel Blue#1f2937 on #a5b4fc7.36:1AAA
- Black on Medium Slate Blue#05070b on #6366f14.51:1AA
- Oxford Blue on Medium Slate Blue#111827 on #6366f13.97:1AA Large
- Gunmetal on Medium Slate Blue#1f2937 on #6366f13.28:1AA Large