Blue family
Light Blue color
A pale, grayish blue. The reference light blue is #ADD8E6, as defined by the CSS named color.
| HEX | #ADD8E6 | |
|---|---|---|
| RGB | rgb(173, 216, 230) | |
| HSL | hsl(195, 53%, 79%) | |
| HSV | hsv(195, 25%, 90%) | |
| OKLCH | oklch(85.6% 0.049 219.7) | |
| CMYK* | 25, 6, 0, 10 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is light blue?
Light blue is any pale tint of blue. As a CSS keyword, lightblue is #ADD8E6, a soft blue with a slight gray-green cast. People in the xkcd survey picked a brighter, purer light blue.
Light Blue hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of light blue in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Light Blue | #ADD8E6 | CSS named color | Reference shown on this page |
| Light Blue | #95D0FC | xkcd Color Survey | Close · 80% similar |
| Light Blue | #ADD8E6 | Color Names (meodai) | Same color |
Light Blue vs Sky Blue
#ADD8E6
#87CEEB
Sky blue is a little deeper and more saturated. In numbers: the two are 79% similar (OKLab distance 0.053). See Sky Blue for its own codes.
Colors similar to light blue
The closest named colors to #ADD8E6 across all three sources, with their similarity in OKLab.
Tints and shades of light blue
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with light blue
Classic color-wheel combinations built on #ADD8E6, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Light Blue with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a light blue background, black text is the better choice.
Use light blue in CSS
.light-blue {
color: #ADD8E6;
/* or */ color: rgb(173 216 230);
/* or */ color: hsl(195 53% 79%);
/* or */ color: oklch(85.6% 0.049 219.7);
/* CSS keyword */ color: lightblue;
}