Shades of blue
Blue runs from airy baby blue to near-black navy. Light blues read as open and calm; mid blues as dependable; dark blues as formal. Below: 32 named shades with hex codes — tap a chip to copy it.
8 light · 11 medium · 13 dark · 14 pass AA as text on white
- Alice Blue#F0F8FF
- Powder Blue#B0E0E6
- Periwinkle#CCCCFF
- Light Blue#ADD8E6
- Light Sky Blue#87CEFA
- Baby blue#89CFF0
- Sky Blue#87CEEB
- Light Steel Blue#B0C4DE
- Deep Sky Blue#00BFFF
- Cornflower Blue#6495ED
- Carolina blue#4B9CD3
- Cadet Blue#5F9EA0
- Dodger Blue#1E90FF
- Light Slate Gray#778899
- Azure#007FFF
- Air Force blue#5D8AA8
- Slate Gray#708090
- Steel Blue#4682B4
- Royal Blue#4169E1
- Cerulean#007BA7
- Denim#1560BD
- Sapphire#0F52BA
- Blue#0000FF
- Cobalt blue#0047AB
- Egyptian blue#1034A6
- Medium Blue#0000CD
- International Klein Blue#002FA7
- Yale blue#00356B
- Prussian blue#003153
- Midnight Blue#191970
- Dark Blue#00008B
- Navy#000080
Blue color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| Alice BlueCSS | #F0F8FF | rgb(240, 248, 255) | hsl(208 100% 97%) | (6%, 3%, 0%, 0%) | 1.07:1 | 19.57:1 |
| Powder BlueCSS | #B0E0E6 | rgb(176, 224, 230) | hsl(187 52% 80%) | (23%, 3%, 0%, 10%) | 1.43:1 | 14.65:1 |
| Periwinkle | #CCCCFF | rgb(204, 204, 255) | hsl(240 100% 90%) | (20%, 20%, 0%, 0%) | 1.53:1 | 13.64:1 |
| Light BlueCSS | #ADD8E6 | rgb(173, 216, 230) | hsl(195 53% 79%) | (25%, 6%, 0%, 10%) | 1.52:1 | 13.74:1 |
| Light Sky BlueCSS | #87CEFA | rgb(135, 206, 250) | hsl(203 92% 75%) | (46%, 18%, 0%, 2%) | 1.71:1 | 12.23:1 |
| Baby blue | #89CFF0 | rgb(137, 207, 240) | hsl(199 77% 74%) | (43%, 14%, 0%, 6%) | 1.71:1 | 12.24:1 |
| Sky BlueCSS | #87CEEB | rgb(135, 206, 235) | hsl(197 71% 73%) | (43%, 12%, 0%, 8%) | 1.74:1 | 12.05:1 |
| Light Steel BlueCSS | #B0C4DE | rgb(176, 196, 222) | hsl(214 41% 78%) | (21%, 12%, 0%, 13%) | 1.78:1 | 11.79:1 |
| Deep Sky BlueCSS | #00BFFF | rgb(0, 191, 255) | hsl(195 100% 50%) | (100%, 25%, 0%, 0%) | 2.12:1 | 9.89:1 |
| Cornflower BlueCSS | #6495ED | rgb(100, 149, 237) | hsl(219 79% 66%) | (58%, 37%, 0%, 7%) | 2.97:1 | 7.06:1 |
| Carolina blue | #4B9CD3 | rgb(75, 156, 211) | hsl(204 61% 56%) | (64%, 26%, 0%, 17%) | 3.00:1 | 6.99:1 |
| Cadet BlueCSS | #5F9EA0 | rgb(95, 158, 160) | hsl(182 25% 50%) | (41%, 1%, 0%, 37%) | 3.05:1 | 6.88:1 |
| Dodger BlueCSS | #1E90FF | rgb(30, 144, 255) | hsl(210 100% 56%) | (88%, 44%, 0%, 0%) | 3.23:1 | 6.48:1 |
| Light Slate GrayCSS | #778899 | rgb(119, 136, 153) | hsl(210 14% 53%) | (22%, 11%, 0%, 40%) | 3.64:1 | 5.76:1 |
| Azure | #007FFF | rgb(0, 127, 255) | hsl(210 100% 50%) | (100%, 50%, 0%, 0%) | 3.83:1 | 5.47:1 |
| Air Force blue | #5D8AA8 | rgb(93, 138, 168) | hsl(204 30% 51%) | (45%, 18%, 0%, 34%) | 3.70:1 | 5.66:1 |
| Slate GrayCSS | #708090 | rgb(112, 128, 144) | hsl(210 13% 50%) | (22%, 11%, 0%, 44%) | 4.05:1 | 5.17:1 |
| Steel BlueCSS | #4682B4 | rgb(70, 130, 180) | hsl(207 44% 49%) | (61%, 28%, 0%, 29%) | 4.10:1 | 5.11:1 |
| Royal BlueCSS | #4169E1 | rgb(65, 105, 225) | hsl(225 73% 57%) | (71%, 53%, 0%, 12%) | 4.84:1 | 4.33:1 |
| Cerulean | #007BA7 | rgb(0, 123, 167) | hsl(196 100% 33%) | (100%, 26%, 0%, 35%) | 4.78:1 | 4.39:1 |
| Denim | #1560BD | rgb(21, 96, 189) | hsl(213 80% 41%) | (89%, 49%, 0%, 26%) | 6.10:1 | 3.43:1 |
| Sapphire | #0F52BA | rgb(15, 82, 186) | hsl(216 85% 39%) | (92%, 56%, 0%, 27%) | 7.15:1 | 2.93:1 |
| BlueCSS | #0000FF | rgb(0, 0, 255) | hsl(240 100% 50%) | (100%, 100%, 0%, 0%) | 8.59:1 | 2.44:1 |
| Cobalt blue | #0047AB | rgb(0, 71, 171) | hsl(215 100% 34%) | (100%, 58%, 0%, 33%) | 8.43:1 | 2.48:1 |
| Egyptian blue | #1034A6 | rgb(16, 52, 166) | hsl(226 82% 36%) | (90%, 69%, 0%, 35%) | 10.17:1 | 2.06:1 |
| Medium BlueCSS | #0000CD | rgb(0, 0, 205) | hsl(240 100% 40%) | (100%, 100%, 0%, 20%) | 11.16:1 | 1.88:1 |
| International Klein Blue | #002FA7 | rgb(0, 47, 167) | hsl(223 100% 33%) | (100%, 72%, 0%, 35%) | 10.68:1 | 1.96:1 |
| Yale blue | #00356B | rgb(0, 53, 107) | hsl(210 100% 21%) | (100%, 50%, 0%, 58%) | 12.19:1 | 1.72:1 |
| Prussian blue | #003153 | rgb(0, 49, 83) | hsl(205 100% 16%) | (100%, 41%, 0%, 67%) | 13.42:1 | 1.56:1 |
| Midnight BlueCSS | #191970 | rgb(25, 25, 112) | hsl(240 64% 27%) | (78%, 78%, 0%, 56%) | 14.84:1 | 1.41:1 |
| Dark BlueCSS | #00008B | rgb(0, 0, 139) | hsl(240 100% 27%) | (100%, 100%, 0%, 45%) | 15.29:1 | 1.37:1 |
| NavyCSS | #000080 | rgb(0, 0, 128) | hsl(240 100% 25%) | (100%, 100%, 0%, 50%) | 16.00:1 | 1.31:1 |
Make your own shades of blue
Pick any blue and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using blue in design
Interfaces lean on blue for links and primary buttons because mid-to-dark blues pass 4.5:1 on white easily. Light blues are best as backgrounds.
To pair it with other hues, start from the color wheel or see colors that go with blue. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of blue are there?
There is no fixed number: screens can show millions of colors and any blue hue can be made lighter, darker or more muted. This page lists 32 named shades of blue — the CSS named colors that fall in the blue family plus widely used names such as baby blue, cerulean, cobalt blue.
What is the hex code for blue?
There is no single official blue. The CSS keyword "blue" is #0000FF; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of blue?
In this list the lightest is Alice Blue (#F0F8FF) and the darkest is Navy (#000080), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of blue are readable as text on white?
14 of the 32 shades reach the WCAG AA ratio of 4.5:1 on white, for example Midnight Blue (#191970), Dark Blue (#00008B), Navy (#000080). Use the "On white" column in the table, or check any pair in the contrast checker.
What colors go with blue?
See the palettes on our "colors that go with blue" page: complementary, analogous and neutral pairings with hex codes.
What is the difference between a shade, a tint and a tone of blue?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of blue" means every variation of the hue, which is how this page uses it.