Blue is the most searched color name by a significant margin, and the reason is simple: it covers more distinct visual territory than any other color. Navy and sky blue look nothing alike. Cobalt and powder blue are in different worlds. Teal and indigo share the blue family but read as completely different colors in a palette. "Blue" is less a color and more a category containing a dozen recognizable sub-families.
The blue color names used in design, fashion, and everyday description draw from a wide vocabulary, some from CSS named colors, some from fashion history, some from physics and pigment tradition. The color name finder matches any blue hex to the nearest CSS named color using perceptual Delta-E matching, which is more reliable than visual guessing when blues are close in hue but different in saturation or depth.
This guide covers every major blue shade family, the specific names used in design and everyday vocabulary, hex codes, and the CSS named blues organized as a complete reference.
How Blue Color Names Are Organized
Blue sits between green and violet on the color spectrum. It can lean green (teal, cyan) or lean purple (indigo, blue-violet), and everything between is "blue." This means blue has two directional axes: green-leaning (cool) and purple-leaning (warm by comparison to pure blue).
Within pure blue, the three organizing dimensions are depth (light to dark), saturation (vivid to muted), and the lean toward purple or green. A sky blue and a steel blue can be the same depth but read as completely different because one is saturated and clear while the other is muted and gray-tinged.
The most practical way to think about blue naming: start with depth. Is it a light blue, a medium blue, or a dark blue? Then add the lean: does it read as warm (purple-adjacent), neutral (pure blue), or cool (green-adjacent)? Then add saturation: is it vivid or muted? These three coordinates locate any blue in the naming system.
Light Blue Color Names: Powder Blue, Baby Blue, and Pale Shades
Light blues are high-brightness, usually low-to-medium saturation. They carry a soft, airy, or delicate visual quality.
Alice blue: CSS aliceblue is #F0F8FF, a near-white with a faint blue tint. It is named after Alice Roosevelt Longworth, who popularized the color. Reads as white with a blue quality rather than a distinct blue in most contexts.
Lavender (blue variant): CSS lavender is #E6E6FA, a pale blue-purple. Its mix of blue and purple makes it read as cooler than pure pale blue. It sits at the light blue-purple boundary.
Powder blue: CSS powderblue is #B0E0E6, a soft pale blue with a very slight warm quality. It reads as a clear, recognized light blue. Used in baby and nursery design, healthcare, and soft brand palettes.
Baby blue: Not a CSS named color. Baby blue sits around #89CFF0 to #A2D5E9, a vivid pale blue that reads as clearly blue without being too saturated. One of the most instantly recognizable light blue names.
Light blue: CSS lightblue is #ADD8E6, a soft pale blue similar to powderblue with a slight green quality. Among the most usable light-blue CSS named colors for backgrounds and gentle accents.
Light sky blue: CSS lightskyblue is #87CEFA, a vivid pale blue. Lighter and more vivid than powderblue.
Sky blue: CSS skyblue is #87CEEB, a vivid, clear light blue. This is the color most people picture when imagining the midday sky. It sits in the medium-light range with clear saturation.
Periwinkle: No CSS named periwinkle exists. It falls around #CCCCFF, a pale blue with a visible purple quality. Periwinkle became a prominent trend color in the early 2020s. It sits between lavender and baby blue.
Vivid Mid-Blue Color Names: Cobalt, Royal, and Cornflower
Mid-blues are the most versatile family: vivid enough to read clearly, not so dark that they require light-colored type.
Cornflower blue: CSS cornflowerblue is #6495ED, a medium vivid blue with a slight warm quality. Named after the cornflower, it has a friendly, accessible quality. Widely used in link colors, icon libraries, and data visualization.
Dodger blue: CSS dodgerblue is #1E90FF, a vivid bright blue. More saturated and slightly lighter than cornflower blue. Dodger blue is the closest CSS named color to the Bootstrap primary blue (#007BFF).
Bootstrap blue (#007BFF): The default primary action color in Bootstrap CSS framework versions 4 and 5. Not a CSS named color. Nearest CSS match: dodgerblue (#1E90FF), which is similar in vividity but lighter. #007BFF reads as a clear, authoritative medium blue without the darkness of royal blue.
Royal blue: CSS royalblue is #4169E1, a medium-vivid blue with a slight purple warmth. It reads as formal, authoritative, and classic. Used in academic institutions, financial services, and national flags. Royal blue is slightly lighter and more purple than cobalt.
Cobalt: No CSS named cobalt. It falls around #0047AB, a vivid deep blue with high saturation and no purple quality. Cobalt is deeper than royal blue and reads as stronger and more saturated. Used in ceramic glazes, fine art, and premium brand palettes.
Sapphire: A medium-to-deep blue with a slight violet quality. Approximate hex: #0F52BA. CSS royalblue is the closest named color, but sapphire sits between royalblue and cornflowerblue in undertone. Full coverage in the gemstone and metallic color names guide.
Deep sky blue: CSS deepskyblue is #00BFFF, a vivid cyan-leaning bright blue. It is more saturated and cooler than dodgerblue, with a visible green component.
Blue-Purple Color Names: Indigo, Periwinkle, and Violet-Adjacent Blues
At the blue-purple boundary, blue acquires a warmer quality from the red component in purple.
Indigo: CSS indigo is #4B0082, a deep blue-purple that reads as nearly violet. It is darker and more purple-dominant than blue and sits between blue and violet on the spectrum. In the rainbow color sequence (ROYGBIV), indigo marks the transition from blue to violet. Indigo is also listed in the primary and secondary color names guide in the rainbow section.
Slate blue: CSS slateblue is #6A5ACD, a medium blue with a vivid purple lean. Despite the name, it reads as more purple than the neutral gray-blue that "slate" implies in most design contexts.
Medium slate blue: CSS mediumslateblue is #7B68EE, a slightly lighter version of slateblue with the same vivid purple-blue quality.
Blue-violet: CSS blueviolet is #8A2BE2, a deep vivid blue-purple that sits well into the violet range. It is the most purple-dominant CSS named "blue" and reads primarily as vivid purple.
Ultramarine: No CSS named ultramarine. It sits around #3F00FF to #120A8F, a deep vivid blue with a slight purple quality. Historically the most expensive blue pigment, made from lapis lazuli. In modern design, ultramarine describes any deep saturated blue with a purple lean.
Lapis blue: A deep blue named after lapis lazuli stone, approximately #26619C. Less purple than ultramarine, more saturated than navy.
Dark Blue Color Names: Navy, Midnight, and Deep Blues
Dark blues are the most formal, authoritative end of the spectrum. They function as near-neutral background colors while maintaining clear blue identity.
Navy: CSS navy is #000080, a pure blue at very low brightness. One of the most consistently defined color names across industries: navy means dark blue in fashion, interior design, branding, and everyday conversation. Navy is reliable, formal, and works with almost every other color family.
Dark blue: CSS darkblue is #00008B, essentially the same depth as navy but very slightly brighter. The difference is imperceptible in most contexts.
Medium blue: CSS mediumblue is #0000CD, a deep pure blue, brighter than navy but still clearly in the dark range. Less commonly used as a named reference than navy or royalblue.
Midnight blue: CSS midnightblue is #191970, a near-black blue with a warm purple quality. Darker than navy and more dramatic. Works as a sophisticated alternative to black in dark palettes.
Dark navy: Not a CSS named color. Dark navy describes shades approximately #0A1628 to #0D2137, which sit between navy and midnight blue in depth. Used in high-end fashion and suiting where navy reads as too standard and black reads as too stark.
Air force blue: A medium-dark blue used in military uniform naming, approximately #5D8AA8. Distinctly lighter than navy.
Blue-Gray Color Names: Slate, Steel Blue, and Dusty Blues
Blue-grays are the most versatile blues for UI design and backgrounds. The gray component reduces their visual intensity while maintaining a blue identity.
Steel blue: CSS steelblue is #4682B4, a medium vivid blue-gray. Despite its muted quality compared to cobalt or royal blue, it reads as a clearly distinct medium blue. Used widely in data visualization and dashboard design because it reads clearly at small sizes.
Cadet blue: CSS cadetblue is #5F9EA0, a medium blue-green-gray. It sits at the boundary between blue-gray and teal-gray and has a more complex, slightly warm quality than steelblue.
Light steel blue: CSS lightsteelblue is #B0C4DE, a pale, muted blue-gray. One of the most usable light-blue CSS colors for secondary backgrounds and subtle UI elements.
Slate gray: CSS slategray is #708090, a medium gray with a clear blue lean. This is more gray than blue but reads as a blue-gray in context. One of the standard references for a neutral blue-gray.
Dusty blue: Not a CSS named color. Dusty blue describes a muted, slightly gray mid-blue, approximately #8DA7BE. It reads as more sophisticated and less assertive than cornflowerblue. Widely used in Scandinavian-influenced interior design and as a secondary palette color in clean UI systems.
Denim: A medium blue-gray named after the indigo-dyed cotton fabric. Approximate hex: #1560BD to #6F8FAF depending on wash. Light denim sits around #6F8FAF; dark denim sits around #1560BD.
Slate blue (design version): In everyday design use (as opposed to the CSS slateblue which reads as purple), slate blue describes a medium blue with a gray quality, approximately #4F6F8F. This is closer to steelblue than to CSS slateblue.
Blue-Green Color Names: Teal, Cyan, and Aqua
The blue-green family is covered in detail in the green color names guide, but the main blue-adjacent members are worth including here.
Teal: CSS teal is #008080, an equal-parts blue-green at medium depth. Teal is one of the most versatile cool colors in design and sits exactly at the blue-green boundary.
Cyan: CSS cyan is #00FFFF, the fully saturated equal-parts blue-green at maximum brightness. Same as CSS aqua. It is one of the six CSS primary/secondary colors and appears in print (CMYK) as one of the ink primaries.
Aqua: CSS aqua is identical to cyan (#00FFFF). In everyday design vocabulary, aqua often describes a medium cyan-blue-green, closer to #40A0A0 than the pure CSS aqua.
Turquoise: CSS turquoise is #40E0D0, a vivid medium cyan-green. More vivid and warmer than teal.
Cerulean: A vivid sky blue with a slight cyan quality. CSS has no named cerulean. Approximate hex: #007BA7 to #2A52BE depending on interpretation. Cerulean implies an open, sky-like quality distinct from the deeper cobalt or the paler sky blue.
CSS Named Blue Colors: The Complete Reference
| CSS Name | Hex | Visual Quality |
|---|---|---|
| aliceblue | #F0F8FF | Near-white pale blue tint |
| lavender | #E6E6FA | Pale blue-purple |
| lightblue | #ADD8E6 | Soft pale blue |
| powderblue | #B0E0E6 | Soft pale blue, slight warmth |
| lightskyblue | #87CEFA | Vivid pale blue |
| skyblue | #87CEEB | Clear medium-light blue |
| lightsteelblue | #B0C4DE | Pale muted blue-gray |
| deepskyblue | #00BFFF | Vivid bright cyan-blue |
| cornflowerblue | #6495ED | Medium vivid warm blue |
| dodgerblue | #1E90FF | Vivid bright pure blue |
| steelblue | #4682B4 | Medium muted blue-gray |
| royalblue | #4169E1 | Medium vivid warm blue |
| cadetblue | #5F9EA0 | Medium blue-green-gray |
| slategray | #708090 | Medium gray with blue lean |
| mediumblue | #0000CD | Deep vivid pure blue |
| blue | #0000FF | Fully saturated pure blue |
| mediumslateblue | #7B68EE | Medium vivid blue-purple |
| slateblue | #6A5ACD | Medium vivid purple-blue |
| darkblue | #00008B | Very dark pure blue |
| navy | #000080 | Very dark pure blue |
| midnightblue | #191970 | Near-black warm blue |
| indigo | #4B0082 | Deep blue-purple |
| blueviolet | #8A2BE2 | Deep vivid purple-blue |
| teal | #008080 | Medium dark blue-green |
| cyan / aqua | #00FFFF | Fully saturated blue-green |
| turquoise | #40E0D0 | Vivid medium blue-green |
Choosing Blue Shades for Design Palettes
Blue is the most forgiving color family in design because so many blues read as trustworthy, reliable, and calm across very different audiences and industries. The practical challenge is differentiation: when blue is the default choice for every tech company, finance brand, and healthcare system, selecting the right shade becomes the work.
For technology and software, cobalt, royalblue, and dodgerblue read as confident and modern. Bootstrap's #007BFF became the default action blue in web interfaces for a reason: it is vivid enough to read as interactive but not so saturated that it reads as aggressive.
For premium and financial brands, navy, dark navy, and midnight blue read as trustworthy, experienced, and conservative in the right way. Paired with gold or warm white, dark blues carry authority without coldness.
For healthcare and wellness, powder blue, sky blue, and medium slate blue read as calm and clinical. The blue-grays (steel blue, cadet blue, light steel blue) add sophistication without the aggression of fully saturated blues.
For fashion and interior design, the muted blue-grays (dusty blue, cadet blue, steel blue) and the deep complex blues (teal, indigo, midnight blue) are more versatile as primary palette anchors than the fully saturated mid-blues.
The palette generator generates complementary, analogous, and triadic combinations from any blue hex, showing which blues pair naturally with oranges, greens, and neutrals. For identifying any specific blue's CSS named equivalent, the color name finder returns the closest match with its hex code and color name. All color tools are in the color tools section.
