Blue Shades
Every named color in the blue family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 62 colors shown below.
Quick facts (computed from this family's 62 members)
- Average lightness: 48%
- Average saturation: 74%
- 40 of 62 pass WCAG AA as normal text on white
- 24 of 62 pass WCAG AA as normal text on black
- Lightest named member: light periwinkle
- Darkest named member: dark navy blue
- Most saturated member: vivid blue
The color science
Blue spans roughly 210-240° and is, cross-culturally, one of the last basic color terms to emerge in a language's vocabulary — many ancient languages (Homeric Greek among the most-cited examples) had no dedicated word for blue, describing the sea as 'wine-dark' instead, likely because stable blue pigments were genuinely rare in nature and hard to synthesize until ultramarine (ground lapis lazuli, historically more expensive than gold by weight) and later Prussian blue (the first modern synthetic pigment, discovered accidentally in Berlin around 1706) became widely available to painters. The sky and sea genuinely aren't blue pigments at all, which is part of the linguistic puzzle — both derive their blue appearance from light-scattering physics (Rayleigh scattering for sky, a mix of scattering and selective absorption for water) rather than from a reflective blue surface pigment the way a blue flower or blue mineral works, making blue historically one of the hardest hues to reliably reproduce as an actual applied pigment even after cultures had a word for it. Egyptian blue, synthesized as early as 2500 BCE from ground quartz, lime, and copper compounds, is generally credited as the first known synthetic pigment of any color, developed specifically to work around the scarcity of stable natural blue mineral sources like lapis lazuli.
Common uses in design
Blue is the single most-used corporate brand color worldwide — it tests as the most broadly 'liked' color across genders and cultures in repeated preference surveys conducted over decades, and it carries strong trust/stability associations that made it the default for banking, tech, and healthcare branding, to the point that standing out now often means deliberately avoiding it rather than reaching for it as the safe choice. Blue also remains the most consistently 'favorite color' response across large-scale international preference surveys spanning multiple decades and cultural contexts, one of the more robust, frequently replicated findings in the color-psychology research literature. Because of that broad, low-risk appeal, blue is also the most common default choice when a team genuinely can't agree on a brand color internally — a pragmatic, if somewhat uninspired, resolution to color-selection disagreements that shows up often enough in practice to be a recognized pattern among brand designers. Government and institutional branding also leans on blue heavily worldwide, independent of any specific political affiliation, largely for the same broad-trust reasons that drive its dominance in corporate branding more generally.
Accessibility notes
Blue is the safest hue for colorblind accessibility relative to red and green, since the blue-cone deficiency (tritanopia) is far rarer than red-green deficiencies — but blue text on dark backgrounds needs care regardless, since darker/more saturated blues can drop below AA contrast on near-black backgrounds even though they look 'bright' against white where the comparison is easier to eyeball correctly. A common real-world mistake is testing a blue link color only against a light background and then reusing the identical hex on a dark-mode surface without a separate check, where the same value can fail even though it clearly passed on light mode. Because tritanopia is genuinely rare, most accessibility guidance for blue focuses more on plain luminance contrast than on hue-confusion risk, the opposite emphasis from red and green, where hue confusion is the dominant, much more common concern.
Named examples
RoyalBlue, DodgerBlue, and MidnightBlue span very different real references within one family: royal blue traces to a (likely apocryphal but long-repeated) 18th-century English competition to dye a gown for Queen Charlotte, dodger blue is named directly after the Los Angeles Dodgers' uniform color, and midnight blue is simply the near-black blue of a clear night sky at its darkest. CornflowerBlue and SteelBlue extend the family further, the former named for the wildflower and the latter for the cool gray-blue sheen of worked steel — two more genuinely separate material and botanical references within the same broad hue band. LightBlue and PowderBlue, both much paler and lower-saturation, sit near enough to the separate sky-blue family's edge that a viewer could reasonably call either one 'light blue' without being wrong.
Building a blue design-token scale
Because blue is so heavily claimed as the default link/interactive-element color on the web (a convention dating back to the earliest browsers' default #0000EE visited/unvisited link colors), most design systems reserve one specific blue exclusively for interactive elements and keep any decorative or brand blue meaningfully different from it — reusing the exact link blue for a non-clickable badge or icon is one of the more common accidental-affordance mistakes in web design, since users have decades of trained expectation that blue, underlined text is clickable. A full blue token ramp (Tailwind runs blue-50 through blue-950) typically anchors its mid-tone step to whatever blue passes AA against both the product's light and dark surface colors, then derives the rest from there mathematically. Because blue is used so heavily across both brand identity and interactive-element conventions at once, a mature product's blue usage is worth auditing periodically to confirm the two roles haven't quietly drifted into using the same or a near-identical value, which reintroduces exactly the accidental-affordance risk described above even in a design system that originally kept them properly distinct.