Technical Values
Exact numeric values for cross-tool conversion, token mapping, and accessibility review.
CSS Named Color Reference
Navy
Navy·#000080
Navy is the classic CSS named dark blue at #000080. It is denser, more formal, and more structural than Royal Blue or Steel Blue, which makes it useful when you need a trustworthy anchor color for headers, sidebars, enterprise navigation, and deep interface framing.
Recommended text colorWhite text
Body text pairing16.01:1
Strongest RoleDark product chrome, navigation, and high-trust interface structure
Tonal Direction
Scan the ramp from light to dark to judge how Navy behaves across action states, layered surfaces, and supporting accents.
100#D1D1E8
300#8A8AC5
500#2E2E97
600#000080
800#00005C
Contrast & Interface Preview
Not every foreground and background pairing behaves the same. Use these checks to decide when white text, dark text, or the color itself should take the lead.
White text on this color
Best for reversed buttons, tabs, badges, and filled action surfaces.
16.01:1AAA-level contrast
Dark text on this color
Works for larger headings and selective UI blocks, but not for dense body copy.
1.07:1Needs more separation
This color on light surface
Use this pairing when Navy becomes the link, icon, border, or emphasis color on very light surfaces.
15.21:1AAA-level contrast
Recommended text colorWhite text
White text reaches 16.01:1 against Navy, which is strong enough for body text and standard action surfaces.
Where This Color Works
- Use Navy when you need a deep anchor blue for headers, side navigation, enterprise shells, data-heavy layouts, and serious product framing.
- It is darker and more structural than Steel Blue or Royal Blue, which makes it stronger for chrome and hierarchy, but less suitable for large amounts of small dark-on-dark interface text.
- Pair it with white, silver or slate neutrals, and one brighter supporting blue if you want the system to feel trustworthy without becoming visually flat.
Reference Context
Color Notes
Navy is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product, interface, and branding work.
Hue Family
Trust-building blues for enterprise and SaaS.
Source Library
CSS Named Colors
Related Blues
Palette Starting Points
Implementation Snippets
Reference-ready snippets for CSS variables, utility-first styling, and token exports.
:root {
--color-navy: #000080;
--color-navy-rgb: 0 0 128;
}Drop into a global token file or CSS variable layer.
class="bg-[#000080] text-white"
class="hover:bg-[#00005C] ring-1 ring-[#000080]"Direct utility usage for a fast prototype or content block.
{
"navy": "#000080",
"navyRgb": [0, 0, 128],
"navyHsl": [240, 100, 25]
}Useful for design token exports and API-driven theme objects.
Move This Color Into the Workflow
Carry Navy into conversion, brand palette generation, and palette exploration workflows to test how it behaves across interface scenarios.