A light blue, black text passes AA
What color is lightblue?
The CSS named color lightblue is #add8e6, or rgb(173 216 230): a light blue in plain words. Black text on it reaches 13.74:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | lightblue |
| Hex | #add8e6 |
| RGB | rgb(173 216 230) |
| HSL | hsl(195 53% 79%) |
| OKLCH | oklch(85.6% 0.049 219.7) |
| Nearest Tailwind color | slate-300 #cad5e2, 0.035 away in OKLab |
| White text | 1.53:1: AA fails, AAA fails, large text fails |
| Black text | 13.74:1: AA passes, AAA passes, large text passes |
About lightblue
Measured in OKLCH, lightblue comes out at lightness 85.6%, chroma 0.049 and hue 219.7 degrees: a light blue.
Its lightness is 79% in HSL and 85.6% in OKLCH, 7 points apart; only the second tracks how light it looks. Of the named colors, powderblue (#b0e0e6) is the nearest, 0.022 away in OKLab; next to each other the two still differ.
Black on lightblue reads at 13.74:1, enough for AAA body text; white reaches 1.53:1 and should stay off it. Its neighbors in the hue-sorted list of names are powderblue and turquoise.
The closest Tailwind 4.3.3 color is slate-300, 0.035 away in OKLab, so bg-slate-300 comes near; bg-[#add8e6] gives the color itself.
Tints and shades
- #f1f9fb
- #e4f2f7
- #d6ecf3
- #c9e5ee
- #bbdfea
- #add8e6
- #87a9b4
- #637d85
- #415359
- #212c30
- #060a0c
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #add8e6
- #152225
- #9f794c
- #ffd9e0
- #1a6373
Around lightblue as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #152225, #9f794c, #ffd9e0, #1a6373, drawn from a seed fixed by its hex. Open it in Recolor.
Using lightblue
As a text color, lightblue on a black page gives the same 13.74:1.
.notice {
background-color: lightblue; /* #add8e6 */
color: black; /* 13.74:1 */
}Common questions
Does white text pass WCAG AA on lightblue?
No. White text measures 1.53:1 on lightblue, under AA's 4.5:1; black text measures 13.74:1 and passes.
Can lightblue be written in OKLCH?
Yes: oklch(85.6% 0.049 219.7), computed from #add8e6. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to lightblue?
Yes: powderblue (#b0e0e6) is the nearest, 0.022 away in OKLab, then lightgray at 0.050.