Shades of Purple

Shades of purple include violet, lavender, plum, orchid, indigo, and amethyst. The base purple color's hex value in HTML is #800080. Browse the gallery, copy HEX codes, or build a full palette in Shade Color.

All Shades of Purple

49 named colors · one-click copy · WCAG contrast vs white/black

Shade Color

Browse named purple colors, copy a precise HEX in one click, and check WCAG contrast on white or black. Display Format only changes how values are shown — it does not build a theme scale. Turn on Preview UI to see each color as text and a button.

Purple

#800080 Palette

W 9.4:1 AAA B 2.2:1 Fail

Indigo

#4B0082 Palette

W 13.0:1 AAA B 1.6:1 Fail

Dark Magenta

#8B008B Palette

W 8.5:1 AAA B 2.5:1 Fail

Dark Violet

#9400D3 Palette

W 6.6:1 AA B 3.2:1 Fail

Dark Orchid

#9932CC Palette

W 5.7:1 AA B 3.7:1 Fail

Medium Orchid

#BA55D3 Palette

W 3.9:1 Fail B 5.3:1 AA

Medium Purple

#9370DB Palette

W 3.8:1 Fail B 5.6:1 AA

Medium Slate Blue

#7B68EE Palette

W 4.2:1 Fail B 5.1:1 AA

Blue Violet

#8A2BE2 Palette

W 6.0:1 AA B 3.5:1 Fail

Slate Blue

#6A5ACD Palette

W 5.3:1 AA B 4.0:1 Fail

Rebecca Purple

#663399 Palette

W 8.4:1 AAA B 2.5:1 Fail

Violet

#EE82EE Palette

W 2.3:1 Fail B 9.1:1 AAA

Plum

#DDA0DD Palette

W 2.1:1 Fail B 10.1:1 AAA

Thistle

#D8BFD8 Palette

W 1.7:1 Fail B 12.4:1 AAA

Lavender

#E6E6FA Palette

W 1.2:1 Fail B 17.1:1 AAA

Amethyst

#9966CC Palette

W 4.1:1 Fail B 5.1:1 AA

Byzantium

#702963 Palette

W 9.6:1 AAA B 2.2:1 Fail

Tyrian Purple

#66023C Palette

W 12.8:1 AAA B 1.6:1 Fail

Royal Purple

#7851A9 Palette

W 5.9:1 AA B 3.5:1 Fail

Electric Purple

#BF00FF Palette

W 4.5:1 AA B 4.7:1 AA

Neon Purple

#B026FF Palette

W 4.6:1 AA B 4.6:1 AA

Grape

#6F2DA8 Palette

W 8.0:1 AAA B 2.6:1 Fail

Eggplant

#614051 Palette

W 8.9:1 AAA B 2.4:1 Fail

Wisteria

#C9A0DC Palette

W 2.2:1 Fail B 9.5:1 AAA

Lilac

#C8A2C8 Palette

W 2.2:1 Fail B 9.5:1 AAA

Mauve

#E0B0FF Palette

W 1.8:1 Fail B 11.8:1 AAA

Heliotrope

#DF73FF Palette

W 2.6:1 Fail B 8.0:1 AAA

Magenta

#FF00FF Palette

W 3.1:1 Fail B 6.7:1 AA

Deep Purple

#36013F Palette

W 17.0:1 AAA B 1.2:1 Fail

Persian Indigo

#32127A Palette

W 14.0:1 AAA B 1.5:1 Fail

Purple Heart

#69359C Palette

W 8.1:1 AAA B 2.6:1 Fail

Palatinate

#682860 Palette

W 10.2:1 AAA B 2.1:1 Fail

French Lilac

#86608E Palette

W 5.2:1 AA B 4.1:1 Fail

African Violet

#B284BE Palette

W 3.0:1 Fail B 6.9:1 AA

Chinese Violet

#856088 Palette

W 5.2:1 AA B 4.0:1 Fail

Kobi

#E79FC4 Palette

W 2.1:1 Fail B 10.2:1 AAA

Opera Mauve

#B784A7 Palette

W 3.1:1 Fail B 6.9:1 AA

Pale Purple

#FAE6FA Palette

W 1.2:1 Fail B 17.8:1 AAA

Pansy Purple

#78184A Palette

W 10.4:1 AAA B 2.0:1 Fail

Phlox

#DF00FF Palette

W 3.8:1 Fail B 5.6:1 AA

Purple Mountain

#9678B6 Palette

W 3.7:1 Fail B 5.7:1 AA

Russian Violet

#32174D Palette

W 15.4:1 AAA B 1.4:1 Fail

Twilight Lavender

#8A496B Palette

W 6.5:1 AA B 3.2:1 Fail

Ultra Violet

#645394 Palette

W 6.5:1 AA B 3.2:1 Fail

Veronica

#A020F0 Palette

W 5.3:1 AA B 4.0:1 Fail

Electric Indigo

#6F00FF Palette

W 6.7:1 AA B 3.1:1 Fail

Han Purple

#5218FA Palette

W 7.3:1 AAA B 2.9:1 Fail

Purple Navy

#4E5180 Palette

W 7.5:1 AAA B 2.8:1 Fail

Soft Purple

#C3B1E1 Palette

W 2.0:1 Fail B 10.7:1 AAA

Popular Shade Collections

Browse other named shade galleries, or open the Shade Color tool to generate a custom 50–950 palette.

Shades of Blue

Shades of Green

Shades of Pink

Shades of Gray

Shades of Brown

Shades of Yellow

Shades of Red

Shades of Black

About Shades of Purple

This page is a named-purple color card for copying HEX/HSL values and checking WCAG contrast. Open Palette on a card to expand one base into UI tokens.

Want a full Purple theme (50–950)?

Pick one base color from the gallery above.
Click Palette on that card to open Shade Color.
The tool builds a locked-H / locked-S lightness scale (HSL algorithm) named like Purple-50 … 950.
Copy the HEX values into CSS variables for production.

Purple Shades Glossary

Each named purple lists HEX, HSL, WCAG contrast vs white/black, and copy-ready CSS / Tailwind arbitrary values. Fixed reference swatches for design systems and testing.

Lavender: #E6E6FA hsl(240, 67%, 94%) W 1.2:1 Fail B 17.1:1 AAA

CSS color: #E6E6FA; Tailwind bg-[#E6E6FA]
Violet: #EE82EE hsl(300, 76%, 72%) W 2.3:1 Fail B 9.1:1 AAA

CSS color: #EE82EE; Tailwind bg-[#EE82EE]
Plum: #DDA0DD hsl(300, 47%, 75%) W 2.1:1 Fail B 10.1:1 AAA

CSS color: #DDA0DD; Tailwind bg-[#DDA0DD]
Indigo: #4B0082 hsl(275, 100%, 25%) W 13.0:1 AAA B 1.6:1 Fail

CSS color: #4B0082; Tailwind bg-[#4B0082]
Amethyst: #9966CC hsl(270, 50%, 60%) W 4.1:1 Fail B 5.1:1 AA

CSS color: #9966CC; Tailwind bg-[#9966CC]
Royal Purple: #7851A9 hsl(267, 35%, 49%) W 5.9:1 AA B 3.5:1 Fail

CSS color: #7851A9; Tailwind bg-[#7851A9]
Rebecca Purple: #663399 hsl(270, 50%, 40%) W 8.4:1 AAA B 2.5:1 Fail

CSS color: #663399; Tailwind bg-[#663399]
Purple: #800080 hsl(300, 100%, 25%) W 9.4:1 AAA B 2.2:1 Fail

CSS color: #800080; Tailwind bg-[#800080]
Dark Magenta: #8B008B hsl(300, 100%, 27%) W 8.5:1 AAA B 2.5:1 Fail

CSS color: #8B008B; Tailwind bg-[#8B008B]
Dark Violet: #9400D3 hsl(282, 100%, 41%) W 6.6:1 AA B 3.2:1 Fail

CSS color: #9400D3; Tailwind bg-[#9400D3]
Dark Orchid: #9932CC hsl(280, 61%, 50%) W 5.7:1 AA B 3.7:1 Fail

CSS color: #9932CC; Tailwind bg-[#9932CC]
Medium Orchid: #BA55D3 hsl(288, 59%, 58%) W 3.9:1 Fail B 5.3:1 AA

CSS color: #BA55D3; Tailwind bg-[#BA55D3]
Medium Purple: #9370DB hsl(260, 60%, 65%) W 3.8:1 Fail B 5.6:1 AA

CSS color: #9370DB; Tailwind bg-[#9370DB]
Medium Slate Blue: #7B68EE hsl(249, 80%, 67%) W 4.2:1 Fail B 5.1:1 AA

CSS color: #7B68EE; Tailwind bg-[#7B68EE]
Blue Violet: #8A2BE2 hsl(271, 76%, 53%) W 6.0:1 AA B 3.5:1 Fail

CSS color: #8A2BE2; Tailwind bg-[#8A2BE2]
Slate Blue: #6A5ACD hsl(248, 53%, 58%) W 5.3:1 AA B 4.0:1 Fail

CSS color: #6A5ACD; Tailwind bg-[#6A5ACD]
Thistle: #D8BFD8 hsl(300, 24%, 80%) W 1.7:1 Fail B 12.4:1 AAA

CSS color: #D8BFD8; Tailwind bg-[#D8BFD8]
Byzantium: #702963 hsl(311, 46%, 30%) W 9.6:1 AAA B 2.2:1 Fail

CSS color: #702963; Tailwind bg-[#702963]
Tyrian Purple: #66023C hsl(325, 96%, 20%) W 12.8:1 AAA B 1.6:1 Fail

CSS color: #66023C; Tailwind bg-[#66023C]
Electric Purple: #BF00FF hsl(285, 100%, 50%) W 4.5:1 AA B 4.7:1 AA

CSS color: #BF00FF; Tailwind bg-[#BF00FF]
Neon Purple: #B026FF hsl(278, 100%, 57%) W 4.6:1 AA B 4.6:1 AA

CSS color: #B026FF; Tailwind bg-[#B026FF]
Grape: #6F2DA8 hsl(272, 58%, 42%) W 8.0:1 AAA B 2.6:1 Fail

CSS color: #6F2DA8; Tailwind bg-[#6F2DA8]
Eggplant: #614051 hsl(329, 20%, 32%) W 8.9:1 AAA B 2.4:1 Fail

CSS color: #614051; Tailwind bg-[#614051]
Wisteria: #C9A0DC hsl(281, 46%, 75%) W 2.2:1 Fail B 9.5:1 AAA

CSS color: #C9A0DC; Tailwind bg-[#C9A0DC]
Lilac: #C8A2C8 hsl(300, 26%, 71%) W 2.2:1 Fail B 9.5:1 AAA

CSS color: #C8A2C8; Tailwind bg-[#C8A2C8]
Mauve: #E0B0FF hsl(276, 100%, 85%) W 1.8:1 Fail B 11.8:1 AAA

CSS color: #E0B0FF; Tailwind bg-[#E0B0FF]
Heliotrope: #DF73FF hsl(286, 100%, 73%) W 2.6:1 Fail B 8.0:1 AAA

CSS color: #DF73FF; Tailwind bg-[#DF73FF]
Magenta: #FF00FF hsl(300, 100%, 50%) W 3.1:1 Fail B 6.7:1 AA

CSS color: #FF00FF; Tailwind bg-[#FF00FF]
Deep Purple: #36013F hsl(291, 97%, 13%) W 17.0:1 AAA B 1.2:1 Fail

CSS color: #36013F; Tailwind bg-[#36013F]
Persian Indigo: #32127A hsl(258, 74%, 27%) W 14.0:1 AAA B 1.5:1 Fail

CSS color: #32127A; Tailwind bg-[#32127A]
Purple Heart: #69359C hsl(270, 49%, 41%) W 8.1:1 AAA B 2.6:1 Fail

CSS color: #69359C; Tailwind bg-[#69359C]
Palatinate: #682860 hsl(308, 44%, 28%) W 10.2:1 AAA B 2.1:1 Fail

CSS color: #682860; Tailwind bg-[#682860]
French Lilac: #86608E hsl(290, 19%, 47%) W 5.2:1 AA B 4.1:1 Fail

CSS color: #86608E; Tailwind bg-[#86608E]
African Violet: #B284BE hsl(288, 31%, 63%) W 3.0:1 Fail B 6.9:1 AA

CSS color: #B284BE; Tailwind bg-[#B284BE]
Chinese Violet: #856088 hsl(296, 17%, 45%) W 5.2:1 AA B 4.0:1 Fail

CSS color: #856088; Tailwind bg-[#856088]
Kobi: #E79FC4 hsl(329, 60%, 76%) W 2.1:1 Fail B 10.2:1 AAA

CSS color: #E79FC4; Tailwind bg-[#E79FC4]
Opera Mauve: #B784A7 hsl(319, 26%, 62%) W 3.1:1 Fail B 6.9:1 AA

CSS color: #B784A7; Tailwind bg-[#B784A7]
Pale Purple: #FAE6FA hsl(300, 67%, 94%) W 1.2:1 Fail B 17.8:1 AAA

CSS color: #FAE6FA; Tailwind bg-[#FAE6FA]
Pansy Purple: #78184A hsl(329, 67%, 28%) W 10.4:1 AAA B 2.0:1 Fail

CSS color: #78184A; Tailwind bg-[#78184A]
Phlox: #DF00FF hsl(292, 100%, 50%) W 3.8:1 Fail B 5.6:1 AA

CSS color: #DF00FF; Tailwind bg-[#DF00FF]
Purple Mountain: #9678B6 hsl(269, 30%, 59%) W 3.7:1 Fail B 5.7:1 AA

CSS color: #9678B6; Tailwind bg-[#9678B6]
Russian Violet: #32174D hsl(270, 54%, 20%) W 15.4:1 AAA B 1.4:1 Fail

CSS color: #32174D; Tailwind bg-[#32174D]
Twilight Lavender: #8A496B hsl(329, 31%, 41%) W 6.5:1 AA B 3.2:1 Fail

CSS color: #8A496B; Tailwind bg-[#8A496B]
Ultra Violet: #645394 hsl(256, 28%, 45%) W 6.5:1 AA B 3.2:1 Fail

CSS color: #645394; Tailwind bg-[#645394]
Veronica: #A020F0 hsl(277, 87%, 53%) W 5.3:1 AA B 4.0:1 Fail

CSS color: #A020F0; Tailwind bg-[#A020F0]
Electric Indigo: #6F00FF hsl(266, 100%, 50%) W 6.7:1 AA B 3.1:1 Fail

CSS color: #6F00FF; Tailwind bg-[#6F00FF]
Han Purple: #5218FA hsl(255, 96%, 54%) W 7.3:1 AAA B 2.9:1 Fail

CSS color: #5218FA; Tailwind bg-[#5218FA]
Purple Navy: #4E5180 hsl(236, 24%, 40%) W 7.5:1 AAA B 2.8:1 Fail

CSS color: #4E5180; Tailwind bg-[#4E5180]
Soft Purple: #C3B1E1 hsl(263, 44%, 79%) W 2.0:1 Fail B 10.7:1 AAA

CSS color: #C3B1E1; Tailwind bg-[#C3B1E1]

FAQ

How to use this page?

Copy any named purple HEX, or open it in Shade Color to generate matching tints and shades.

What is the most popular shade of purple?

Lavender (#E6E6FA) is a popular pale purple wash for backgrounds and soft fills. As body text on white it fails WCAG AA (~1.2:1)—use the W/B labels; it passes strongly as text on black.

What is the base purple HEX value?

The reference base purple on this page uses #800080. Use it as a starting seed in Shade Color, or pick any named swatch above as your base.

How do I turn a swatch into a full UI theme?

Click Palette on one gallery card. Shade Color locks hue and saturation, then varies lightness into tokens like Purple-50 through Purple-950 for CSS variables.

What do the W / B contrast labels mean?

Each card shows WCAG 2.x contrast for this color used as text on white (W) and text on black (B). AA means at least 4.5:1 (normal text); AAA means at least 7:1. Fail means below 4.5:1 — still fine for large decorative areas, but avoid for small body text.

What does Preview UI show?

Turn on Preview UI to see the color as text on white/black and as a simple button sample. It is a quick accessibility and context check—not a full design system.

Why use this gallery instead of sampling from a screenshot?

Named colors here use fixed HEX values, so you avoid compression and display-profile drift from screenshots. Copy the code once, then reuse it consistently in CSS or design tokens. For a full 50–950 CSS variable block, open Palette on a card and use Copy CSS in Shade Color.