lavender — #E6E6FA
#E6E6FA
rgb(230, 230, 250) · hsl(240, 67%, 94%) · CSS keyword lavender
Can you put text on it?
| Contrast | Body text | Large text | |
|---|---|---|---|
| lavender on white | 1.23:1 | — | — |
| lavender on black | 17.06:1 | AA | AA |
As a background, lavender takes black text: 17.06:1 against 1.23:1 the other way. A colour picker will give you the hex and stop there, which is why so many palettes look right and fail an accessibility audit.
Where the name comes from
Named for the flower, which is a good deal less blue than the CSS colour that carries its name.
Using it
color: lavender;
color: #e6e6fa;
color: rgb(230 230 250);All three are the same colour. The keyword is one of the 141 CSS named colours — a list settled in CSS 2.1 and added to exactly once since, when rebeccapurple was standardised in 2014.
Colours close to lavender
- gainsboro — #DCDCDC
- whitesmoke — #F5F5F5
- linen — #FAF0E6
- aliceblue — #F0F8FF
- lavenderblush — #FFF0F5
- mistyrose — #FFE4E1
Frequently asked questions
What is the hex code for lavender?
The hex code for lavender is #E6E6FA — RGB 230, 230, 250.
Can I use lavender for text?
Not on a white background. lavender reaches only 1.23:1, and WCAG AA asks for 4.5:1. It works as a background or a border, not as ink.
Should text on lavender be black or white?
Black — 17.06:1 against 1.23:1 the other way.
Other named colours
- lavenderblush — #FFF0F5
- lawngreen — #7CFC00
- lemonchiffon — #FFFACD
- lightblue — #ADD8E6
- lightcoral — #F08080
- lightcyan — #E0FFFF
- lightgoldenrodyellow — #FAFAD2
- lightgray — #D3D3D3
- lightgreen — #90EE90
- lightpink — #FFB6C1
- lightsalmon — #FFA07A
- lightseagreen — #20B2AA
#E6E6FA in full — tints, shades and harmonies · All named colours · Colour reference