Lavender

#D3D3FF

What color is Lavender?

Lavender is a pale, soft purple with a cool blue-gray quality, hex #D3D3FF, lighter than a violet but with a clear purple tone. It shares the gentle, hazy color of the lavender flower in full bloom.

What is the meaning of the color Lavender?

French perfumers were distilling lavender oil from the Provence region by the 16th century, making the flower one of the earliest plants linked to a named color in European trade. The English color name is first recorded in 1540, tied directly to the plant rather than to a pigment or dye. Because lavender sachets and waters were used for laundering and perfuming linens among the wealthy, the color became associated with delicacy and refinement. Crayon introduced Lavender as a named crayon color in 1949, anchoring it as a recognized pastel in commercial use.

RGB
211, 211, 255
HSL
240°, 100%, 91%
CMYK
17, 17, 0, 0
HSV
240°, 17%, 100%
Lavender color

What colors go with Lavender?

Colors that pair well with Lavender include:
White: clean, airy softness
Sage Green: quiet, natural balance
Dusty Rose: gentle tonal warmth
Navy Blue: sharp, grounding contrast
Gold: warm, rich accent

Similar Colors

Conversions & Codes

Format Value CSS
HEX #D3D3FF color: #D3D3FF;
RGB 211, 211, 255 color: rgb(211, 211, 255);
RGB Percentage 83%, 83%, 100% color: rgb(83%, 83%, 100%);
CMYK 17%, 17%, 0%, 0% Not supported in CSS
HSL 240°, 100%, 91% color: hsl(240, 100%, 91%);
HSV 240°, 17%, 100% Not supported in CSS
CIE-LAB 73, 0, -15 color: lab(73% 0 -15);
Decimal 13882367 Not supported in CSS

Color Variations

Shades

#D1D1FF
#A3A3FF
#7474FF
#4646FF
#1717FF
#0000E8
#0000BA
#00008B

Tints

#F1F1FF
#EDEDFF
#E8E8FF
#E3E3FF
#DFDFFF
#DADAFF
#D6D6FF
#D1D1FF

Tones

#D1D1FF
#D3D3FD
#D6D6FA
#D8D8F8
#DADAF6
#DDDDF4
#DFDFF1
#E1E1EF

Hues

#D1D1FF
#F4D1FF
#FFD1E8
#FFDDD1
#FFFFD1
#DDFFD1
#D1FFE8
#D1F4FF

Color Harmonies

Analogous

#D1E8FF
Click to copy
#D3D3FF
Click to copy
#E8D1FF
Click to copy

Complementary

#D3D3FF
Click to copy
#FFFFD1
Click to copy

Split Complementary

#D3D3FF
Click to copy
#FFE8D1
Click to copy
#E8FFD1
Click to copy

Triadic

#D3D3FF
Click to copy
#FFD1D1
Click to copy
#D1FFD1
Click to copy

Tetradic

#D3D3FF
Click to copy
#FFD1E8
Click to copy
#FFFFD1
Click to copy
#D1FFE8
Click to copy

Square

#D3D3FF
Click to copy
#FFD1E8
Click to copy
#FFFFD1
Click to copy
#D1FFE8
Click to copy

CSS & Dev Snippets

CSS
.lavender {
  color: #D3D3FF;
}
SCSS
$lavender: #D3D3FF;
RGB
rgb(211, 211, 255)

Accessibility & Contrast

White background

1.45:1
1.45
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

14.53:1
14.53
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags