Technical Values
Exact numeric values for cross-tool conversion, token mapping, and accessibility review.
CSS Named Color Reference
Sky Blue
Sky Blue·#87CEEB
Sky Blue is a light CSS named blue at #87CEEB that feels more open, airy, and forgiving than Steel Blue, Royal Blue, or Dodger Blue. Use it when you want a softer interface blue for backgrounds, informational panels, onboarding surfaces, and light data accents.
Recommended text colorDark text
Body text pairing9.85:1
Strongest RoleSoft panels, onboarding surfaces, and low-pressure highlights
Tonal Direction
Scan the ramp from light to dark to judge how Sky Blue behaves across action states, layered surfaces, and supporting accents.
100#E9F6FB
300#C8E8F6
500#9DD7EF
600#87CEEB
800#6194A9
Contrast & Interface Preview
Not every foreground and background pairing behaves the same. Use these checks to decide when white text, dark text, or the color itself should take the lead.
White text on this color
Best for reversed buttons, tabs, badges, and filled action surfaces.
1.74:1Needs more separation
Dark text on this color
Works for larger headings and selective UI blocks, but not for dense body copy.
9.85:1AAA-level contrast
This color on light surface
Use this pairing when Sky Blue becomes the link, icon, border, or emphasis color on very light surfaces.
1.65:1Needs more separation
Recommended text colorDark text
Dark text reaches 9.85:1 against Sky Blue, which is strong enough for body text and standard action surfaces.
Where This Color Works
- Use Sky Blue when you need a friendlier blue for empty states, soft panels, educational UI, onboarding layers, and low-pressure product highlights.
- It is brighter and more spacious than Steel Blue, but less assertive than Dodger Blue, which makes it useful for supportive surfaces rather than primary action roles.
- Pair it with white, cool gray neutrals, and slightly darker accent blues if you want a light system with separation, softness, and enough structure for product work.
Reference Context
Color Notes
Sky Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product, interface, and branding work.
Hue Family
Trust-building blues for enterprise and SaaS.
Source Library
CSS Named Colors
Related Blues
Palette Starting Points
Implementation Snippets
Reference-ready snippets for CSS variables, utility-first styling, and token exports.
:root {
--color-sky-blue: #87CEEB;
--color-sky-blue-rgb: 135 206 235;
}Drop into a global token file or CSS variable layer.
class="bg-[#87CEEB] text-white"
class="hover:bg-[#6194A9] ring-1 ring-[#87CEEB]"Direct utility usage for a fast prototype or content block.
{
"skyBlue": "#87CEEB",
"skyBlueRgb": [135, 206, 235],
"skyBlueHsl": [197, 71, 73]
}Useful for design token exports and API-driven theme objects.
Move This Color Into the Workflow
Carry Sky Blue into conversion, brand palette generation, and palette exploration workflows to test how it behaves across interface scenarios.