Shades of Blue: Names and Hex Codes
There are dozens of recognized shades of blue, from pale powder tints to near-black midnights and blue-green teals. Below is a practitioner reference: each shade with its name, hex code, RGB value, and a quick note on where it works best. Use it as a swatch library when you build a palette, and pair it with our guide to what the color blue means when you need the symbolism behind the swatch.
A quick note on terminology, because it matters when you specify color precisely. A shade technically means a hue mixed with black (making it darker), a tint is a hue mixed with white (making it lighter), and a tone is a hue mixed with gray (making it more muted). In everyday design language — and throughout this guide — “shades of blue” is used loosely to mean every named variation of blue, whether it is a light tint like powder blue, a deep shade like navy, or a muted tone like steel blue. The hex codes below are the established web, X11, and common Pantone-adjacent values, so you can copy them straight into your CSS, design tool, or brand sheet.
Light shades of blue
Light blues read as calm, clean, and airy. They work as backgrounds, secondary UI surfaces, and pastel branding.
| Shade name | Hex | RGB | Notes / use |
|---|---|---|---|
| Powder Blue | #B0E0E6 | 176, 224, 230 | Soft, dusty pastel; nursery and wellness brands. |
| Sky Blue | #87CEEB | 135, 206, 235 | Bright, open daytime blue; backgrounds and accents. |
| Baby Blue | #89CFF0 | 137, 207, 240 | Gentle pastel; soft, friendly identities. |
| Light Blue | #ADD8E6 | 173, 216, 230 | The web-standard light blue; safe fill color. |
| Periwinkle | #CCCCFF | 204, 204, 255 | Blue-violet pastel; trend-forward, gentle. |
| Alice Blue | #F0F8FF | 240, 248, 255 | Near-white tint; page and card backgrounds. |
| Light Cyan | #E0FFFF | 224, 255, 255 | Pale icy tint with a green cast. |
Dark shades of blue
Dark blues signal trust, authority, and depth — the default for finance, tech, and corporate identities.
| Shade name | Hex | RGB | Notes / use |
|---|---|---|---|
| Navy | #000080 | 0, 0, 128 | Classic deep blue; corporate, nautical, formal. |
| Midnight Blue | #191970 | 25, 25, 112 | Near-black with blue depth; premium dark themes. |
| Sapphire | #0F52BA | 15, 82, 186 | Rich jewel blue; luxury and editorial. |
| Cobalt | #0047AB | 0, 71, 171 | Vivid, saturated mid-dark blue; strong CTAs. |
| Royal Blue | #4169E1 | 65, 105, 225 | Bold, energetic; sport and tech brands. |
| Dark Blue | #00008B | 0, 0, 139 | Web-standard deep blue; text on light. |
| Prussian Blue | #003153 | 0, 49, 83 | Historic ink blue; moody, vintage. |
Bright and mid-tone blues
These are the workhorse blues — saturated enough to lead a palette, balanced enough to use at scale.
| Shade name | Hex | RGB | Notes / use |
|---|---|---|---|
| Azure | #007FFF | 0, 127, 255 | Pure bright blue; links and primary buttons. |
| Cornflower | #6495ED | 100, 149, 237 | Soft mid-blue; calm, approachable UI. |
| Steel Blue | #4682B4 | 70, 130, 180 | Muted, industrial; dependable accents. |
| Denim | #1560BD | 21, 96, 189 | Workwear blue; casual, grounded. |
| Blue (Primary) | #0000FF | 0, 0, 255 | Pure RGB blue; max saturation, use sparingly. |
| Carolina Blue | #4B9CD3 | 75, 156, 211 | Soft collegiate blue; friendly and open. |
Blue-green shades
Where blue tips toward green you get teals, ceruleans, and cyans — fresh, modern, and slightly tropical.
| Shade name | Hex | RGB | Notes / use |
|---|---|---|---|
| Teal | #008080 | 0, 128, 128 | Balanced blue-green; calm, professional. |
| Cerulean | #007BA7 | 0, 123, 167 | Sky-meets-sea blue; clean, optimistic. |
| Cyan / Aqua | #00FFFF | 0, 255, 255 | Electric blue-green; digital, neon accents. |
| Turquoise | #40E0D0 | 64, 224, 208 | Bright tropical blue-green; vibrant. |
| Dark Turquoise | #00CED1 | 0, 206, 209 | Deeper teal; energetic accents. |
| Teal Blue | #2E8B9B | 46, 139, 155 | Muted teal; sophisticated, coastal. |
Muted and grayish blues
Desaturated blues feel grown-up and architectural. They make excellent neutrals that still carry a hint of color.
| Shade name | Hex | RGB | Notes / use |
|---|---|---|---|
| Blue Gray | #6699CC | 102, 153, 204 | Soft dusty blue; calm, neutral-leaning. |
| Payne’s Gray | #536878 | 83, 104, 120 | Dark blue-gray; shadows and ink tones. |
| Air Force Blue | #73A9C2 | 115, 169, 194 | Muted mid-blue; uniform, dependable. |
| Cerulean Frost | #79A0C1 | 121, 160, 193 | Cool, hazy blue; backgrounds. |
What are the most popular shades of blue?
The most-used named blues in design are navy, royal blue, sky blue, teal, and cobalt. Navy dominates corporate and finance branding for its trustworthy, conservative feel; royal blue and cobalt bring energy to tech and sports identities; sky blue and powder blue suit wellness and lifestyle; teal bridges blue and green for a fresh, modern look. If you are deciding between the two boldest options, see our breakdown of navy vs royal blue.
Blue’s enduring popularity is no accident. Surveys across multiple countries consistently find blue named as the single most-preferred color, which is a large part of why it appears in so many technology, banking, and healthcare logos. It reads as stable, competent, and calm — exactly the traits those industries want to project. The practical upside for designers is that blue is “safe” in the best sense: a well-chosen blue rarely alienates an audience, and it works across cultures with fewer of the conflicting associations that colors like red or purple carry.
How to use shades of blue in design
Anchor a palette with one dominant blue, then build value contrast with a lighter tint and a darker shade of the same hue — for example pairing sky blue surfaces with navy text and a cobalt accent. Blue is naturally cool, so warm it up with a complementary orange or a warm neutral to avoid a clinical feel. For pairing inspiration, see colors that go with navy.
A few practical rules keep blue palettes from going wrong. First, watch your contrast: pale blues like powder blue and alice blue fail accessibility checks as text colors on white, so reserve them for backgrounds and large shapes, and use a dark blue such as navy or midnight blue (#191970) when you need readable type. Second, decide on temperature — a green-leaning blue like cerulean and a violet-leaning blue like periwinkle will fight each other in the same palette, so pick a lane. Third, for digital interfaces, azure (#007FFF) and cobalt make confident primary-button and link colors because they are saturated enough to signal interactivity without straining the eye. The deeper psychology behind these choices is covered in our color psychology guide, and you can explore neighboring families in our reference on shades of green and shades of purple.
Frequently Asked Questions
How many shades of blue are there?
There is no fixed number — the human eye can distinguish thousands of blue gradations, and screens display millions. In practical design terms, around 30 to 40 named shades of blue are widely recognized, from powder blue and sky blue through royal blue, cobalt, navy, and midnight blue.
What is the hex code for navy blue?
The standard web hex code for navy is #000080, which is RGB 0, 0, 128. Some brands use a slightly lighter “navy” around #001F54 or #0A1F44 for screen legibility, but #000080 is the canonical CSS named-color value for navy.
What is the difference between teal and turquoise?
Both are blue-greens, but teal (#008080) is darker, more muted, and balanced evenly between blue and green, while turquoise (#40E0D0) is brighter, lighter, and leans more vividly green. Teal reads as sophisticated and corporate; turquoise feels tropical and energetic.
Which shade of blue is best for a logo?
For trust and stability, navy (#000080) or a deep royal blue (#4169E1) are safest. For modern tech brands, cobalt (#0047AB) and azure (#007FFF) feel current and confident. Choose based on the emotion you want — deeper blues read as established, brighter blues as innovative.
What colors go well with blue?
Blue pairs beautifully with warm neutrals (cream, tan), crisp white, and metallic gold for an elegant look. For high contrast, use its complementary orange. Soft coral, blush pink, and sage green also balance blue’s coolness without clashing.
