Color guide · Blue & blue-green colors

Navy Color

Navy is a deep blue that can anchor navigation, a cover or a night scene. Its darkness makes light text a sensible starting point. Keep nearby dark surfaces visibly different so the layout does not lose its boundaries.

A very dark blue with a clear structural role#000080CSS keyword: navy

Navy color codes

HEX#000080
RGBrgb(0, 0, 128)
HSLhsl(240, 100%, 25.1%)
CSS keywordnavy

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes navy interesting?

CSS navy is #000080, with a blue channel and no red or green. A dark blue sea is not simply this same formula: NOAA explains that water absorbs red wavelengths while other factors influence its observed color. Use the digital value for a design role and a real reference for a particular material or landscape.

Read the reference: NOAA: why the ocean is blue ↗

Things with navy tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #000080 match.

Illustrated placeholder · image coming later

Deep-water scenes

A dark horizon and lighter reflection help the blue area retain depth.

Illustrated placeholder · image coming later

Dark textiles

Navy cloth often reveals lighter blue folds and near-black shadows.

Illustrated placeholder · image coming later

Dark ceramic surfaces

A small pale edge prevents a dark object from merging into its background.

Ideas for using navy

01

Interfaces

Use navy as a structural band with readable light text and visible focus indicators.

02

Games

Give a night scene separate sky, terrain and silhouette values. Do not make every dark area navy.

03

Editorial design

Combine navy with ivory paragraphs and a restrained amber detail for a clear reading hierarchy.

Watch out: Navy and black are a poor text pair. A dark color scheme still needs measured contrast.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring navy

Blueprint Paper

A navy structure with a pale sky-blue surface

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

16.01:1 · AAA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare navy with another color →

Questions about navy

How is navy different from royal blue?

The CSS navy anchor is substantially darker; royal blue is a brighter midtone blue.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore blue & blue-green colors →

#008080
Blue & blue-green colors

Teal

A deep balance of blue and green

Explore color →
#40E0D0
Blue & blue-green colors

Turquoise

A bright blue-green for open, light compositions

Explore color →
#4169E1
Blue & blue-green colors

Royal Blue

A vivid blue with a violet undertone

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide