Lavender

Meet Lavender (#E6E6FA), a soft, muted purple that brings a quiet sophistication to any design palette. Its gentle, airy quality provides a subtle wash of color, making it a versatile choice for creating interfaces that feel both modern and approachable.

What color is Lavender?

What is the meaning of Lavender?

How do I use Lavender (#E6E6FA) in UI design?

Using Lavender color codes

Lavender

#E6E6FA

Access our full UI & UX library today.

What color is Lavender?

What is the meaning of Lavender?

How do I use Lavender (#E6E6FA) in UI design?

Using Lavender color codes

Lavender Code Conversions

HEX

#E6E6FA

LAB

92, 4, -10

RGB

230, 230, 250

XYZ

78.2, 80.3, 101.8

HSL

240°, 67%, 94%

LCH

92, 10, 291°

HSB

240°, 8%, 98%

LUV

92, -1, -16

CMYK

8, 8, 0, 2

CMYK

8, 8, 0, 2

HWB

240°, 90%, 2%

Lavender Color Harmonies

Analogous

Analogous colors sit next to each other on the color wheel. With Lavender, this pairing results in a pleasing, tranquil palette.

#E6F0FA

#E6E6FA

#F0E6FA

#E6F0FA

#E6E6FA

#F0E6FA

Complementary

Complementary colors are opposites on the color wheel. When paired with Lavender, they produce a striking, high-contrast effect that makes both colors pop.

#E6E6FA

#FAFAE6

#E6E6FA

#FAFAE6

Split Complementary

A split complementary palette for Lavender pairs it with the two colors neighboring its opposite, creating high contrast with more nuanced harmony.

#E6E6FA

#FAF0E6

#F0FAE6

#E6E6FA

#FAF0E6

#F0FAE6

Triadic

A triadic scheme for Lavender involves two other colors equally spaced on the color wheel, creating a vibrant and balanced high-contrast palette.

#E6E6FA

#FAE6E6

#E6FAE6

#E6E6FA

#FAE6E6

#E6FAE6

Tetradic

A tetradic scheme for Lavender uses two pairs of complementary colors, forming a rectangle on the color wheel for a vibrant, balanced palette.

#E6E6FA

#FAE6F0

#FAFAE6

#E6FAF0

#E6E6FA

#FAE6F0

#FAFAE6

#E6FAF0

Square

A square color palette features four colors evenly spaced around the color wheel, creating a balanced yet highly contrasting combination with Lavender as the anchor.

#E6E6FA

#FAE6F0

#FAFAE6

#E6FAF0

#E6E6FA

#FAE6F0

#FAFAE6

#E6FAF0

Lavender Contrast Simulation

Text Color

#

Background Color

#

17.06

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

17.06

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Lavender Color Variations

Shades

Shades of Lavender are created by adding black, resulting in darker, weightier tones.

#E6E6FA

#C5C5D6

#A4A4B3

#83838F

#63636B

#424247

#212124

#000000

#E6E6FA

#C5C5D6

#A4A4B3

#83838F

#63636B

#424247

#212124

#000000

Tints

Tints are lighter versions of Lavender, created by adding white for a softer appearance.

#E6E6FA

#EAEAFB

#EDEDFB

#F1F1FC

#F4F4FD

#F8F8FE

#FBFBFE

#FFFFFF

#E6E6FA

#EAEAFB

#EDEDFB

#F1F1FC

#F4F4FD

#F8F8FE

#FBFBFE

#FFFFFF

Tones

Tones are created by adding gray to Lavender, resulting in softer, more muted versions.

#E6E6FA

#D7D7E9

#C9C9D7

#BABAC6

#ACACB4

#9D9DA3

#8F8F91

#808080

#E6E6FA

#D7D7E9

#C9C9D7

#BABAC6

#ACACB4

#9D9DA3

#8F8F91

#808080

Hues

Hues are Lavender variations differing in warmth or intensity, subtly altering the color's overall feel.

#E6E6FA

#F5E6FA

#FAE6F0

#FAEBE6

#FAFAE6

#EBFAE6

#E6FAF0

#E6F5FA

#E6E6FA

#F5E6FA

#FAE6F0

#FAEBE6

#FAFAE6

#EBFAE6

#E6FAF0

#E6F5FA

What Interfaces Use Colors Like Lavender?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox