Blueprint color palette
Named for old architectural drawings, with Prussian blue #003153 as the paper and pale cyan #ADE8F4 as the lines. In between, cobalt #004E89, cerulean #0077B6 and a bright sky blue fill out a full ramp. Every shade is saturated, so even the darks have color. Engineering firms and construction tech products can use it straight away.
Blueprint palette in use
Use #003153 as a dark background with #ADE8F4 for text and line art. #48CAE4 works for buttons and links, and #004E89 and #0077B6 for cards and diagrams.
This pair measures 9.98:1, so it works for body text too. The button uses #0077B6 with white text.
ButtonGood for
- Engineering firm website
- Construction tech app
- STEM course materials
- Technical diagram style
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#003153 | #ADE8F4 | 9.98:1 | AAA |
#003153 | #48CAE4 | 6.93:1 | AA |
#004E89 | #ADE8F4 | 6.37:1 | AA |
#004E89 | #48CAE4 | 4.42:1 | AA large |
#0077B6 | #ADE8F4 | 3.62:1 | AA large |
Blueprint palette as code
CSS variables
:root {
--blueprint-1: #003153;
--blueprint-2: #004E89;
--blueprint-3: #0077B6;
--blueprint-4: #48CAE4;
--blueprint-5: #ADE8F4;
}Tailwind v4
@theme {
--color-blueprint-1: #003153;
--color-blueprint-2: #004E89;
--color-blueprint-3: #0077B6;
--color-blueprint-4: #48CAE4;
--color-blueprint-5: #ADE8F4;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'blueprint': {
100: '#003153',
200: '#004E89',
300: '#0077B6',
400: '#48CAE4',
500: '#ADE8F4',
},SCSS
$blueprint-1: #003153;
$blueprint-2: #004E89;
$blueprint-3: #0077B6;
$blueprint-4: #48CAE4;
$blueprint-5: #ADE8F4;JSON
["#003153","#004E89","#0077B6","#48CAE4","#ADE8F4"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.