Shades of Blue: Names, HEX & RGB Codes
Blue covers everything from pale ice blues to deep navy. Below are all the CSS named colors in the blue family with their HEX, RGB and HSL values, plus a tint-and-shade scale you can copy.
17 named blue colors in CSS
Every name below works directly in CSS (for example color: dodgerblue;). Values are from the CSS Color Module Level 4 list; the last column shows whether white or black text has more contrast on that color, and the exact WCAG ratio.
| Name | HEX | RGB | HSL | Best text color | |
|---|---|---|---|---|---|
Alice Bluealiceblue | #F0F8FF | rgb(240, 248, 255) | hsl(208, 100%, 97%) | black text, 19.57:1 | |
Powder Bluepowderblue | #B0E0E6 | rgb(176, 224, 230) | hsl(187, 52%, 80%) | black text, 14.65:1 | |
Light Bluelightblue | #ADD8E6 | rgb(173, 216, 230) | hsl(195, 53%, 79%) | black text, 13.74:1 | |
Light Steel Bluelightsteelblue | #B0C4DE | rgb(176, 196, 222) | hsl(214, 41%, 78%) | black text, 11.79:1 | |
Light Sky Bluelightskyblue | #87CEFA | rgb(135, 206, 250) | hsl(203, 92%, 75%) | black text, 12.23:1 | |
Sky Blueskyblue | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) | black text, 12.05:1 | |
Cornflower Bluecornflowerblue | #6495ED | rgb(100, 149, 237) | hsl(219, 79%, 66%) | black text, 7.06:1 | |
Royal Blueroyalblue | #4169E1 | rgb(65, 105, 225) | hsl(225, 73%, 57%) | white text, 4.84:1 | |
Dodger Bluedodgerblue | #1E90FF | rgb(30, 144, 255) | hsl(210, 100%, 56%) | black text, 6.48:1 | |
Deep Sky Bluedeepskyblue | #00BFFF | rgb(0, 191, 255) | hsl(195, 100%, 50%) | black text, 9.89:1 | |
Cadet Bluecadetblue | #5F9EA0 | rgb(95, 158, 160) | hsl(182, 25%, 50%) | black text, 6.88:1 | |
Blueblue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | white text, 8.59:1 | |
Steel Bluesteelblue | #4682B4 | rgb(70, 130, 180) | hsl(207, 44%, 49%) | black text, 5.11:1 | |
Medium Bluemediumblue | #0000CD | rgb(0, 0, 205) | hsl(240, 100%, 40%) | white text, 11.16:1 | |
Dark Bluedarkblue | #00008B | rgb(0, 0, 139) | hsl(240, 100%, 27%) | white text, 15.29:1 | |
Midnight Bluemidnightblue | #191970 | rgb(25, 25, 112) | hsl(240, 64%, 27%) | white text, 14.84:1 | |
Navynavy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | white text, 16.00:1 |
Blue tint & shade scale
A ten-step scale built from royalblue (#4169E1). Need a scale for your own color? Use the tints, shades & tones generator.
Tints (mixed with white) on the left, shades (mixed with black) on the right. Click a swatch to copy it.
Using blue in design
Blue is the most common color for links and primary buttons, partly because it reads clearly as interactive and is distinguishable for people with red-green color blindness. Dark blues such as navy (#000080) and midnightblue (#191970) pass the 4.5:1 text contrast requirement on white with a wide margin; mid blues like dodgerblue (#1E90FF) do not, so use them for large elements or pair them with dark text.
A palette to start from
More ideas: cool color palettes, fintech blue palettes, or check any pair in the contrast checker.