Four sky blues, two sources
CSS has three keywords with “sky” in the name, and the community colour-name list adds a fourth that looks quite different. If a brief just says “sky blue”, #87CEEB is the safest reading because every browser agrees on it.
| Name | HEX | Source | Difference |
|---|---|---|---|
| skyblue | #87CEEB | CSS | The reference: clear, slightly cyan |
| lightskyblue | #87CEFA | CSS | Same red and green, more blue; noticeably more vivid |
| deepskyblue | #00BFFF | CSS | Fully saturated; a summer-sky cyan |
| Sky Blue | #9FB9E2 | Name list | Greyer and more periwinkle, like a hazy sky |
Sky blue vs light blue
CSS lightblue (#ADD8E6) is lighter and less saturated than sky blue, at 53% saturation against 71%. Side by side, sky blue looks like a colour and light blue looks like a tint. Use light blue for backgrounds and sky blue when you want the blue to be noticed. For the pastel option between them, see baby blue.
Readable text on sky blue
Black text scores 12.06:1; white scores 1.74:1 and should not be used. Navy text, a natural partner, gets 9.19:1. Even deep sky blue only gives white text 2.12:1, so none of the sky blues work as a button colour with a white label.
Colours that work with sky blue
Sky blue with white and navy is the nautical, summery set. Coral and gold are warm accents that echo a sunset, and they stand out because they sit across the wheel from it.
Questions
What is sky blue in RGB?
rgb(135, 206, 235); in HSL, hsl(197, 71%, 73%).
Can I use the word skyblue in CSS?
Yes: color: skyblue; works in every browser and gives #87CEEB.