Shades of Blue: 48 Blue Color Codes (HEX, RGB, HSL)
Every shade of blue with its name and HEX, RGB, HSL and OKLCH code, plus ready-made blue color palettes. Click any color to copy it.
Light blues
-
Alice Blue
- RGB
- HSL
- OKLCH
-
Powder Blue
- RGB
- HSL
- OKLCH
-
Light Blue
- RGB
- HSL
- OKLCH
-
Columbia Blue
- RGB
- HSL
- OKLCH
-
Uranian Blue
- RGB
- HSL
- OKLCH
-
Baby Blue
- RGB
- HSL
- OKLCH
-
Sky Blue
- RGB
- HSL
- OKLCH
-
Light Sky Blue
- RGB
- HSL
- OKLCH
Bright blues
-
Deep Sky Blue
- RGB
- HSL
- OKLCH
-
Picton Blue
- RGB
- HSL
- OKLCH
-
Dodger Blue
- RGB
- HSL
- OKLCH
-
Azure
- RGB
- HSL
- OKLCH
-
Brandeis Blue
- RGB
- HSL
- OKLCH
-
Cornflower Blue
- RGB
- HSL
- OKLCH
-
Royal Blue
- RGB
- HSL
- OKLCH
-
Blue
- RGB
- HSL
- OKLCH
Rich blues
-
Cerulean
- RGB
- HSL
- OKLCH
-
Steel Blue
- RGB
- HSL
- OKLCH
-
True Blue
- RGB
- HSL
- OKLCH
-
Cobalt Blue
- RGB
- HSL
- OKLCH
-
Sapphire
- RGB
- HSL
- OKLCH
-
Persian Blue
- RGB
- HSL
- OKLCH
-
Medium Blue
- RGB
- HSL
- OKLCH
-
Ultramarine
- RGB
- HSL
- OKLCH
Navy and dark blues
-
Yale Blue
- RGB
- HSL
- OKLCH
-
Delft Blue
- RGB
- HSL
- OKLCH
-
Space Cadet
- RGB
- HSL
- OKLCH
-
Midnight Blue
- RGB
- HSL
- OKLCH
-
Dark Blue
- RGB
- HSL
- OKLCH
-
Navy
- RGB
- HSL
- OKLCH
-
Prussian Blue
- RGB
- HSL
- OKLCH
-
Oxford Blue
- RGB
- HSL
- OKLCH
Muted and gray blues
-
Light Steel Blue
- RGB
- HSL
- OKLCH
-
Air Superiority Blue
- RGB
- HSL
- OKLCH
-
Blue Gray
- RGB
- HSL
- OKLCH
-
Glaucous
- RGB
- HSL
- OKLCH
-
Cadet Blue
- RGB
- HSL
- OKLCH
-
Queen Blue
- RGB
- HSL
- OKLCH
-
Denim
- RGB
- HSL
- OKLCH
-
Lapis Lazuli
- RGB
- HSL
- OKLCH
Teal and ocean blues
-
Maximum Blue
- RGB
- HSL
- OKLCH
-
Moonstone
- RGB
- HSL
- OKLCH
-
Pacific Blue
- RGB
- HSL
- OKLCH
-
Celestial Blue
- RGB
- HSL
- OKLCH
-
Blue-Green
- RGB
- HSL
- OKLCH
-
Teal Blue
- RGB
- HSL
- OKLCH
-
Sea Blue
- RGB
- HSL
- OKLCH
-
Blue Sapphire
- RGB
- HSL
- OKLCH
Blue color palettes
-
Ocean
-
Arctic
-
Corporate
-
Midnight
-
Denim
-
Sky
How many shades of blue are there?
There is no fixed number. Blue covers every color between cyan and violet, and a screen can show thousands of distinct blues. What designers and developers use in practice are named shades: well-known blues like navy, sky blue, cobalt and cerulean that have an agreed color code. This page collects 48 of them, grouped from the lightest to the darkest and muted blues.
What does blue mean in design?
Blue is associated with trust, calm and reliability, which is why so many banks, tech companies and health brands use it. Light blues feel open and airy, bright blues feel energetic and modern, and navy feels serious and professional. Blue is also one of the safest choices for links and buttons, because people already expect clickable things to be blue.
Using blue in CSS
Store your blues as CSS variables so the whole site updates from one place. Use dark text on light blues and white text on darker blues: white on #1560BD (Denim) passes WCAG contrast for normal text, while white on #87CEEB (Sky Blue) does not.
:root {
--blue-light: #ADD8E6;
--blue: #1560BD;
--blue-dark: #000080;
}
.button {
background: var(--blue);
color: #fff;
}
.button:hover {
background: var(--blue-dark);
}FAQ
What is the hex code for blue?
Pure blue is #0000FF, which is rgb(0, 0, 255).
What is the hex code for navy blue?
Navy is #000080. For a slightly softer navy, try Space Cadet (#1D2951) or Oxford Blue (#002147).
What is the hex code for light blue?
The CSS color lightblue is #ADD8E6. Baby Blue is #89CFF0 and Sky Blue is #87CEEB.
Can I use these colors in Tailwind?
Yes. Click Copy as Tailwind theme at the top of the page and paste it into your main CSS file. Every shade becomes a utility like bg-baby-blue.
Need a blue gradient? Use the CSS gradient generator.
More colors
Need a gradient from these colors? Use the CSS gradient generator.