Skip to content

Lavender #e6e6fa

Calm you can decorate with.

RGB
230, 230, 250
HSL
240°, 67%, 94%
CMYK
8, 8, 0, 2
Luminance
0.8032

About Lavender

Lavender, #e6e6fa, is violet diluted to a whisper — the palest working member of the purple family. Named for the herb whose scent became synonymous with relaxation, it is the color aromatherapy would choose for itself.

History

Lavender fields dyed and perfumed Provence for centuries; the color entered fashion with Victorian half-mourning, where it marked grief softening. In the 20th century it became a color of LGBTQ+ history — the “lavender scare” and later lavender as reclaimed pride.

Psychology

Lavender inherits violet’s introspection at a soothing volume: rest, gentleness, nostalgia. Sleep apps, spas and skincare rely on it because it signals calm before a single word is read.

In design

As a surface tint (#f5f3ff-class) lavender softens interfaces without gray’s flatness — a favorite empty-state and onboarding wash. It cannot carry text (1.1:1 on white); pair it with deep violet ink, sage, dusty pink or charcoal for structure.

In culture

Lavender marriages, lavender fields at golden hour, sachets in drawers: the herb and the hue share one job — settling nerves. In queer history it is remembrance and pride at once.

Brands that own lavender

Shades of lavender

Every format

HEX#e6e6fa
RGBrgb(230, 230, 250)
HSLhsl(240, 67%, 94%)
CMYKcmyk(8%, 8%, 0%, 2%)
LABlab(91.8 3.7 -9.7)
LCHlch(91.8 10.3 291.0)
OKLCHoklch(0.931 0.027 285.9)

Copy-ready code

/* CSS */
color: #e6e6fa;
background-color: #e6e6fa;
/* Tailwind (arbitrary) */
class="text-[#e6e6fa] bg-[#e6e6fa]"
/* SCSS */
$brand: #e6e6fa;
/* SwiftUI */
Color(red: 0.902, green: 0.902, blue: 0.980)
/* Android */
Color.parseColor("#e6e6fa")

Accessibility — WCAG contrast

Aa
#e6e6fa on white: 1.23:1
AA ✗ fail · AA-large · AAA
Aa
#e6e6fa on black: 17.06:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red90.2%
Green90.2%
Blue98.0%

CMYK percentages

Cyan8.0%
Magenta8.0%
Yellow0.0%
Key (black)2.0%

Color previews

#e6e6fa text on a black background

contrast 17.06:1

Card sample

#e6e6fa text on a white background

contrast 1.23:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #e6e6fa;
Background color
Panel with #e6e6fa background
background-color: #e6e6fa;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #e6e6fa;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(230, 230, 250, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(230, 230, 250, 0.45);
Border & gradient
Gradient panel
border: 3px solid #e6e6fa;
background: linear-gradient(135deg, #e6e6fa, #F3E6FA);

Monochromatic scale

Palettes built from #e6e6fa

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Lavender, answered

What is the hex code for lavender?

CSS lavender is #e6e6fa — a pale blue-violet tint. Floral lavender skews pinker, near #b57edc (“lavender floral”).

What does lavender symbolize?

Calm, gentleness and nostalgia; in history, Victorian half-mourning and LGBTQ+ remembrance and pride. In wellness branding it is shorthand for rest.

How do I use lavender in UI?

As large soft surfaces and empty-state washes with dark violet or charcoal text. It is a tint, not an ink — 1.1:1 on white rules out lavender text entirely.

Work with #e6e6fa in the Color Lab