Purple colors
31 purple colors, sorted light to dark. The lightest is Lavender at 94 percent lightness, the darkest is Purple at 25 percent. Each one has hex, HSL, OKLCH and the contrast it gives against white and ink black.
| Color | Hex | HSL | OKLCH | On white | On ink |
|---|---|---|---|---|---|
| Lavender | #E6E6FA | hsl(240, 67%, 94%) | oklch(93.09% 0.0269 285.86) | 1.23:1 | 15.55:1 |
| Bright Lilac | #CF9FFF | hsl(270, 100%, 81%) | oklch(78.22% 0.1413 306.38) | 2.09:1 | 9.16:1 |
| Plum | #DDA0DD | hsl(300, 47%, 75%) | oklch(78.33% 0.1078 326.54) | 2.07:1 | 9.25:1 |
| Light Purple | #B19CD9 | hsl(261, 45%, 73%) | oklch(73.29% 0.0895 299.99) | 2.43:1 | 7.86:1 |
| Heliotrope | #DF73FF | hsl(286, 100%, 73%) | oklch(73.24% 0.2174 317.96) | 2.61:1 | 7.32:1 |
| Violet | #EE82EE | hsl(300, 76%, 72%) | oklch(76.19% 0.1861 327.21) | 2.32:1 | 8.26:1 |
| Mauve | #C8A2C8 | hsl(300, 26%, 71%) | oklch(75.86% 0.0681 326.22) | 2.22:1 | 8.62:1 |
| Lilac | #B57EDC | hsl(275, 57%, 68%) | oklch(68.44% 0.1450 309.99) | 3.01:1 | 6.36:1 |
| Medium Slate Blue | #7B68EE | hsl(249, 80%, 67%) | oklch(60.45% 0.1939 285.50) | 4.15:1 | 4.61:1 |
| Puce | #CC8899 | hsl(345, 40%, 67%) | oklch(70.02% 0.0857 3.20) | 2.78:1 | 6.88:1 |
| Pastel Purple | #B39EB5 | hsl(295, 13%, 66%) | oklch(72.48% 0.0404 323.27) | 2.48:1 | 7.72:1 |
| Medium Purple | #9370DB | hsl(260, 60%, 65%) | oklch(62.69% 0.1580 296.67) | 3.76:1 | 5.09:1 |
| Orchid | #DA70D6 | hsl(302, 59%, 65%) | oklch(70.21% 0.1813 328.71) | 2.89:1 | 6.62:1 |
| African Violet | #B284BE | hsl(288, 31%, 63%) | oklch(67.81% 0.0978 319.19) | 3.03:1 | 6.32:1 |
| Amethyst | #9966CC | hsl(270, 50%, 60%) | oklch(60.76% 0.1561 305.32) | 4.10:1 | 4.67:1 |
| Medium Orchid | #BA55D3 | hsl(288, 59%, 58%) | oklch(62.56% 0.2024 319.23) | 3.94:1 | 4.86:1 |
| Slate Blue | #6A5ACD | hsl(248, 53%, 58%) | oklch(54.36% 0.1712 285.54) | 5.31:1 | 3.61:1 |
| Blue Violet | #8A2BE2 | hsl(271, 76%, 53%) | oklch(53.38% 0.2503 301.37) | 5.96:1 | 3.21:1 |
| Electric Violet | #6F00FF | hsl(266, 100%, 50%) | oklch(51.26% 0.2931 288.34) | 6.73:1 | 2.84:1 |
| Violet Wheel | #7F00FF | hsl(270, 100%, 50%) | oklch(52.94% 0.2931 293.61) | 6.28:1 | 3.05:1 |
| Dark Orchid | #9932CC | hsl(280, 61%, 50%) | oklch(54.11% 0.2272 311.51) | 5.70:1 | 3.36:1 |
| Dark Mauve | #986960 | hsl(10, 23%, 49%) | oklch(56.73% 0.0626 31.16) | 4.64:1 | 4.12:1 |
| Antique Fuchsia | #915C83 | hsl(316, 22%, 46%) | oklch(54.61% 0.0875 337.02) | 5.17:1 | 3.70:1 |
| Ultramarine Violet | #534B8F | hsl(247, 31%, 43%) | oklch(45.41% 0.1083 286.64) | 7.58:1 | 2.52:1 |
| Dark Violet | #9400D3 | hsl(282, 100%, 41%) | oklch(51.49% 0.2607 309.81) | 6.56:1 | 2.92:1 |
| Web Purple | #551A8B | hsl(271, 68%, 32%) | oklch(37.84% 0.1716 302.15) | 11.01:1 | 1.74:1 |
| Byzantium | #702963 | hsl(311, 46%, 30%) | oklch(40.62% 0.1244 335.43) | 9.61:1 | 1.99:1 |
| Byzantine Purple | #77216F | hsl(306, 57%, 30%) | oklch(41.47% 0.1505 331.95) | 9.41:1 | 2.03:1 |
| Dark Magenta | #8B008B | hsl(300, 100%, 27%) | oklch(44.68% 0.2053 328.36) | 8.50:1 | 2.25:1 |
| Indigo | #4B0082 | hsl(275, 100%, 25%) | oklch(33.90% 0.1793 301.68) | 12.95:1 | 1.48:1 |
| Purple | #800080 | hsl(300, 100%, 25%) | oklch(42.09% 0.1935 328.36) | 9.42:1 | 2.03:1 |
Where purple sits on the wheel
In HSL terms this family covers roughly 260 to 290 degrees. Purple sits between blue and magenta and is the family where CIE76, the simple color difference formula, is least reliable: it overstates differences in saturated blue-purples compared with what people report seeing.
Working with purple in an interface
Purples work as a secondary accent next to a blue primary because they stay distinct at small sizes without introducing a second temperature. Dark purples make good text colors on light backgrounds and often clear AA where an equally dark red would not.
In this set, 15 of 31 purple colors clear WCAG AA for normal text on a white background, and 16 of 31 clear it as text on ink black. The most saturated is Electric Violet at an OKLCH chroma of 0.293, the most muted is Lavender at 0.027. If you are building a ramp, those two are the practical edges of what this family gives you.
The mistake to avoid
Purple and blue collapse into each other in low light and on poorly calibrated screens. If the two carry different meanings in your interface, separate them by lightness as well as hue.
Check any pair you are unsure about in the contrast checker, or open the contrast matrix to see which library colors pair safely with each other.
Other families
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.