31 Shades of Blue with Hex Codes

Named Blue Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

Blue Color Chart: Hex, RGB, HSL & CMYK

Every blue above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Blue Scale from Light to Dark

A 12-step lightness scale built from the core blue hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate blue design tokens.

What Blue Communicates

Blue is the most used color in interface and brand design because it reads as stable, competent, and low-risk. Dark navy carries authority; mid blues feel dependable and are the default for links and primary actions; pale blues recede and work as calm backgrounds. Blue is also the safest hue for red-green color vision deficiency, which is one reason it dominates dashboards and data visualisation.

Where blue works well

• Primary buttons and links, where blue is the established convention
• Finance, healthcare, and B2B brands that need to signal reliability
• Data visualisation, because blue stays distinguishable for most viewers with color vision deficiency
• Cool, spacious backgrounds when saturation is dropped below about 20%

Colors that pair with blue

Copy the Blue Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --blue-oxford-blue: #002147;
  --blue-navy: #000080;
  --blue-darkblue: #00008B;
  --blue-midnightblue: #191970;
  --blue-prussian-blue: #003153;
  --blue-yale-blue: #00356B;
  --blue-mediumblue: #0000CD;
  --blue-egyptian-blue: #1034A6;
  --blue-blue: #0000FF;
  --blue-cobalt-blue: #0047AB;
  --blue-sapphire: #0F52BA;
  --blue-denim: #1560BD;
  --blue-royalblue: #4169E1;
  --blue-cerulean: #007BA7;
  --blue-steelblue: #4682B4;
  --blue-azure: #007FFF;
  --blue-air-force-blue: #5D8AA8;
  --blue-dodgerblue: #1E90FF;
  --blue-cadetblue: #5F9EA0;
  --blue-carolina-blue: #4B9CD3;
  --blue-cornflowerblue: #6495ED;
  --blue-tiffany-blue: #0ABAB5;
  --blue-deepskyblue: #00BFFF;
  --blue-lightsteelblue: #B0C4DE;
  --blue-skyblue: #87CEEB;
  --blue-lightskyblue: #87CEFA;
  --blue-baby-blue: #89CFF0;
  --blue-periwinkle: #CCCCFF;
  --blue-lightblue: #ADD8E6;
  --blue-powderblue: #B0E0E6;
  --blue-aliceblue: #F0F8FF;
}

Blue Color Questions