Light Blue Background
#ADD8E6 · rgb(173, 216, 230)
About the light blue background
Light blue (#ADD8E6) is a gentle powder blue — rgb(173, 216, 230) — calmer and cooler than sky blue. It carries the trustworthiness of blue at a volume quiet enough for large surfaces.
It's the classic 'informational' background: alerts, infographics, healthcare and baby-boy branding. Navy text on light blue is a rock-solid accessible pairing at about 10.5:1.
What to use a light blue background for
- Informational alerts, docs and infographics
- Healthcare, wellness and baby branding
- Soft section backgrounds in corporate design
- Winter and 'fresh clean' palettes
How to use light blue in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page light blue background */
body {
margin: 0;
background-color: #ADD8E6;
}
/* A single section or element */
.hero {
background-color: rgb(173, 216, 230);
} Light Blue shades and tints
Click any swatch to copy it. Tints mix light blue with white; shades mix it with black.
Light Blue background FAQ
What is the hex code for light blue?
CSS `lightblue` is #ADD8E6 — rgb(173, 216, 230). It sits between alice blue (#F0F8FF) and sky blue (#87CEEB) in depth.
What text color should I use on light blue?
Navy or near-black text: navy #000080 on #ADD8E6 measures about 10.5:1 and charcoal about 9.6:1 — both comfortably accessible.
What is the hex code for light blue?
Light Blue is #ADD8E6 in hexadecimal, rgb(173, 216, 230) in RGB and hsl(195, 53%, 79%) in HSL. Paste #ADD8E6 into any CSS background-color property to use it.
How do I set a light blue background in CSS?
Add background-color: #ADD8E6; to any element, or apply it to the whole page: body { background-color: #ADD8E6; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(173, 216, 230) — with identical results.