cooldarkmonochrome
Blueprint Color Palette
Blueprint is a cool, dark and monochrome color palette of 5 colors: Oxford Blue (#0d1b2a), Space Cadet (#1b263b), Payne's Grey (#415a77), Light Slate Gray (#778da9) and Platinum (#e0e1dd). Its dominant hue is blue.
The darkest color, Oxford Blue, on the lightest, Platinum, gives a 13.23:1 contrast ratio — enough for body text at WCAG AAA. 4 pairs in this palette pass AA for normal text. Payne's Grey (#415a77) is its most saturated color and a natural choice for buttons and links.
Colors
- Oxford Blue
- Space Cadet
- Payne's Grey
- Light Slate Gray
- Platinum
CSS Output
:root {
--blueprint-1: #0d1b2a;
--blueprint-2: #1b263b;
--blueprint-3: #415a77;
--blueprint-4: #778da9;
--blueprint-5: #e0e1dd;
}Blueprint 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 Platinum#0d1b2a on #e0e1dd13.23:1AAA
- Space Cadet on Platinum#1b263b on #e0e1dd11.52:1AAA
- Payne's Grey on Platinum#415a77 on #e0e1dd5.41:1AA
- Oxford Blue on Light Slate Gray#0d1b2a on #778da95.10:1AA
- Space Cadet on Light Slate Gray#1b263b on #778da94.44:1AA Large