Navy and White color palette
white · 0
Look at the cover of almost any business book, the dress shirts in a bank's annual report, or the homepage of a law firm, and this is the pairing you'll see. Navy #1B263B against white #FFFFFF is one of the most familiar combinations in print and screen design, which is exactly why it still gets used so heavily.
The two colors sit at opposite ends of the lightness scale. Navy is deep and slightly cool, with just enough blue to feel calmer than pure black. White carries no color at all. Their measured is 15.14 to 1, well past the AAA threshold for text, so body copy and fine type stay sharp at small sizes.
For branding, the pairing reads as steady and professional without feeling stiff. On posters it gives strong hierarchy with very little effort. On the web it's a safe default that won't fight your photography or accent colors. The midpoint between them is a plain cool gray (#848B98), useful for dividers and secondary text.
See Navy and White in use
better
Navy Tailwind scale (50-900)
White Tailwind scale (50-900)
Navy to White blend
A continuous interpolation from Navy to White, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Navy and White blend best in OKLab
The same two colors blended three ways. This site uses OKLab, which keeps the blend smooth and evenly lit. The other two are shown so you can see what to avoid: sRGB darkens and muddies the middle, and HSL detours through colors that are not in your palette.
Accessibility
Navy and White can be used together as text and background.
Contrast pairing grid
Rows are Navy steps, columns are White steps. Each mark is a Navy step shown on a White step: a check means it clears WCAG AA for text (4.5:1). If you can read the mark, the pairing is legible.
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |
|---|---|---|---|---|---|---|---|---|---|---|
| 50 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 100 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 200 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ |
| 300 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ |
| 400 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ |
| 500 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ |
| 600 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ |
| 700 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ |
| 800 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ |
| 900 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ |
✓ passes AA ✗ fails AA
Copy for Tailwind
Tailwind v4 — @theme (paste into your CSS)
@theme {
--color-navy-50: #EFF0F2;
--color-navy-100: #E0E2E5;
--color-navy-200: #C7CAD0;
--color-navy-300: #A5AAB4;
--color-navy-400: #78808E;
--color-navy-500: #1B263B;
--color-navy-600: #141D2E;
--color-navy-700: #0C1321;
--color-navy-800: #04070F;
--color-navy-900: #010103;
--color-white-50: #FFFFFF;
--color-white-100: #FFFFFF;
--color-white-200: #FFFFFF;
--color-white-300: #FFFFFF;
--color-white-400: #FFFFFF;
--color-white-500: #FFFFFF;
--color-white-600: #D1D1D1;
--color-white-700: #9E9E9E;
--color-white-800: #5D5D5D;
--color-white-900: #292929;
}
Tailwind v3 — tailwind.config.js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'navy': {
50: '#EFF0F2',
100: '#E0E2E5',
200: '#C7CAD0',
300: '#A5AAB4',
400: '#78808E',
500: '#1B263B',
600: '#141D2E',
700: '#0C1321',
800: '#04070F',
900: '#010103',
},
'white': {
50: '#FFFFFF',
100: '#FFFFFF',
200: '#FFFFFF',
300: '#FFFFFF',
400: '#FFFFFF',
500: '#FFFFFF',
600: '#D1D1D1',
700: '#9E9E9E',
800: '#5D5D5D',
900: '#292929',
},
},
},
},
};
CSS variables
:root {
--navy-50: #EFF0F2;
--navy-100: #E0E2E5;
--navy-200: #C7CAD0;
--navy-300: #A5AAB4;
--navy-400: #78808E;
--navy-500: #1B263B;
--navy-600: #141D2E;
--navy-700: #0C1321;
--navy-800: #04070F;
--navy-900: #010103;
--white-50: #FFFFFF;
--white-100: #FFFFFF;
--white-200: #FFFFFF;
--white-300: #FFFFFF;
--white-400: #FFFFFF;
--white-500: #FFFFFF;
--white-600: #D1D1D1;
--white-700: #9E9E9E;
--white-800: #5D5D5D;
--white-900: #292929;
}SCSS variables
$navy-50: #EFF0F2; $navy-100: #E0E2E5; $navy-200: #C7CAD0; $navy-300: #A5AAB4; $navy-400: #78808E; $navy-500: #1B263B; $navy-600: #141D2E; $navy-700: #0C1321; $navy-800: #04070F; $navy-900: #010103; $white-50: #FFFFFF; $white-100: #FFFFFF; $white-200: #FFFFFF; $white-300: #FFFFFF; $white-400: #FFFFFF; $white-500: #FFFFFF; $white-600: #D1D1D1; $white-700: #9E9E9E; $white-800: #5D5D5D; $white-900: #292929;
JSON tokens
{
"navy": {
"50": "#EFF0F2",
"100": "#E0E2E5",
"200": "#C7CAD0",
"300": "#A5AAB4",
"400": "#78808E",
"500": "#1B263B",
"600": "#141D2E",
"700": "#0C1321",
"800": "#04070F",
"900": "#010103"
},
"white": {
"50": "#FFFFFF",
"100": "#FFFFFF",
"200": "#FFFFFF",
"300": "#FFFFFF",
"400": "#FFFFFF",
"500": "#FFFFFF",
"600": "#D1D1D1",
"700": "#9E9E9E",
"800": "#5D5D5D",
"900": "#292929"
}
}How we name colors
There is no single official authority for naming colors. We use the common, widely recognized name as the primary label for each color (here, Navy and White); many common names are themselves W3C CSS named colors. For transparency we also show the nearest W3C CSS named color and the perceptual distance, ΔE, measured in OKLab. A small ΔE means the name is essentially exact; a larger one means it is the closest standard name rather than a perfect match.
Sources: W3C CSS Color Module Level 4 and the open color-name-list dataset, used to verify every color sits near a recognized name.