50 Shades of Blue: Names, Codes & Color Palettes for Designers
Did you know that blue is the only color that consistently ranks as humanity’s favorite — across cultures, genders, and age groups? Yet “blue” is not a single color. It is an entire universe of hues, each with its own name, personality, and precise color code. From the pale whisper of Alice Blue to the electric charge of Cobalt, the shades of blue span a breathtaking spectrum that designers, artists, and marketers use every single day.
Whether you’re building a website, choosing a brand palette, painting a room, or creating digital art, knowing the exact shades of blue available — and their HEX, RGB, and HSL codes — is essential. This guide covers 50+ named blue shades, complete with color codes, psychological meaning, and practical design applications. You can also use ColorFromPic to extract any shade of blue directly from a photo or image, giving you precise color codes in seconds.
What Makes a Color a “Shade of Blue”?
A shade of blue is any color that shares the dominant blue hue — meaning its hue angle on the color wheel falls roughly between 180° and 270° in HSL (Hue, Saturation, Lightness) notation. Pure blue sits at exactly 240° in the HSL model.
Variations within blue shades are created by adjusting three properties:
- Hue — Slight shifts toward green (teal) or violet (periwinkle) change the character of the blue
- Saturation — High saturation produces vivid, electric blues; low saturation creates dusty, muted blue-grays
- Lightness — Increasing lightness produces sky blues and pastels; decreasing it creates navy, midnight, and near-black blues
In color science, the terms shade, tint, and tone are technically distinct:
- A tint adds white (e.g., Baby Blue)
- A shade adds black (e.g., Midnight Blue)
- A tone adds gray (e.g., Steel Blue)
In everyday usage — and throughout this guide — “shades of blue” refers to all blue color variations, regardless of whether they are technically tints, shades, or tones.
The Complete Shades of Blue Color Chart (HEX, RGB, HSL)
Below is a comprehensive reference table of the most important and widely used shades of blue, with accurate HEX, RGB, and HSL values.
| Color Name | HEX | RGB | HSL |
|---|---|---|---|
| Alice Blue | #F0F8FF | 240, 248, 255 | 208°, 100%, 97% |
| Baby Blue | #89CFF0 | 137, 207, 240 | 199°, 79%, 74% |
| Powder Blue | #B0E0E6 | 176, 224, 230 | 187°, 52%, 80% |
| Light Blue | #ADD8E6 | 173, 216, 230 | 195°, 53%, 79% |
| Sky Blue | #87CEEB | 135, 206, 235 | 197°, 71%, 73% |
| Cornflower Blue | #6495ED | 100, 149, 237 | 219°, 79%, 66% |
| Periwinkle | #CCCCFF | 204, 204, 255 | 240°, 100%, 90% |
| Steel Blue | #4682B4 | 70, 130, 180 | 207°, 44%, 49% |
| Dodger Blue | #1E90FF | 30, 144, 255 | 210°, 100%, 56% |
| Cerulean | #007BA7 | 0, 123, 167 | 196°, 100%, 33% |
| Azure | #007FFF | 0, 127, 255 | 210°, 100%, 50% |
| Cobalt Blue | #0047AB | 0, 71, 171 | 215°, 100%, 34% |
| Royal Blue | #4169E1 | 65, 105, 225 | 225°, 73%, 57% |
| Blue (Pure) | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| Blue (Web) | #0078D4 | 0, 120, 212 | 206°, 100%, 42% |
| Sapphire | #0F52BA | 15, 82, 186 | 216°, 85%, 39% |
| Ultramarine | #3F00FF | 63, 0, 255 | 249°, 100%, 50% |
| Egyptian Blue | #1034A6 | 16, 52, 166 | 223°, 82%, 36% |
| Electric Blue | #7DF9FF | 125, 249, 255 | 182°, 100%, 75% |
| Cadet Blue | #5F9EA0 | 95, 158, 160 | 182°, 25%, 50% |
| Air Force Blue | #5D8AA8 | 93, 138, 168 | 204°, 29%, 51% |
| Teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
| Cyan | #00FFFF | 0, 255, 255 | 180°, 100%, 50% |
| Denim Blue | #1560BD | 21, 96, 189 | 213°, 80%, 41% |
| Slate Blue | #6A5ACD | 106, 90, 205 | 248°, 53%, 58% |
| Medium Blue | #0000CD | 0, 0, 205 | 240°, 100%, 40% |
| Dark Blue | #00008B | 0, 0, 139 | 240°, 100%, 27% |
| Navy Blue | #000080 | 0, 0, 128 | 240°, 100%, 25% |
| Midnight Blue | #191970 | 25, 25, 112 | 240°, 64%, 27% |
| Prussian Blue | #003153 | 0, 49, 83 | 205°, 100%, 16% |
| Oxford Blue | #002147 | 0, 33, 71 | 214°, 100%, 14% |
| Indigo | #4B0082 | 75, 0, 130 | 275°, 100%, 25% |
| Persian Blue | #1C39BB | 28, 57, 187 | 227°, 74%, 42% |
| Carolina Blue | #56A0D3 | 86, 160, 211 | 204°, 57%, 58% |
| International Klein Blue | #002FA7 | 0, 47, 167 | 220°, 100%, 33% |
| Iris Blue | #5A4FCF | 90, 79, 207 | 244°, 57%, 56% |
| French Blue | #0072BB | 0, 114, 187 | 203°, 100%, 37% |
| Aqua | #00FFFF | 0, 255, 255 | 180°, 100%, 50% |
| Peacock Blue | #005F6A | 0, 95, 106 | 185°, 100%, 21% |
| Glaucous | #6082B6 | 96, 130, 182 | 216°, 36%, 54% |
| Columbia Blue | #C4D8E2 | 196, 216, 226 | 200°, 33%, 83% |
| Iceberg | #71A6D2 | 113, 166, 210 | 207°, 52%, 63% |
| Bleu de France | #318CE7 | 49, 140, 231 | 208°, 77%, 55% |
| Space Cadet | #1D2951 | 29, 41, 81 | 226°, 47%, 22% |
| Charcoal Blue | #36454F | 54, 69, 79 | 205°, 19%, 26% |
| Steel Teal | #5F8A8B | 95, 138, 139 | 181°, 19%, 46% |
| Vista Blue | #7C9ED9 | 124, 158, 217 | 216°, 53%, 67% |
| Turquoise | #40E0D0 | 64, 224, 208 | 174°, 72%, 56% |
| Han Blue | #446CCF | 68, 108, 207 | 220°, 59%, 54% |
| Blue Gray | #6699CC | 102, 153, 204 | 210°, 50%, 60% |
Light Shades of Blue
Light shades of blue are characterized by high lightness values (typically above 70% in HSL) and relatively low saturation. They evoke openness, airiness, calm, and serenity.
Most Popular Light Blues
Alice Blue (#F0F8FF) is the lightest named blue — so pale it reads almost as white with a cool undertone. It’s widely used as a background color in web design for clean, minimal interfaces.
Baby Blue (#89CFF0) is a soft, delicate blue associated with gentleness and new beginnings. Its RGB value is (137, 207, 240).
Powder Blue (#B0E0E6) sits between sky blue and light teal, offering a vintage, nostalgic quality that performs well in interior design and fashion.
Sky Blue (#87CEEB) is named after the color of a clear daytime sky. It is highly versatile — working well in both digital and print contexts.
When to Use Light Blues
- Website backgrounds and hero sections (for calm, trustworthy brands)
- Baby and children’s products
- Healthcare and wellness branding
- Watercolor-inspired illustrations and art
Medium Shades of Blue
Medium blues occupy the mid-range of the blue spectrum — fully saturated, clearly recognizable as blue, and highly functional in design contexts.
Most Popular Medium Blues
Royal Blue (#4169E1) is one of the most recognized and used blues in design. Its RGB value is (65, 105, 225). It is vibrant, authoritative, and equally suited to digital and print media.
Cobalt Blue (#0047AB) is a historic pigment used in oil painting since the 19th century. Its deep, vivid character makes it a staple in branding and fine art.
Dodger Blue (#1E90FF) is a bright, saturated blue frequently used in sports branding, app interfaces, and digital advertising.
Cornflower Blue (#6495ED) is a cooler, more relaxed medium blue — associated with loyalty and calm communication.
Cerulean (#007BA7) bridges medium and deep blue with a greenish tint, widely used in technology and healthcare brand palettes.
Dark Shades of Blue
Dark shades of blue have low lightness values (typically below 35% in HSL) and command authority, depth, and formality. These are the blues of power and sophistication.
Most Popular Dark Blues
Navy Blue (#000080) is the archetypal dark blue — deeply associated with authority, professionalism, and nautical heritage. Its HSL value is 240°, 100%, 25%.
Midnight Blue (#191970) is a near-black blue with a mystical, elegant quality. It is frequently used in luxury branding, formal fashion, and premium web design.
Oxford Blue (#002147) is even darker — almost exclusively seen in academic, institutional, and elite brand contexts.
Prussian Blue (#003153) is one of the oldest synthetic blue pigments (first created in the 1700s) and remains popular in fine art and historical design references.
When to Use Dark Blues
- Corporate and financial branding
- Government and institutional websites
- Formal print materials (annual reports, stationery)
- Luxury product packaging
Blue-Adjacent: Teal, Cyan, and Indigo
Some colors live on the edges of the blue family — sharing blue’s coolness but pulling toward other hues.
Teal
Teal (#008080) is a blue-green color with equal parts blue and green. It represents creativity, sophistication, and freshness. Many major brands (including Oral-B and Philips) use teal for its modern yet trustworthy feel.
Cyan
Cyan (#00FFFF) is a fully saturated blue-green. In print color models (CMYK), cyan is one of the four primary ink colors. On screens, it reads as vibrant and electric.
Indigo
Indigo (#4B0082) sits between blue and violet on the visible light spectrum. It is one of the original seven colors of the rainbow as described by Isaac Newton, and it appears in numerous spiritual and luxury contexts.
Periwinkle
Periwinkle (#CCCCFF) is a lavender-blue pastel that has surged in popularity in recent years, appearing prominently in 2023–2024 design trends as a dreamy, nostalgic accent.
The Psychology of Blue Shades in Design
Color psychology studies the emotional and behavioral effects of color. Blue is uniquely powerful in this domain.
| Shade Category | Psychological Association | Common Design Use |
|---|---|---|
| Light Blues | Calm, purity, openness, trust | Healthcare, wellness, baby brands |
| Medium Blues | Confidence, clarity, communication | Tech, social media, retail |
| Dark Blues | Authority, professionalism, depth | Finance, law, government |
| Teal/Cyan | Freshness, creativity, modernity | Design, lifestyle, innovation |
| Electric/Bright Blue | Energy, excitement, attention | Sports, gaming, youth brands |
Research published in color psychology literature consistently shows that blue increases feelings of trust and reliability in viewers — which explains why approximately 33% of top global brands use blue as their primary color, including Facebook (Meta), Samsung, Ford, American Express, and PayPal.
How to Use Shades of Blue in Design Projects
Knowing the names and codes is only the beginning. Here’s how to apply shades of blue effectively:
Building a Blue Color Palette
A strong blue palette typically includes:
- A dominant blue (e.g., Royal Blue #4169E1) — used for primary CTAs, headers, or hero backgrounds
- A lighter tint (e.g., Alice Blue #F0F8FF) — used for backgrounds and spacious layouts
- A darker shade (e.g., Navy Blue #000080) — used for text and high-contrast elements
- An accent (e.g., Cerulean #007BA7 or Electric Blue #7DF9FF) — used for highlights and calls-to-action
Blue Combinations That Work
- Blue + White: Clean, clinical, trustworthy (healthcare, tech)
- Blue + Gold: Luxury, prestige, authority (finance, law)
- Blue + Orange: High contrast, energetic, sporty (sports brands, retail)
- Navy + Beige: Sophisticated, nautical, timeless (fashion, lifestyle)
- Cobalt + Coral: Modern, vibrant, creative (lifestyle, social media)
Accessibility Considerations
When using blue in digital design, always check contrast ratios. WCAG 2.1 (Web Content Accessibility Guidelines) requires a minimum contrast ratio of 4.5:1 for normal text. Dark blues like Navy (#000080) on white (#FFFFFF) achieve a ratio of approximately 15:1 — well above the threshold. Light blues like Sky Blue (#87CEEB) on white fall below the minimum and should not be used for body text.
How to Extract Any Shade of Blue from an Image
Sometimes you find the perfect shade of blue — in a photograph, a painting, a product image, or a screenshot — but you don’t know its HEX or RGB code. That’s exactly what ColorFromPic is designed to solve.
Step-by-Step: Extract a Blue Shade Using ColorFromPic.com
- Go to ColorFromPic
- Upload your image — any photo, screenshot, or design file containing the blue color you want to identify
- The tool analyzes the image and automatically extracts the dominant and secondary colors
- Click on any blue in the extracted palette to see its precise HEX, RGB, HSL, and CMYK values
- Copy the color code directly into your design software (Figma, Adobe Illustrator, Photoshop, CSS)
This is particularly useful when:
- Matching a brand’s exact blue from their website screenshots or logos
- Identifying the blue tones in a photographer’s edit style
- Building a palette inspired by a natural landscape photo (ocean, sky, mountains)
- Reverse-engineering a competitor’s color scheme
ColorFromPic makes color extraction instant and precise — no eyedropper tools, no guessing, no manual conversion.
FAQ: Shades of Blue
What is the most popular shade of blue?
The most popular shade of blue in design and branding is Navy Blue (#000080). It is the most-used blue in corporate identity, fashion, and interior design due to its versatility, authority, and timeless appeal. Royal Blue (#4169E1) is a close second in digital design contexts.
What is the HEX code for sky blue?
Sky blue’s HEX code is #87CEEB. Its RGB value is (135, 206, 235) and its HSL value is 197°, 71%, 73%. It is a W3C named CSS color and is frequently used in web design for its light, airy quality.
What is the difference between cobalt blue and royal blue?
Cobalt Blue (#0047AB) is darker and more deeply saturated, with a cooler, slightly greenish undertone. Royal Blue (#4169E1) is brighter and more vibrant, sitting closer to a pure blue with a slight violet lean. In practical terms, cobalt is more intense while royal blue is more balanced and universally flattering.
How many shades of blue are there?
There are hundreds of named shades of blue across various color systems. The CSS specification alone includes 30+ named blue colors. Pantone’s color system contains well over 200 blue-family shades. In total, across all naming systems, art traditions, and color libraries, there are likely over 500 distinct named shades of blue.
What shade of blue is best for websites?
For websites, the most effective and accessible shades of blue include Dodger Blue (#1E90FF) for CTAs and interactive elements, Navy Blue (#000080) for text and headers, and Alice Blue (#F0F8FF) for backgrounds. Always verify contrast ratios using WCAG 2.1 guidelines before finalizing any blue for web use.
What colors go well with shades of blue?
Shades of blue pair well with white (clean and crisp), gold and yellow (high contrast and prestigious), orange (complementary contrast on the color wheel), beige and cream (warm-cool balance), and gray (sophisticated and modern). The specific complementary color depends on the blue shade — warmer blues pair better with warm accents, while cooler blues work with neutrals and silvers.
What is the darkest shade of blue?
The darkest commonly referenced shade of blue is Oxford Blue (#002147), with an HSL lightness of just 14%. Other extremely dark blues include Prussian Blue (#003153) and Space Cadet (#1D2951). These shades are so dark they can appear nearly black in low-light or small-scale applications.
Conclusion
Blue is far more than a single color — it is a rich, layered spectrum of hues that spans everything from the faintest whisper of Alice Blue to the commanding depth of Oxford Blue. Understanding the specific names, HEX codes, RGB values, and emotional associations of each shade of blue gives you a powerful advantage in design, branding, art, and communication. Whether you need a trustworthy navy for a corporate identity, a calming sky blue for a wellness app, or a vibrant cobalt for a bold creative project, the right shade of blue is waiting for you.
The fastest way to find your perfect blue? Upload any image to ColorFromPic and let the tool do the work — extracting precise color codes from any blue you see in the real world. Start building your perfect blue palette today.
What’s your favorite shade of blue — and how do you use it in your projects? The answer might be just one image upload away.