darkcool
Indigo Night Color Palette
Indigo Night is a dark and cool color palette of 5 colors: Black (#03001c), Midnight Blue (#301e67), Glaucous (#5b8fb9), Pale Turquoise (#b6eada) and White Smoke (#f3f3f3). Its dominant hue is blue.
The darkest color, Black, on the lightest, White Smoke, gives a 18.54:1 contrast ratio — enough for body text at WCAG AAA. 5 pairs in this palette pass AA for normal text. Midnight Blue (#301e67) is its most saturated color and a natural choice for buttons and links.
Colors
- Black
- Midnight Blue
- Glaucous
- Pale Turquoise
- White Smoke
CSS Output
:root {
--indigo-night-1: #03001c;
--indigo-night-2: #301e67;
--indigo-night-3: #5b8fb9;
--indigo-night-4: #b6eada;
--indigo-night-5: #f3f3f3;
}Indigo 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 White Smoke#03001c on #f3f3f318.54:1AAA
- Black on Pale Turquoise#03001c on #b6eada15.45:1AAA
- Midnight Blue on White Smoke#301e67 on #f3f3f312.55:1AAA
- Midnight Blue on Pale Turquoise#301e67 on #b6eada10.46:1AAA
- Black on Glaucous#03001c on #5b8fb95.95:1AA
- Midnight Blue on Glaucous#301e67 on #5b8fb94.03:1AA Large
- Glaucous on White Smoke#5b8fb9 on #f3f3f33.11:1AA Large