Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Lavender color: hex code #E6E6FA, RGB and palettes

Lavender is #E6E6FA (RGB 230, 230, 250), the CSS named color: a very pale blue-violet that works as a background. Use dark text on it; black reaches 17.06:1, while the color itself is only 1.23:1 on white.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchLavendervery pale, soft blue
HEX
#E6E6FA
RGB
rgb(230, 230, 250)
HSL
hsl(240, 67%, 94%)

Best text on it: black at 17.06:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Lavender

  • HEX#E6E6FA
  • RGBrgb(230, 230, 250)
  • HSLhsl(240, 67%, 94%)
  • HSV240°, 8%, 98%
  • CMYK8%, 8%, 0%, 2%
  • Lablab(91.7% 2.8 -9.7)
  • OKLCHoklch(93.1% 0.027 285.9)
  • Decimal15132410

Tints, shades and tones

From white to black in 10% steps, with Lavender in the middle. Tap a code to copy it.

  1. 90%#FDFDFF
  2. 80%#FAFAFE
  3. 70%#F8F8FE
  4. 60%#F5F5FD
  5. 50%#F3F3FD
  6. 40%#F0F0FC
  7. 30%#EEEEFC
  8. 20%#EBEBFB
  9. 10%#E9E9FB
  10. Base#E6E6FA
  11. 10%#CFCFE1
  12. 20%#B8B8C8
  13. 30%#A1A1AF
  14. 40%#8A8A96
  15. 50%#73737D
  16. 60%#5C5C64
  17. 70%#45454B
  18. 80%#2E2E32
  19. 90%#171719

Tones (mixed with gray)

  1. 10%#DCDCEE
  2. 20%#D2D2E2
  3. 30%#C7C7D5
  4. 40%#BDBDC9
  5. 50%#B3B3BD
  6. 60%#A9A9B1
  7. 70%#9F9FA5
  8. 80%#949498
  9. 90%#8A8A8C

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #6767E0
  • #A6A6ED
  • #E6E6FA
  • #EEEEFC
  • #EEEEFC

Lavender in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Lavender with its complement, its triad and its tint and shade
  • Lavender
  • Triad #FAE6E6
  • Triad #E6FAE6
  • Complement
  • 50% tint
  • 50% shade

Lavender in use

New collectionAutumn edit

Card body text stays dark for reading; lavender carries the header and the button.

Shop nowTag

Headline in Lavender

A paragraph with a link in dark text, because this color is too light for text on white; use it for fills instead.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#E6E6FA
  • Protanopia (no red cones)#E2E8FB
  • Deuteranopia (no green cones)#E1E7F9
  • Tritanopia (no blue cones)#E2E9EC

Contrast and readability

PairingRatioWCAG 2.2
as text on white1.23:1AA AA large AAA
as text on black17.06:1AA AA large AAA
white text on it1.23:1AA AA large AAA
black text on it17.06:1AA AA large AAA
on your background1.07:1AA AA large AAA

Export

:root {
  --lavender: #e6e6fa;
  --lavender-rgb: 230 230 250;
  --lavender-on: #000000;
}
On this page

Lavender is named after the lavender plant, whose flower spikes are a soft purple-gray. On the web, though, the word covers two quite different colors. The CSS named color lavender is #E6E6FA, so pale that it sits closer to white than to purple. That is the value ColorPlum uses here, and any browser will draw it when you write lavender in a stylesheet.

Reading the codes

The RGB triplet is 230, 230, 250: red and green are equal and blue is a little higher, which is why it looks faintly cool rather than purple. In HSL it is hue 240°, 67% saturation and 94% lightness, a pure blue hue washed almost to white. CMYK comes out at 8%, 8%, 0%, 2%, and the decimal form is 15132410. These are mathematical conversions, so a printer may shift them.

Here is the catch. The xkcd color survey, where people typed names for colors shown on screen, put "lavender" at #C79FEF, a clearly purple shade. The OKLab distance between the two lavenders is 18.9, a big gap. Neither is wrong: CSS froze a very light value, and survey takers pictured the flowers. If someone hands you the word without a code, ask which one they mean.

Where it works and where it doesn't

Lavender is a background color, not a text color. As text on white it measures only 1.23:1, which is nearly invisible. Turn it around and it does well as a surface: black on it is 17.06:1, and a charcoal such as #333333 gives 10.26:1. Even a medium gray like #5C5C64 clears the normal AA line at 5.38:1, while the lighter #73737D falls short at 3.81:1.

  • Quiet panels: its nearest CSS neighbors are mistyrose (#FFE4E1), gainsboro (#DCDCDC) and lavenderblush (#FFF0F5), all within a distance of about 5, so it sits comfortably in a family of off-whites.
  • Matching colors: the complementary color is a pale cream, #FAFAE6. The triadic partners are #FAE6E6 and #E6FAE6, so a three-way scheme is all pastels.
  • Depth: the shade series runs from #CFCFE1 down to #171719 if you need a darker blue-gray from the same hue.

Worked example

Suppose you run a small yoga studio and are laying out a weekly class schedule for your website. You set the table background to lavender and the class names in indigo #4B0082. That pair measures 10.52:1, so the schedule is comfortable to read on a phone in bright light. For the lighter detail text, such as room numbers, you pick #5C5C64, which reaches 5.38:1. You also decide against putting the studio name in lavender over a white header, since 1.23:1 would make it vanish. Instead you use the lavender as the band behind the header and keep the lettering dark.

If lavender is too faint for your design, look at Alice blue, which is similarly pale but cooler, or ghost white. For a bolder purple with the neon feel, see neon purple. To check a text and background pair of your own, use the contrast checker.

Sources

  1. W3C, CSS Color Module Level 4: named colors (checked 2026-11-10) w3.org
  2. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org