Blue family
Baby Blue color
A light, muted blue. The reference baby blue is #A2CFFE, as defined by the xkcd Color Survey.
| HEX | #A2CFFE | |
|---|---|---|
| RGB | rgb(162, 207, 254) | |
| HSL | hsl(211, 98%, 82%) | |
| HSV | hsv(211, 36%, 100%) | |
| OKLCH | oklch(83.9% 0.081 249.9) | |
| CMYK* | 36, 19, 0, 0 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is baby blue?
Baby blue is a pale, soft blue traditionally used for baby clothes and nurseries. It is not a CSS keyword; the xkcd survey and the Color Names list agree on #A2CFFE. It is close to light blue and sky blue but cooler and a little purer.
Baby Blue hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of baby blue in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Baby Blue | #A2CFFE | xkcd Color Survey | Reference shown on this page |
| Baby Blue | #A2CFFE | Color Names (meodai) | Same color |
Baby Blue vs Light Blue
#A2CFFE
#ADD8E6
CSS light blue is grayer and slightly greener; baby blue is cleaner. In numbers: the two are 80% similar (OKLab distance 0.049). See Light Blue for its own codes.
Colors similar to baby blue
The closest named colors to #A2CFFE across all three sources, with their similarity in OKLab.
Tints and shades of baby 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 baby blue
Classic color-wheel combinations built on #A2CFFE, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Baby 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 baby blue background, black text is the better choice.
Use baby blue in CSS
.baby-blue {
color: #A2CFFE;
/* or */ color: rgb(162 207 254);
/* or */ color: hsl(211 98% 82%);
/* or */ color: oklch(83.9% 0.081 249.9);
}