Shades of Navy

What this tool does

You chose navy because it looks expensive without trying. It is the colour of a good suit, a serious logo, a header that means business. But navy is already dark, so the moment you need a slightly lighter one for a hover state, or a deeper one that is almost black for shadow and depth, mixing it by eye gets fiddly fast.

That is what this does. You give it a navy, and it builds the whole range of that navy for you, from a soft, dusty version up top to a near-black at the bottom, in even steps. Each one comes with its HEX, RGB, HSL, and HSV codes, ready to paste in. There is also a reference of the named dark blues, like midnight and Prussian, further down.

How to use it

1. Set your navy. The tool opens on a navy and shows its Hex. Use Change Color or the Color Picker to set your own, or paste the exact hex of the navy you already use.
2. Pick the number of steps. The Color Shades number controls how many to generate, ten by default. More steps give you a finer run between light and dark.
3. Take the codes. Every step lists its HEX, RGB, HSL, and HSV values, so you can grab whichever your project needs.

Because navy sits so close to black already, the most useful steps are usually the lighter ones, the slate and dusty blues you would struggle to mix by hand.

How it works

It runs on TinyColor, a colour library that handles the maths of lightening and darkening cleanly. It takes your navy, walks it up toward white and down toward black, and spaces the steps evenly across that range, then writes out each one in the four code formats.

One thing to expect with navy in particular: since the colour starts dark, the darker steps crowd together near black quickly, while the lighter steps open up into proper slate and powder blues. That is normal, and it is exactly why generating the range beats nudging the colour by eye.

Where navy got its name

Navy is named after the navy, quite literally. In the mid-1700s the British Royal Navy put its officers in dark blue uniforms, and the colour stuck to the service so firmly that people just started calling it navy blue. The first officer uniform regulations went out in 1748 in dark blue and white, and by around 1780 the British press was already calling the shade navy blue.

The choice was practical as much as smart. Dark colours hid dirt, salt, and wear on long voyages, and the blue itself came from indigo, the natural dye that coloured almost every navy uniform for the next century and a half. That history is why navy still reads the way it does today: disciplined, dependable, formal. It is the colour of authority that does not need to shout.

The named dark blues, with hex codes

Navy is not one fixed value but a small family of deep blues. Here are the ones worth knowing, with a common hex for each.

• Navy (#000080): the standard web navy, one of the original named web colours.
• Dark Blue (#00008B): a touch brighter than navy, still firmly dark.
• Midnight Blue (#191970): deeper again, so dark it reads almost black in dim light.
• Prussian Blue (#003153): a navy with a slight green lean, named after old Prussian army uniforms.
• Oxford Blue (#002147): the deep, slightly muted blue of the university.
• Space Cadet (#1D2951): a soft, dusty dark blue with a modern feel.
• US Navy (#022A3A): the very dark, almost teal-black the United States Navy uses officially.

One honest note. Many real navy uniforms today are so dark they are actually black, not blue. The Canadian Forces even define their navy blue as a tone of black. So if a navy looks black on your screen, you are not imagining it, and a hex is the only way to be sure which one you have.

Navy or black

Navy is the colour designers reach for when black feels too harsh. Pure black can be heavy and a little flat, while navy gives you almost the same weight with a hint of life in it, a colour rather than the absence of one. For text, borders, and dark backgrounds, a deep navy often looks richer and less severe than #000000.

The old rule that you should never wear navy with black is not really true on screen either. Used together as two dark neutrals, they can look clean and deliberate, as long as there is enough contrast between them. The trick is to pick a clearly lighter navy against a true black, which is exactly the kind of pairing the lighter steps from this tool give you.

Building a palette from your navy

Navy is a natural anchor. A reliable way to use the steps from this tool is to let a deep navy carry your text and headers, a mid navy fill your main blocks, and a lighter, dustier navy sit behind content as a calm surface. One colour, three jobs, and the page already looks composed.

For accents, navy has two classic partners. White keeps it crisp and nautical, and a touch of gold makes it look genuinely regal, which is why the two turn up together on so many crests and premium brands. Warm neutrals like beige and tan soften it, and a deep maroon or chestnut pairs well when you want something richer than grey. Keep bright, icy colours to a minimum against navy, since they can look cold next to it.

Questions people ask

Is navy darker than royal blue?

Yes. Navy (#000080) is a deep, low-light blue, while royal blue (#4169E1) is brighter and more vivid. Navy reads as serious and formal; royal blue reads as bold and energetic.

What is the hex code for navy?

The standard web value is #000080. It is one of the named CSS colours, so you can also just write "navy" in your stylesheet. Specific navies, like a brand or uniform navy, will have their own hex.

Is navy just a very dark blue, or is it basically black?

True navy is a dark blue with a clear blue undertone, not black. That said, many navy uniforms are now actually black in all but name, so the line can blur at the very dark end.

Can I use my own navy?

Yes, and it is the best way to use the tool. Paste your exact navy in as the base, and it builds the lighter and darker steps of that colour, so you get a matching set for surfaces, text, and accents.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Navy blue, history and origin of the colour name. Wikipedia. https://en.wikipedia.org/wiki/Navy_blue