A pale indigo, black text passes AA
What color is lavender?
lavender is a pale indigo: #e6e6fa in hex, rgb(230 230 250). Black text on it reaches 17.06:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.
Last updated
| Format | Value |
|---|---|
| Keyword | lavender |
| Hex | #e6e6fa |
| RGB | rgb(230 230 250) |
| HSL | hsl(240 67% 94%) |
| OKLCH | oklch(93.1% 0.027 285.9) |
| Nearest Tailwind color | indigo-100 #e0e7ff, 0.009 away in OKLab |
| White text | 1.23:1: AA fails, AAA fails, large text fails |
| Black text | 17.06:1: AA passes, AAA passes, large text passes |
About lavender
In OKLCH terms lavender has a lightness of 93.1%, a chroma of 0.027 and a hue of 285.9 degrees, a pale indigo to the eye.
HSL and OKLCH agree on how light it is, 94% and 93.1%. Among the CSS keywords, mistyrose (#ffe4e1) comes closest at 0.044 in OKLab, close enough to stand in for it in a sketch.
For text, lavender wants black: 17.06:1 clears even AAA's 7:1, and white at 1.23:1 fails AA. In the hue-sorted table of named colors it sits between navy and mediumslateblue.
In Tailwind CSS 4.3.3 the nearest default color is indigo-100 (#e0e7ff), 0.009 away in OKLab; for the exact color, an arbitrary value such as bg-[#e6e6fa] works.
Tints and shades
- #fbfbfe
- #f7f7fd
- #f2f2fd
- #eeeefc
- #eaeafb
- #e6e6fa
- #b4b4c4
- #858591
- #595961
- #303035
- #0c0c0e
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
- #e6e6fa
- #4856aa
- #9eb4f4
- #172239
- #7d87c7
Locked as the first of five swatches, lavender gets #4856aa, #9eb4f4, #172239, #7d87c7 from Recolor's generator, a monochromatic palette, one hue in five lightnesses. The seed is its hex, so the palette stays the same. Open it in Recolor.
Using lavender
As a text color, lavender on a black page gives the same 17.06:1.
.notice {
background-color: lavender; /* #e6e6fa */
color: black; /* 17.06:1 */
}Common questions
Does white text pass WCAG AA on lavender?
No. White text measures 1.23:1 on lavender, under AA's 4.5:1; black text measures 17.06:1 and passes.
Can lavender be written in OKLCH?
Yes: oklch(93.1% 0.027 285.9), computed from #e6e6fa. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to lavender?
Yes: mistyrose (#ffe4e1) is the nearest, 0.044 away in OKLab, then gainsboro at 0.045.