Shades

Shades of Blue

Explore useful blue shades from light sky-like values to deep navy-like tones.

Shades of Blue color ramp

These swatches are generated from one base hue using fixed HSL lightness steps. They are computed references, not official color names.

#E5E5FF HSL lightness 95%
#B3B3FF HSL lightness 85%
#8080FF HSL lightness 75%
#4D4DFF HSL lightness 65%
#1A1AFF HSL lightness 55%
#0000E6 HSL lightness 45%
#0000B3 HSL lightness 35%
#000080 HSL lightness 25%
#00004D HSL lightness 15%

Base reference: #0000FF. Use the Tints and Shades Generator when you need a ramp based on a specific project color.

Common CSS named blue colors

These are standardized CSS named colors in the broader blue family. The names are fixed web keywords, not a perceptually even shade scale.

ColorCSS keywordHEX
Alice Blue aliceblue #F0F8FF
Light Blue lightblue #ADD8E6
Powder Blue powderblue #B0E0E6
Sky Blue skyblue #87CEEB
Deep Sky Blue deepskyblue #00BFFF
Dodger Blue dodgerblue #1E90FF
Cornflower Blue cornflowerblue #6495ED
Royal Blue royalblue #4169E1
Steel Blue steelblue #4682B4
Blue blue #0000FF
Navy navy #000080
Midnight Blue midnightblue #191970

Named-color values above use the standardized CSS sRGB keywords documented by MDN. The list is curated for this color family; it is not a perceptually uniform scale.

Blue can move from airy, high-lightness tones to very dark values while keeping a recognizable blue hue. The ramp above is computed with fixed HSL lightness steps, so it is a repeatable reference rather than a list of loosely defined color names.

When choosing a blue for a design system, compare the actual HEX values at the contrast level you need. A saturated mid blue may work well as an action color, while lighter shades often need dark text and the darkest shades may support white text.

Useful next steps

Try a specific color in the Tints and Shades Generator, or browse other shade families.