Lilac

Meet Lilac, #C8A2C8. This soft, pale violet hue strikes a delicate balance between the warmth of pink and the coolness of blue. Its muted saturation gives it a sophisticated yet approachable quality, making it a versatile choice for modern user interface design projects.

What color is Lilac?

What is the meaning of Lilac?

How do I use Lilac (#C8A2C8) in UI design?

Using Lilac color codes

Lilac

#C8A2C8

Access our full UI & UX library today.

What color is Lilac?

What is the meaning of Lilac?

How do I use Lilac (#C8A2C8) in UI design?

Using Lilac color codes

Lilac Code Conversions

HEX

#C8A2C8

LAB

71, 21, -14

RGB

200, 162, 200

XYZ

47.2, 42.3, 60.3

HSL

300°, 26%, 71%

LCH

71, 25, 325°

HSB

300°, 19%, 78%

LUV

71, 19, -25

CMYK

0, 19, 0, 22

CMYK

0, 19, 0, 22

HWB

300°, 64%, 22%

Lilac Color Harmonies

Analogous

Analogous colors sit next to Lilac on the color wheel. This grouping produces a harmonious and serene palette, ideal for creating calm interfaces.

#B5A2C8

#C8A2C8

#C8A2B5

#B5A2C8

#C8A2C8

#C8A2B5

Complementary

Complementary colors sit directly opposite each other on the color wheel. When paired with Lilac, they create a striking, high-contrast visual effect.

#C8A2C8

#A2C8A2

#C8A2C8

#A2C8A2

Split Complementary

For a high-contrast but less intense look, a split complementary scheme pairs Lilac with the two colors neighboring its direct complementary color.

#C8A2C8

#B5C8A2

#A2C8B5

#C8A2C8

#B5C8A2

#A2C8B5

Triadic

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

#C8A2C8

#C8C8A2

#A2C8C8

#C8A2C8

#C8C8A2

#A2C8C8

Tetradic

A tetradic color scheme uses four colors arranged into two complementary pairs. With Lilac as a base, this creates a rich, vibrant palette.

#C8A2C8

#C8B5A2

#A2C8A2

#A2B5C8

#C8A2C8

#C8B5A2

#A2C8A2

#A2B5C8

Square

A square color scheme selects four colors evenly spaced on the color wheel. This creates a vibrant, high-contrast palette with Lilac as a key component.

#C8A2C8

#C8B5A2

#A2C8A2

#A2B5C8

#C8A2C8

#C8B5A2

#A2C8A2

#A2B5C8

Lilac Contrast Simulation

Text Color

#

Background Color

#

9.46

Excellent

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.

9.46

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Lilac Color Variations

Shades

By adding black to Lilac, you create darker shades that introduce depth and weight.

#C8A2C8

#AB8BAB

#8F748F

#725D72

#564556

#392E39

#1D171D

#000000

#C8A2C8

#AB8BAB

#8F748F

#725D72

#564556

#392E39

#1D171D

#000000

Tints

Tints of Lilac are created by adding white, resulting in lighter, softer variations.

#C8A2C8

#D0AFD0

#D8BDD8

#E0CAE0

#E7D7E7

#EFE4EF

#F7F2F7

#FFFFFF

#C8A2C8

#D0AFD0

#D8BDD8

#E0CAE0

#E7D7E7

#EFE4EF

#F7F2F7

#FFFFFF

Tones

Tones of Lilac are created by adding gray, resulting in softer, less saturated versions.

#C8A2C8

#BE9DBE

#B398B3

#A993A9

#9F8F9F

#958A95

#8A858A

#808080

#C8A2C8

#BE9DBE

#B398B3

#A993A9

#9F8F9F

#958A95

#8A858A

#808080

Hues

Hues are variations of Lilac's base color, differing in intensity or temperature to create distinct moods.

#C8A2C8

#C8A2AB

#C8B5A2

#BEC8A2

#A2C8A2

#A2C8BE

#A2B5C8

#ABA2C8

#C8A2C8

#C8A2AB

#C8B5A2

#BEC8A2

#A2C8A2

#A2C8BE

#A2B5C8

#ABA2C8

What Interfaces Use Colors Like Lilac?

All Brands That Use Colors Like Lilac

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