Shades of purple

Purple runs from pale lavender (#e6e6fa) to deep indigo (#4b0082). Below are the 15 purples that have a CSS name, each with its hex code and text contrast; click one to get a full 50–950 scale built on it.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Base colour

Named shades

Or take colours from a photo

or drop it here. It never leaves your browser.

Shades

50#f9f5ffWhite1.1 FailInk16.8 AAA
100#f0e6ffWhite1.2 FailInk15.1 AAA
200#e1cdffWhite1.5 FailInk12.4 AAA
300#ceaaffWhite1.9 FailInk9.3 AAA
400#b489ebWhite2.7 FailInk6.7 AA
500#9a6ad3White3.9 AA largeInk4.6 AA
600#8254b6White5.4 AAInk3.4 AA large
700#693f97White7.6 AAAInk2.4 Fail
800#512b79White10.7 AAAInk1.7 Fail
900#3d1a60White13.9 AAAInk1.3 Fail
950#2b0848White17.1 AAAInk1.1 Fail

Copy as

CSSTailwindHexJSON

Palette code

:root {
  --color-purple-50: #f9f5ff;
  --color-purple-100: #f0e6ff;
  --color-purple-200: #e1cdff;
  --color-purple-300: #ceaaff;
  --color-purple-400: #b489eb;
  --color-purple-500: #9a6ad3;
  --color-purple-600: #8254b6;
  --color-purple-700: #693f97;
  --color-purple-800: #512b79;
  --color-purple-900: #3d1a60;
  --color-purple-950: #2b0848;
  --color-accent-1: #e6d5ff;
  --color-accent-2: #c393ff;
  --color-accent-3: #69369c;
  --color-accent-4: #40006c;
}

At a glance

Lavender (lavender): #e6e6fa · white text 1.23:1 (Fail), near-black text 14.70:1 (AAA); Source: w3.org, checked 2026-11
Thistle (thistle): #d8bfd8 · white text 1.69:1 (Fail), near-black text 10.65:1 (AAA); Source: w3.org, checked 2026-11
Plum (plum): #dda0dd · white text 2.06:1 (Fail), near-black text 8.74:1 (AAA); Source: w3.org, checked 2026-11
Violet (violet): #ee82ee · white text 2.31:1 (Fail), near-black text 7.80:1 (AAA); Source: w3.org, checked 2026-11
Orchid (orchid): #da70d6 · white text 2.88:1 (Fail), near-black text 6.26:1 (AA); Source: w3.org, checked 2026-11
Medium orchid (mediumorchid): #ba55d3 · white text 3.94:1 (AA large), near-black text 4.59:1 (AA); Source: w3.org, checked 2026-11
Medium purple (mediumpurple): #9370db · white text 3.76:1 (AA large), near-black text 4.80:1 (AA); Source: w3.org, checked 2026-11
Fuchsia (fuchsia): #ff00ff · white text 3.13:1 (AA large), near-black text 5.77:1 (AA); Source: w3.org, checked 2026-11
Blue violet (blueviolet): #8a2be2 · white text 5.95:1 (AA), near-black text 3.03:1 (AA large); Source: w3.org, checked 2026-11
Dark orchid (darkorchid): #9932cc · white text 5.70:1 (AA), near-black text 3.17:1 (AA large); Source: w3.org, checked 2026-11
Dark violet (darkviolet): #9400d3 · white text 6.56:1 (AA), near-black text 2.75:1 (Fail); Source: w3.org, checked 2026-11
Dark magenta (darkmagenta): #8b008b · white text 8.49:1 (AAA), near-black text 2.12:1 (Fail); Source: w3.org, checked 2026-11
Purple (purple): #800080 · white text 9.41:1 (AAA), near-black text 1.92:1 (Fail); Source: w3.org, checked 2026-11
Rebecca purple (rebeccapurple): #663399 · white text 8.40:1 (AAA), near-black text 2.15:1 (Fail); Source: w3.org, checked 2026-11
Indigo (indigo): #4b0082 · white text 12.95:1 (AAA), near-black text 1.39:1 (Fail); Source: w3.org, checked 2026-11

Give your page these colours

A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.

Make your free page

Shades of purple: what to know

This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.

Which shades of purple can carry text

White body text passes WCAG AA (4.5:1) on 7 of the 15: blue violet (#8a2be2), dark orchid (#9932cc), dark violet (#9400d3), dark magenta (#8b008b), purple (#800080), Rebecca purple (#663399) and indigo (#4b0082). Use these for buttons, banners and anything with white type on it.

Near-black text (#161616) passes on 8: lavender (#e6e6fa), thistle (#d8bfd8), plum (#dda0dd), violet (#ee82ee), orchid (#da70d6), medium orchid (#ba55d3), medium purple (#9370db) and fuchsia (#ff00ff).

Purple names in CSS

Rebecca purple (#663399) is the newest name in the list: CSS Color Level 4 added it. Fuchsia and magenta are two names for the same colour, #ff00ff, so you'll only see fuchsia above.

The names aren't a light-to-dark order. Violet (#ee82ee) is far lighter than purple (#800080), and dark violet (#9400d3) is brighter than plain purple. Pick by the hex code and the swatch, not the word.

Questions

What are the different shades of purple?

From light to dark, the named purples are lavender, thistle, plum, violet, orchid, medium orchid, medium purple, fuchsia, blue violet, dark orchid, dark violet, dark magenta, purple, Rebecca purple and indigo. Their hex codes are in the list on this page.

What are 100 different shades of purple?

No standard list of 100 purples exists. CSS names 15. For more, click any purple and the generator gives you 11 even steps from 50 to 950; every base you pick adds another 11.

Are magenta and fuchsia the same colour?

In CSS, yes. Both names give #ff00ff.