Sky blue carries the hex code #87CEEB, which resolves to rgb(135, 206, 235) and hsl(197, 71%, 72%). It sits at 197° on the color wheel, in the cyan-leaning stretch of blue, with green and blue channels running well ahead of red.
At 72% lightness sky blue reaches only 1.74:1 against white, so it fails every text contrast requirement, while on black it hits 12.06:1 and clears AAA comfortably. You’ll get every code format, the computed palettes, the four elements where it belongs, and the shade you need when sky blue has to be read rather than seen.
What Is the Color Sky Blue?
Sky blue is a light, desaturated cyan-blue defined by the CSS keyword skyblue, which maps to #87CEEB exactly. Lightness reads 72% and saturation 71%, which is the combination that makes it feel airy rather than electric.
The full code set for #87CEEB:
- HEX: #87CEEB
- RGB: rgb(135, 206, 235)
- RGBA: rgba(135, 206, 235, 1)
- HSL: hsl(197, 71%, 72%)
- HSB: 197, 43, 92
- CMYK: 43, 12, 0, 8
The HSB reading tells you more about how it behaves. Saturation reports 43% in the brightness model against 71% in HSL, and that gap is the signature of a light tint rather than a pure hue.
CSS ships two near-identical keywords. skyblue is #87CEEB and lightskyblue is #87CEFA, differing only in the blue channel by 15 points, which is close enough that neither name reliably communicates which value you meant.
What Does Sky Blue Mean in an Interface?
Sky blue reads as calm, informational, and non-urgent, which is the opposite of what red and orange do. Interfaces lean on it for informational states: tips, notices, “did you know” callouts, and anything the user should absorb rather than act on immediately.
That places it at the bottom of the severity ladder. Error sits at red, warning at orange, success at green, and information at blue, and sky blue is the light-surface end of that fourth slot.
Blue is also the least culturally contested hue in interface work. It carries broadly consistent associations across markets, which is part of why so many products default to it for links and primary actions.
Sky blue specifically trades authority for approachability. A deep navy reads as institutional while sky blue reads as friendly, and that difference decides which one belongs in a consumer onboarding flow.
Its weakness is exactly that lightness. A color this pale can’t carry the weight of a primary action, so treat it as a supporting value and let a deeper blue take the interactive load.
How Does Sky Blue Appear on Digital Screens?
Sky blue renders consistently across panels because it sits comfortably inside the sRGB gamut with no channel at an extreme. That stability is one of its practical advantages over saturated blues, which clip on narrow-gamut displays.
The contrast numbers set the constraints:
- #87CEEB on white: 1.74:1, fails everything
- #87CEEB on black: 12.06:1, passes AAA
- Black text on #87CEEB: 12.06:1, passes AAA
- White text on #87CEEB: 1.74:1, fails
- Dark variant #659AB0 on white: 3.09:1, large text and non-text only
Direction of contrast decides everything. Sky blue makes an excellent background for dark text and a poor foreground on light surfaces, which reverses how most designers instinctively reach for a blue.
Even the dark variant falls short. At #659AB0 you clear the 3:1 non-text floor and still miss AA for body copy, so a sky blue border works and sky blue link text doesn’t.
Push to #548193 or deeper for readable text on white. The shade at #446776 reaches 6.4:1 and passes AA while keeping the cyan character intact.
Ambient light shifts it noticeably. Sky blue picks up a green cast under warm indoor lighting and a violet cast under cool office lighting, so review it on the surface it will actually ship on.
What Are the Shades of Sky Blue?
Shades come from mixing black into #87CEEB while holding hue near 197°:
- #76B4CE
- #659AB0
- #548193
- #446776
- #334D58
- #22343B
- #111A1D
Two steps carry the weight. #659AB0 is the first that clears 3:1 for borders and large text, and #446776 is the first that passes AA for body copy at 6.4:1.
Tints run toward white through #92D3EC, #9CD7EE, #A7DBF0, #B2E0F2, #BCE4F4, #C7E8F5, #D1EDF7, and #DCF1F9. Those pale steps handle info banner fills and selected-row backgrounds where the base value would dominate.
Named neighbors sit very close and all fail on white:
- Light sky blue (#87CEFA): the nearest, 1.72:1
- Light blue (#ADD8E6): lighter and less saturated, 1.53:1
- Powder blue (#B0E0E6): paler still, 1.43:1
- Pale turquoise (#AFEEEE): shifted toward cyan, 1.29:1
- Cornflower blue (#6495ED): deeper and more violet, 2.97:1
What UI Elements Work Best with Sky Blue?
Sky blue belongs on surfaces and accents that host dark content rather than on content sitting over light surfaces. The 12.06:1 for black text on it is the number that opens doors, and the 1.74:1 against white is the number that closes them.
That rules out link text, body copy, functional borders at the base value, and any button with a white label. Four element types are where sky blue genuinely performs.
Buttons and CTAs with Dark Labels
Sky blue buttons work when the label is near-black. At 12.06:1 the text clears AAA, while white on the same fill fails at 1.74:1, and reversing that pairing is the most common sky blue mistake in production.
Reserve it for secondary actions. Sky blue lacks the visual weight for a primary CTA on a light page, so let a deeper blue take that slot and use sky blue for the alternative path.
Outline variants need the darker shade. A #87CEEB border on white misses the 3:1 non-text minimum, so switch the stroke to #659AB0.
Info Banners and Status Badges
Informational states are sky blue’s clearest semantic job. Tips, notices, feature announcements, and neutral system messages all belong in the fourth slot of the severity ladder, below error, warning, and success.
Build the banner from a tint rather than the base. A #DCF1F9 fill with #334D58 text and a #659AB0 left border gives you a readable notice where a solid sky blue fill would flatten.
Keep it visually distinct from your success color. Blue and green sit close enough that a rushed user reads them as the same state, so separate them by icon as well as hue.
Data Visualizations
Charts use sky blue as a light categorical series and as the baseline in a comparison. It reads clearly against white plot areas as a fill even though it fails as a line color.
Fills and lines need different values. Use #87CEEB for area fills where large blocks carry the color, and drop to #446776 for a 2px line that has to be traced across gridlines.
Blue-green confusion is the risk under color vision deficiency. Under tritanopia sky blue shifts toward gray-green, so pair it with a pattern or a direct label rather than relying on the legend.
Dark Mode Accents
Dark mode is where sky blue stops fighting the math. The bright variant #51B8E1 on the computed dark surface #0C181D reaches 7.98:1 and passes AAA, so it can carry small text, icons, and links that fail entirely in light mode.
Lower lightness slightly when you port the token. The value that reads as gentle on white looks glaring against near-black, so step down the tint ramp rather than reusing the light-mode hex.
What Are the Best Sky Blue Color Palettes for UI?
Every palette below comes from rotating hue around #87CEEB at fixed saturation and lightness. Because lightness stays at 72%, most of these produce a set of light values rather than a light-and-dark pair.
Monochromatic
Monochromatic holds hue at 197° and moves lightness: #87CEEB, #2091BE, and #DCF1F9. This is the most useful of the five, because the dark step actually gives you a working accent.
Map #2091BE to interactive elements, the base to fills, and #DCF1F9 to surfaces. That’s a complete blue system without adding a hue.
Analogous
Analogous pulls neighbors 30° in each direction: #87CEEB, #879DEB, and #87EBD5. A periwinkle and an aquamarine flanking the sky blue, all at matched lightness.
Cohesive and hierarchy-free. Three values at identical lightness need a dark neutral alongside them or the layout has no anchor.
Complementary
The complement sits opposite at 17°: #87CEEB paired with #EBA387, a soft peach. Warm against cool with no contrast separation, since both sit at 72% lightness.
Use them on adjacent surfaces rather than as foreground and background. Peach text on sky blue fails, and a peach card beside a sky blue card reads clearly.
Triadic
Triadic gives you #87CEEB, #EB87CE, and #CEEB87: sky blue, a soft pink, and a pale yellow-green. This is the strongest categorical set of the five for charts on a dark background.
Verify it under simulation. Matched-lightness triads converge faster under deuteranopia than saturated ones, because there’s less chroma left to distinguish them.
Split-Complementary
Split-complementary softens the pairing: #87CEEB, #EB879D, and #EBD587. Sky blue with a rose and a warm sand, and the most flexible of the five for a full interface.
Anchor it with a near-black text color. Visily’s theme tools can generate the shade ladder beneath each value so the dark text partners come out accessible rather than mixed by hand.
Which Colors Are Similar to Sky Blue?
Five named colors sit close enough to #87CEEB to substitute for it:
- Light sky blue (#87CEFA): the nearest neighbor, 15 points more blue, 1.72:1 on white
- Light blue (#ADD8E6): lighter and softer, 1.53:1
- Powder blue (#B0E0E6): paler and greener, 1.43:1
- Pale turquoise (#AFEEEE): shifted well toward cyan, 1.29:1
- Cornflower blue (#6495ED): deeper and more violet, 2.97:1
Cornflower blue is the practical substitution when a layout needs blue with more presence. At 2.97:1 it sits just under the non-text floor and reads as a real color rather than a tint.
Light sky blue is the one to watch in handoff. The two keywords differ by so little that a value swapped between them survives review and still breaks a strict design token audit.
Which Colors Pair Best with Sky Blue?
Near-black is sky blue’s essential partner. At 12.06:1 it’s the text color that makes every sky blue surface work, and any layout using this color depends on it.
Deep blue from the monochromatic scheme is the natural accent. #2091BE shares the base’s exact hue, reaches 3.5:1 on white, and gives the palette the hierarchy a single light tint can’t provide.
Warm neutrals prevent the clinical problem. Sky blue alone reads as cold and slightly medical, so a sand or cream somewhere in the layout keeps it from feeling like a hospital form.
Peach and coral are the computed warm partners. The complement at #EBA387 is the natural pairing, and it works best as an illustration or surface color rather than as text.
Apply the 60-30-10 split:
- 60% neutral: white or off-white surfaces
- 30% sky blue and its tints: banners, fills, and secondary surfaces
- 10% deep blue: links, primary actions, and interactive elements
Which Colors Should You Avoid Pairing with Sky Blue?
White fails first. At 1.74:1 a sky blue element on white has no perceptible edge, so borders and outlines built that way disappear on dim screens and in compressed screenshots.
Two computed near-clashes cause the next problem: #87A5EB and #87EBDD. Both sit 25° away at identical lightness, differing in hue and not at all in luminance, which leaves the eye with no boundary to find.
Green is the semantic trap. Sky blue and a light green at similar lightness read as nearly the same value to users with tritanopia, which collapses your info and success states into one.
Avoid pale gray alongside it. A light neutral at similar lightness pulls the blue toward gray and makes the whole surface look washed rather than deliberate.
Does Sky Blue Meet Accessibility Standards?
Sky blue fails as a foreground on white and passes as a background for dark text. The 1.74:1 measurement falls below the 4.5:1 body-text threshold and the 3:1 non-text floor set by the W3C.
Where it lands across the common pairings:
- #87CEEB on white: 1.74:1, fails AA and the 3:1 non-text floor
- White on #87CEEB: 1.74:1, fails
- Black on #87CEEB: 12.06:1, passes AAA
- #659AB0 on white: 3.09:1, passes for large text and non-text
- #51B8E1 on #0C181D: 7.98:1, passes AAA
The black-on-sky-blue result is what keeps the color usable. Any sky blue surface with a dark label is compliant at every text size and weight.
Tritanopia is the specific concern. Blue-yellow deficiency shifts sky blue toward a gray-green, which collapses its separation from light greens and from mid-grays.
Never encode meaning in sky blue alone. An icon, a label, or a position preserves the informational signal when the hue doesn’t survive.
How Can You Convert Sky Blue Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same blue from a different angle:
- HEX #87CEEB: the default in design files and CSS
- RGB rgb(135, 206, 235): the three channels in decimal
- RGBA rgba(135, 206, 235, 1): adds alpha for tinted overlays and selection fills
- HSL hsl(197, 71%, 72%): separates hue from saturation and lightness
- HSB 197, 43, 92: the picker model, reporting saturation very differently
- CMYK 43, 12, 0, 8: cyan-dominant coverage for print
HSL is what makes the sky blue ramp workable. Holding hue at 197° and stepping lightness generates the whole tint and shade ladder, which is how you get from #87CEEB to the AA-compliant #446776 in a predictable series.
CMYK holds up unusually well here. The 43, 12, 0, 8 mix is comfortably inside the process gamut, so printed sky blue tracks the screen more closely than most saturated colors do.
Watch the HSB and HSL saturation gap in handoff. Copying “43” from a picker into an HSL declaration produces a considerably duller color, so confirm which model your tool reports before moving numbers between files.
Wrapping Up
Sky blue is a surface color and an informational color, not a text color. Use #87CEEB for banner fills, chart areas, and secondary buttons with near-black labels, switch to #659AB0 when a border has to be perceptible, drop to #446776 when the blue itself has to be read on white, and let #51B8E1 carry it in dark mode where it clears AAA.
Stop testing those pairings one at a time. Open Visily and use its AI-powered design tools to generate your sky blue tint ramp, accessible info states, and matched accent pairings across the entire design in one pass.
