Cool combinationsTonal violet

Purple and Lavender Color Combination

One hue at two lightnesses: deep purple for type and surfaces, lavender for fills. Monochromatic pairs like this can never clash.

Hex codes #800080 and #E6E6FA — a tonal violet pair with a 7.65:1 contrast ratio between the two colors.

Values for this combination

Purple
RGB
rgb(128, 0, 128)
HSL
hsl(300, 100%, 25%)
Hex
#800080
Lavender
RGB
rgb(230, 230, 250)
HSL
hsl(240, 67%, 94%)
Hex
#E6E6FA

Contrast between Purple and Lavender

Contrast ratio 7.65:1. This only decides whether one color of the pair can carry text on the other — the colors themselves always work side by side.

AA · Normal text (≥ 4.5:1)PASS
AA · Large text (≥ 3:1)PASS
AAA · Normal text (≥ 7:1)PASS
AAA · Large text (≥ 4.5:1)PASS
Aa

Lavender text on a Purple surface, at 7.65:1.

Aa

Purple text on a Lavender surface, at 7.65:1.

Where this pair works

  • Beauty packaging
  • Wedding palettes
  • App theming

Give Purple (#800080) roughly 60% of the surface, Lavender (#E6E6FA) about 30%, and leave the last 10% for the neutral below. That split is what keeps a two-color combination from turning into a fight.

A five-color set from this pair

Purple and Lavender as a working palette: a pale tint of the lighter color for backgrounds, both colors as they are, a deep shade of the darker color for text and a neutral for everything in between.

  • Pale tint#e7e7f4backgrounds and large surfaces · closest to Lavender
  • Primary#800080the dominant color · closest to Purple
  • Secondary#E6E6FAthe accent color · closest to Lavender
  • Deep shade#4d004dtext, borders and icons · closest to TyrianPurple
  • Neutral#f4f4f6dividers and quiet surfaces · closest to WhiteSmoke

Explore Purple and Lavender on their own

More color combinations

Purple and Lavender are a tonal violet pair: one hue at two lightnesses: deep purple for type and surfaces, lavender for fills. Monochromatic pairs like this can never clash.

Frequently asked questions

Yes — this pair is used for beauty packaging, wedding palettes, app theming. The two colors measure 7.65:1 against each other, which is enough for body text in either direction.

Good to know

  • Every value on this page is calculated from #800080 and #E6E6FA — nothing is hardcoded.
  • Build a longer palette out of Purple or Lavender in the palette generator, or test your own text pair in the contrast checker.

Put this combination to work

Turn Purple and Lavender into a full palette, a gradient or a set of shades — or check the pair against WCAG.

From the blog