Shades of Blue: Color Names & Hex Codes

There are 8 CSS named colors in the blue range, from the lightest, Powder Blue, to the darkest, Navy. Each one below has its exact hex and RGB code, the text color that reads best on it, and a full page with palettes and matching colors.

Blue Color Chart

Ordered from lightest to darkest by relative luminance. Click a name for its full color page.

#B0E0E6

Powder Blue

rgb(176, 224, 230) · powderblue

Soft, high-luminance pastel blue.

#ADD8E6

Light Blue

rgb(173, 216, 230) · lightblue

Pale, slightly grayish blue.

#87CEEB

Sky Blue

rgb(135, 206, 235) · skyblue

Serene, airy light azure blue.

#4682B4

Steel Blue

rgb(70, 130, 180) · steelblue

Balanced mid-tone cool corporate blue.

#4169E1

Royal Blue

rgb(65, 105, 225) · royalblue

Vivid, saturated classic electric blue.

#0000FF

Blue

rgb(0, 0, 255) · blue

Pure screen blue: full blue channel and nothing else.

#191970

Midnight Blue

rgb(25, 25, 112) · midnightblue

Deep, dramatic dark navy tone.

#000080

Navy

rgb(0, 0, 128) · navy

Half-strength blue: a very dark, classic navy.

Light, Mid-tone and Dark Shades of Blue

Light shades of blue

Pale enough to work as backgrounds. Black text has the higher contrast on all 3 of them. Powder Blue, Light Blue and Sky Blue.

Mid-tone shades of blue

Mid-tones for accents, buttons and illustrations. Check the table below before choosing a text color. Black text reads best on 1 of them and white text on 1. Steel Blue and Royal Blue.

Dark shades of blue

Deep tones for headers, buttons and bold brand color. White text has the higher contrast on all 3 of them. Blue, Midnight Blue and Navy.

Blue Hex Codes and Contrast

Contrast ratios follow WCAG 2.2: 4.5:1 is the minimum for body text, 3:1 for large text.

Blue-range named colors in CSS Color 4
Color	HEX	RGB	HSL	On black	On white	Best text
Powder Blue	`#B0E0E6`	`rgb(176, 224, 230)`	`hsl(187, 52%, 80%)`	`14.65:1`	`1.43:1`	Black
Light Blue	`#ADD8E6`	`rgb(173, 216, 230)`	`hsl(195, 53%, 79%)`	`13.74:1`	`1.53:1`	Black
Sky Blue	`#87CEEB`	`rgb(135, 206, 235)`	`hsl(197, 71%, 73%)`	`12.06:1`	`1.74:1`	Black
Steel Blue	`#4682B4`	`rgb(70, 130, 180)`	`hsl(207, 44%, 49%)`	`5.11:1`	`4.11:1`	Black
Royal Blue	`#4169E1`	`rgb(65, 105, 225)`	`hsl(225, 73%, 57%)`	`4.33:1`	`4.85:1`	White
Blue	`#0000FF`	`rgb(0, 0, 255)`	`hsl(240, 100%, 50%)`	`2.44:1`	`8.59:1`	White
Midnight Blue	`#191970`	`rgb(25, 25, 112)`	`hsl(240, 64%, 27%)`	`1.41:1`	`14.85:1`	White
Navy	`#000080`	`rgb(0, 0, 128)`	`hsl(240, 100%, 25%)`	`1.31:1`	`16.01:1`	White

Shades of Blue FAQ

What are the shades of blue in CSS?

CSS Color 4 does not group its named colors into families, but 8 of them fall in the blue range. From lightest to darkest: Powder Blue (#B0E0E6), Light Blue (#ADD8E6), Sky Blue (#87CEEB), Steel Blue (#4682B4), Royal Blue (#4169E1), Blue (#0000FF), Midnight Blue (#191970) and Navy (#000080).

What is the hex code for blue?

The CSS named color blue is #0000FF, which is RGB(0, 0, 255). The other shades on this page each have their own code.

Which shade of blue can I use for text on a white background?

Royal Blue, Blue, Midnight Blue and Navy are the only ones of these shades with at least 4.5:1 contrast on white, the WCAG AA minimum for body text. Navy reaches 16.01:1.

Is baby blue a CSS color?

No. Baby blue is a common name, not a CSS named color, so it has no single standard hex code. The nearest CSS colors are Light Blue (#ADD8E6) and Powder Blue (#B0E0E6).

Sources: W3C CSS Color Module Level 4 (named colors and values); WCAG 2.2 (relative luminance and contrast formula).