Sky Blue Background
#87CEEB · rgb(135, 206, 235)
About the sky blue background
Sky blue (#87CEEB) is blue lifted with green and white — rgb(135, 206, 235) — the color of a clear daytime sky. It's light, open and universally calming, evoking freedom, weather apps and fresh mornings.
Dark text on sky blue measures about 12:1 (very accessible), and it builds instant gradients with deeper blues or pairs with sunshine yellow for an optimistic palette.
What to use a sky blue background for
- Weather, travel and airline interfaces
- Children's brands and playful marketing
- Airy, optimistic hero sections
- Sky-to-blue gradient backgrounds
How to use sky blue in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page sky blue background */
body {
margin: 0;
background-color: #87CEEB;
}
/* A single section or element */
.hero {
background-color: rgb(135, 206, 235);
} Sky Blue shades and tints
Click any swatch to copy it. Tints mix sky blue with white; shades mix it with black.
Sky Blue background FAQ
What is the hex code for sky blue?
CSS `skyblue` is #87CEEB — rgb(135, 206, 235), or hsl(197, 71%, 73%). 'Deep sky blue' is the brighter #00BFFF.
Is sky blue good for accessibility?
Yes for dark text: black on #87CEEB measures about 12:1, well past AAA. Avoid white text — it drops to about 1.7:1 and fails every text threshold.
What is the hex code for sky blue?
Sky Blue is #87CEEB in hexadecimal, rgb(135, 206, 235) in RGB and hsl(197, 71%, 73%) in HSL. Paste #87CEEB into any CSS background-color property to use it.
How do I set a sky blue background in CSS?
Add background-color: #87CEEB; to any element, or apply it to the whole page: body { background-color: #87CEEB; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(135, 206, 235) — with identical results.