Sky Shades
Every named color in the sky family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 49 colors shown below.
Quick facts (computed from this family's 49 members)
- Average lightness: 47%
- Average saturation: 56%
- 20 of 49 pass WCAG AA as normal text on white
- 30 of 49 pass WCAG AA as normal text on black
- Lightest named member: light blue
- Darkest named member: marine blue
- Most saturated member: DeepSkyBlue
The color science
The sky-blue band, roughly 195-210°, is the color of clear daytime sky specifically because of Rayleigh scattering — shorter (blue) wavelengths of sunlight scatter far more strongly off nitrogen and oxygen molecules in the atmosphere than longer (red/yellow) wavelengths, which is also why sunsets shift toward red/orange as sunlight travels through more atmosphere at a low angle, scattering away most of the blue before it ever reaches your eye at ground level. The scattering intensity itself is proportional to the inverse fourth power of wavelength, a relationship first worked out by Lord Rayleigh in 1871 — it's why violet light, which scatters even more strongly than blue, doesn't dominate the sky's apparent color instead: the sun emits less violet to begin with, and the human eye's cone sensitivity peaks well short of violet, so blue wins out perceptually even though violet is scattered more per photon. On a clear day at higher altitude, where less atmosphere sits between the observer and space, the sky reads as a deeper, more saturated blue for the same underlying reason in reverse — less scattering path length overall shifts the balance, which is part of why high-altitude and aviation photography often shows a noticeably richer sky-blue than the same scene from sea level. The same scattering principle explains why the sky whitens toward the horizon on a hazy day — light passing through a longer, particulate-laden path scatters across more wavelengths fairly evenly rather than favoring blue specifically, which desaturates the apparent color toward a pale, milky near-white the closer you look to the horizon line. This same physics is why the sky on the Moon or Mars looks nothing like Earth's — without a thick enough atmosphere to scatter sunlight, the lunar sky reads as black even at midday, and Mars's thin, dust-laden atmosphere scatters light very differently, producing its own well-documented butterscotch-toned daytime sky rather than any shade of blue.
Common uses in design
Sky blue is a near-universal choice for anything wanting to read as light, open, and trustworthy without blue's more corporate/serious associations at higher saturation — children's brands, weather apps, and airlines lean on it heavily, and it's one of the few hues that performs well as a large background fill without feeling heavy or oppressive across an entire page. Airlines in particular have used sky blue in livery and branding since well before digital design existed — it reads as calm and safe in an industry where reassurance is a genuine marketing priority, and several major national carriers have kept a sky-blue identity element largely unchanged across multiple broader rebrands specifically because it tests so consistently well with anxious flyers in focus-group research. In children's product design, sky blue pairs with soft yellow and white as one of the most common 'nursery palette' combinations, a convention that predates modern gender-marketing norms and traces back to simple weather and daytime imagery (sun, sky, clouds) rather than any deliberate color-psychology framework. Weather-forecasting apps and services lean on sky blue almost universally for clear-sky iconography specifically because it's the one color virtually every user already associates unambiguously with good weather before they've read a single word of the forecast, making it one of the rare UI colors that functions as its own instantly legible icon. Health and wellness apps have picked up the same association secondhand, using sky-blue accents to suggest calm, open-air, outdoor-adjacent wellbeing even in features that have nothing literally to do with weather or the outdoors.
Accessibility notes
Pale sky blues are popular as background fills specifically because they retain strong contrast against dark text while still reading as 'colored' rather than gray — a light sky-blue background at 85%+ lightness with near-black text routinely clears AAA, which is not true of equally pale versions of most warmer hues like yellow or orange at the same lightness value. Sky blue also sits in one of the more forgiving zones for the most common color-vision deficiencies: since red-green confusion (the overwhelming majority of color blindness cases) doesn't interfere much with blue discrimination, a sky-blue element paired with a warmer accent color is generally a safer combination than a red/green pairing at similar lightness and saturation. The rarer tritanopia (blue-yellow deficiency) is the one condition worth checking sky-blue elements against specifically, since it can make sky blue and pale yellow harder to tell apart than they appear to someone with typical color vision — worth a check if a product's palette leans on both hues as separate signals. Sky blue's generally strong contrast performance at high lightness also makes it a popular choice for text links and interactive elements set against a white or near-white surface in interfaces that want a softer alternative to a fully saturated primary blue for lower-emphasis actions. Because sky blue occupies a fairly narrow hue band relative to its neighbors, a design system reserving it as a distinct semantic step from a more saturated primary blue benefits from checking both against the same background at the actual font sizes used in production, rather than relying on a single spot-check swatch comparison.
Named examples
SkyBlue and LightSkyBlue are the two directly CSS-named colors in this range; DeepSkyBlue, despite the name, sits more saturated and slightly further toward pure blue than either, making it a genuinely distinct color rather than just a darker version of the same swatch. PowderBlue, while sometimes grouped casually with sky blue, is named for laundry bluing powder rather than the sky itself, and sits at a paler, chalkier lightness than the true sky-blue swatches — a good example of how two colors can look similar in a quick glance while having entirely different real-world naming origins. The xkcd survey set adds further granularity in this exact range with names like 'baby blue' and 'robin's egg,' the latter a genuine reference to the pale blue-green shell color of American robin eggs — a real ornithological source distinct from the meteorological reference behind 'sky blue' itself. Cornflower blue, technically belonging to a slightly more saturated part of the blue family, is nonetheless frequently grouped with sky blue in casual conversation, another example of how loosely people apply hue-family boundaries outside a formal color-classification context.
Building a sky design-token scale
Sky-blue tokens are common as onboarding, empty-state, and illustration backdrop colors precisely because they read as light and welcoming without the visual weight of a saturated primary blue — a pale sky fill behind an empty-state illustration is a near-cliché of modern SaaS product design at this point, common enough that some design teams deliberately avoid it just to not look interchangeable with every other dashboard product on the market. If you're building a dedicated sky-blue token, keep it distinct enough from your primary/interactive blue that users don't confuse a decorative background with a clickable element — a difference of at least 15-20% saturation from your link-blue is a reasonable working rule to follow. Because sky blue reads as calm rather than energetic, it's a poor choice for a primary call-to-action button (where you generally want a more saturated, attention-grabbing hue) but a strong choice for secondary surfaces, card backgrounds, and section dividers that need to feel considered without competing with the actual interactive elements on the page.