Color Directory
Lavender
A soft purple named for the flower.
#B57EDC
- HEX
- #B57EDC
- RGB
- rgb(181, 126, 220)
- HSL
- hsl(275, 58%, 68%)
Check Lavender
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #B57EDC in the sRGB colour space.
About this entry
What it is
A soft purple named for the flower.
Calm branding, beauty products and gentle gradients.
Copy & use
How to copy and use lavender
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Calm branding, beauty products and gentle gradients.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from lavender
Each step is mixed toward white or black from #B57EDC in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#E1CBF1
rgb(225, 203, 241)
Lighter 30%
#CBA5E7
rgb(203, 165, 231)
- Base
Base
#B57EDC
rgb(181, 126, 220)
Darker 30%
#7F589A
rgb(127, 88, 154)
Darker 60%
#483258
rgb(72, 50, 88)
Name & pairing
Where lavender comes from
Named for the flower, and one of the older colour names in English. The digital version is considerably paler than the plant, which is closer to the purple most people expect.
What to put beside it
Gentle with white and grey, and unexpectedly effective with a deep green. At this lightness it works better as a ground than as an accent — there is not enough saturation to carry emphasis.
Common questions
Using lavender
What is lavender?
A soft purple named for the flower. Calm branding, beauty products and gentle gradients.
What are the colour values for Lavender?
Lavender is HEX #B57EDC, RGB rgb(181, 126, 220), HSL hsl(275, 58%, 68%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will lavender work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise lavender after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing