Light Blue Color

About light blue

#ADD8E6 is the CSS named color lightblue. It is a desaturated, airy blue with a hint of green, close to powderblue (#B0E0E6).

If you want a clearer, more “sky” light blue, lightskyblue (#87CEFA) is more saturated, and aliceblue (#F0F8FF) is so pale it reads almost as white.

#ADD8E6 is the value of the CSS named color lightblue, defined in the CSS Color specification and identical in every browser.

Other colors called light blue

• Powder blue (CSS) #B0E0E6Almost the same, slightly greener.Copy
• Light sky blue (CSS) #87CEFAA clearer, more saturated light blue.Copy

Light Blue shades and tints

Shades mix light blue with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with light blue

Color harmonies based on the hue of #ADD8E6: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Light Blue contrast and readability

On a light blue background, black text reads best (13.74:1). Here is how light blue works as a text color:

Light blue is a background color: use it for info boxes, selected rows or calm section backgrounds with dark text. It is far too light for text on white.

Using light blue in CSS and HTML

:root {
  --color-light-blue: #ADD8E6;
}

.highlight {
  background-color: var(--color-light-blue);
}

.banner {
  background-color: lightblue;
  color: #000000;
}

.label {
  color: #ADD8E6;
  border: 2px solid rgb(173, 216, 230);
}

<p style="background-color: #ADD8E6; color: #000000;">
  Light Blue background
</p>