Shades of Blue Color Names: Every CSS Blue with HEX Codes

You need a blue for a product interface. You type color: blue and get a blinding primary blue that belongs on a flag or a crayon box, not a UI element. The blue you were looking for is probably royalblue, steelblue, cornflowerblue, or dodgerblue. CSS has nineteen named blues, more than any other single-hue color group in the system, and the range covers near-black navy through vivid primary blue through pale near-white aliceblue. Knowing where each one sits saves the trial-and-error of cycling through all of them.

The Color Name Finder identifies the closest CSS blue to any custom HEX you are working from. This guide covers all nineteen named CSS blues, what distinguishes each one at the RGB level, and why blue ended up with more named shades than any other color in the CSS system.

The Nineteen Named Blue Colors in CSS

The full CSS blue family, ordered from darkest to lightest:

Blue colors in CSS are defined by a dominant blue channel. The variation in the red and green channels is what produces the full range from pure cold blue through warm, muted steel-blues to near-white pale tints. A blue with no red or green reads as maximally cold and saturated. As red and green channels rise together, the blue becomes lighter and more neutral.

Very Dark Blues: Navy, Darkblue, Midnightblue, and Mediumblue

Navy (#000080) is a pure dark blue with RGB R:0, G:0, B:128. Its zero red and green channels mean it carries no warmth at all. The name comes from the dark blue used in British Royal Navy uniforms in the 18th century. CSS navy is a formal, authoritative dark blue used for headers, primary text, and professional design contexts where the color needs to read as structured rather than expressive.

Darkblue (#00008B) is nearly identical to navy, with RGB R:0, G:0, B:139. The only difference is a blue channel 11 points higher. Both look near-black at small sizes and dark blue at larger sizes. In practice, the two are interchangeable for most design purposes. Choosing between them is a matter of testing which reads better in context.

Midnightblue (#191970) has RGB R:25, G:25, B:112. Its small equal red and green contributions at 25 each give it a faint warmth that navy and darkblue lack entirely. It reads as a deep, warm-toned dark blue with a slight purple-gray undertone. The name references the color of a clear night sky. Midnightblue is often preferred over navy when a dark blue needs to feel slightly less cold or institutional without shifting into purple territory.

Mediumblue (#0000CD) has RGB R:0, G:0, B:205. Its higher blue channel makes it visibly brighter than navy and darkblue while remaining a clearly dark, saturated blue with no warmth. It is the darkest vivid blue before reaching the pure maximum-saturation entry.

Pure Blue and Vivid Blues: Royalblue, Dodgerblue, and Cornflowerblue

Blue (#0000FF) is a primary RGB color with R:0, G:0, B:255. Both red and green are at zero and blue is at maximum. This produces the most intense, saturated cold blue possible on screen. CSS blue is rarely useful in UI design for large areas because its intensity is visually demanding and reads as a signal or a hyperlink rather than a calm design element. It appears in alerts, flags, and accent elements where the signal quality is the point.

Royalblue (#4169E1) is the most practically useful blue in the vivid range. Its RGB is R:65, G:105, B:225. The moderate red (65) and green (105) channels warm it enough to avoid the coldness of pure blue while keeping it clearly in the blue range. Royalblue is the CSS blue that most closely matches what people mean when they say "royal blue" in everyday speech: a vivid, confident, formal blue. For buttons, link colors, and primary UI elements, royalblue is a much better starting point than plain CSS blue.

Dodgerblue (#1E90FF) has RGB R:30, G:144, B:255. Named after the Los Angeles Dodgers baseball team uniform color, it is a vivid, bright blue that sits between royalblue and deepskyblue in hue. The high green channel at 144 makes it lighter and slightly more cyan-adjacent than royalblue. Dodgerblue is one of the more vivid CSS blues that still reads as clearly blue rather than cyan.

Cornflowerblue (#6495ED) has RGB R:100, G:149, B:237. The higher green channel at 149 gives it a distinctly lighter and warmer quality than royalblue or dodgerblue. Cornflowerblue is named after the cornflower plant (Centaurea cyanus), a vivid blue wildflower that blooms in European grain fields. It reads as a lighter, airier blue and is common in more casual or friendly interface contexts than royalblue. The colors that start with c guide covers cornflowerblue as part of the full C-letter color group alongside coral, cyan, and crimson.

Middle Blues: Steelblue, Cadetblue, and Lightsteelblue

Steelblue (#4682B4) has RGB R:70, G:130, B:180. All three channels are present in meaningful amounts, which gives it a grayish, muted quality rather than a vivid one. Steelblue reads as a weathered, industrial blue: not vivid, not cold, but solid and dependable. It is the blue most people picture when they think of a blue-gray paint color or a tinted metal surface. The colors that start with s guide covers steelblue alongside skyblue, sienna, salmon, and the other S-letter CSS colors.

Cadetblue (#5F9EA0) has RGB R:95, G:158, B:160. The nearly equal green (158) and blue (160) channels give it a distinctly teal quality that separates it from the other mid-range blues. Cadetblue reads as a muted, gray-teal: not as vivid as teal, not as blue-leaning as steelblue. The name comes from the gray-blue color of traditional military cadet uniforms. It is featured in the cool color names guide because of its interesting name origin and muted versatility in design.

Lightsteelblue (#B0C4DE) has RGB R:176, G:196, B:222. All three channels are elevated and relatively close together, producing a pale, muted, cool gray-blue. Lightsteelblue reads as a very light version of steelblue: the same dependable quality but much lighter and less saturated. It works well as a subtle background tint when a design needs a cool neutral that carries a faint blue character without committing to a clearly blue surface.

Sky Blues: Deepskyblue, Skyblue, Lightskyblue, and Lightblue

Deepskyblue (#00BFFF) has RGB R:0, G:191, B:255. Its zero red channel with high green (191) and blue (255) produce a vivid, electric cyan-blue. Deepskyblue reads as the most saturated, vivid light blue in CSS: the color of a clear midday sky at maximum intensity. On dark backgrounds it reads as almost neon. On white backgrounds it reads as a sharp, clean sky blue that dominates other adjacent colors in the palette.

Skyblue (#87CEEB) has RGB R:135, G:206, B:235. All three channels are elevated and relatively close together, producing a light, muted, natural blue. Skyblue reads as the color of a hazy or overcast sky rather than a clear one. It is lighter and more muted than deepskyblue and works as a gentle background or secondary accent color where the design needs a recognizable blue without vividity.

Lightskyblue (#87CEFA) has RGB R:135, G:206, B:250. It is nearly identical to skyblue but with a blue channel 15 points higher. Lightskyblue reads very slightly more vivid and cooler than skyblue. Both are nearly interchangeable in most design contexts, and choosing between them usually comes down to which specific HEX value matches a brand color more closely.

Lightblue (#ADD8E6) has RGB R:173, G:216, B:230. The higher and more balanced channels produce a very pale, neutral blue: lighter and more muted than skyblue. Lightblue reads as the blue of faded denim or a washed-out sky. It is one of the most commonly used pale blues in interface design because its neutrality makes it easy to combine with most other colors in a palette.

Pale Blues: Powderblue and Aliceblue

Powderblue (#B0E0E6) has RGB R:176, G:224, B:230. The high and close channel values produce a pale, soft blue with a slight cyan tint. Powderblue reads as the palest natural-looking blue in CSS, similar to faded sky-blue fabric after many washes. It is a slightly more color-forward option than aliceblue for backgrounds that need a definite blue character without vividity.

Aliceblue (#F0F8FF) is the palest CSS blue, with RGB R:240, G:248, B:255. It is named after Alice Roosevelt Longworth, the eldest daughter of President Theodore Roosevelt. The naming is documented in the history of the X11 color list, the Unix-era color system from which the CSS named colors were built. The colors that start with a guide covers aliceblue alongside aqua, aquamarine, antiquewhite, and azure.

CSS aliceblue reads as nearly white on most screens. The blue character is only visible when placed next to pure white (#FFFFFF). It functions as a very subtle cool background tint that prevents an interface from reading as purely white without introducing any perceptible color at normal viewing distances.

Teal and Darkcyan: Where Blue Meets Green in CSS

Teal (#008080) has RGB R:0, G:128, B:128. The equal green and blue channels at 128 with zero red place it exactly at the midpoint between blue and green. CSS teal reads as a classic blue-green: the color of tropical ocean water and the standard teal used in design palettes. It sits at the border of the color families grouping between blue and green, and most design tools categorize it with the cool colors rather than with either pure family.

Darkcyan (#008B8B) has RGB R:0, G:139, B:139. The equal channels at 139 make it marginally lighter than teal in both the blue and green channels. Both colors look nearly identical without direct comparison. The practical choice between them is the same as the choice between navy and darkblue: test in context and use whichever matches your target color more closely.

Teal and darkcyan are included in the CSS blue family by convention even though their green channel equals their blue channel. At any given luminance, a color with equal green and blue sits at the blue-green hue boundary. Neither reads as definitively green because the zero red channel prevents the warm-green quality that colors like forestgreen or seagreen carry.

Why Blue Has More Named Shades Than Any Other CSS Color

The nineteen named CSS blues represent the largest single-hue group in the CSS named color system. The explanation is historical rather than design-driven. The CSS named color list was assembled largely from the X11 color system, a naming convention that originated in Unix-based graphical workstations during the 1980s.

X11 colors were developed by engineers who spent most of their working hours looking at blue-tinted terminal screens and graphical interfaces with cool-toned defaults. Blue-gray backgrounds were standard for most Unix desktop environments during that era. The large number of blue names in X11 reflects what that community needed to distinguish precisely: the many gradations between near-black navy and near-white aliceblue.

The CSS specification inherited most of the X11 blue names unchanged. The result is a blue family with more named subdivisions than any other hue, not because blue is more important as a design color, but because the naming happened in a context where precise blue distinctions mattered most to the people doing the naming. This historical depth is one reason why the CSS blue family is more useful to designers than most other color families: there is a named blue for almost every shade a typical design calls for.

Finding the Closest CSS Name for Any Blue HEX

Nineteen named blues means nineteen possible nearest neighbors for any custom blue HEX. Paste your HEX into the Color Name Finder to get the perceptually closest CSS match using Delta-E distance in CIE Lab color space. For dark, saturated blues the tool returns navy, darkblue, or midnightblue. For vivid medium blues it returns royalblue, dodgerblue, or cornflowerblue. For muted or pale blues it returns steelblue, skyblue, lightblue, or powderblue.

For a complete blue scale from any starting point, the tints and shades generator generates lighter and darker variants. Starting from royalblue gives a formal, vivid scale. Starting from steelblue gives a muted, industrial range. Starting from deepskyblue gives a vivid range from near-white through electric blue to near-black navy. The color section has all the tools for building a complete blue palette from any point in the CSS blue family.