Tailwind purple color palette
purple-50 to purple-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. purple-500 is #AD46FF in v4 and #A855F7 in v3.
Every purple shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| purple-50 | bg-purple-50 | oklch(97.7% 0.014 308.299) | #FAF5FF | #FAF5FF | Ghost White #F8F8FF |
| purple-100 | bg-purple-100 | oklch(94.6% 0.033 307.174) | #F3E8FF | #F3E8FF | Lavender #E6E6FA |
| purple-200 | bg-purple-200 | oklch(90.2% 0.063 306.703) | #E9D4FF | #E9D5FF | Pale Lavender #EECFFE |
| purple-300 | bg-purple-300 | oklch(82.7% 0.119 306.383) | #DAB2FF | #D8B4FE | Light Violet #D6B4FC |
| purple-400 | bg-purple-400 | oklch(71.4% 0.203 305.504) | #C27AFF | #C084FC | Light Purple #BF77F6 |
| purple-500 | bg-purple-500 | oklch(62.7% 0.265 303.9) | #AD46FF | #A855F7 | Lighter Purple #A55AF4 |
| purple-600 | bg-purple-600 | oklch(55.8% 0.288 302.321) | #9810FA | #9333EA | Vivid Purple #9900FA |
| purple-700 | bg-purple-700 | oklch(49.6% 0.265 301.924) | #8200DB | #7E22CE | Blue Violet #8A2BE2 |
| purple-800 | bg-purple-800 | oklch(43.8% 0.218 303.724) | #6E11B0 | #6B21A8 | Grape #7209B7 |
| purple-900 | bg-purple-900 | oklch(38.1% 0.176 304.987) | #59168B | #581C87 | Indigo #4B0082 |
| purple-950 | bg-purple-950 | oklch(29.1% 0.149 302.717) | #3C0366 | #3B0764 | Royal Purple #4B006E |
purple contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, purple shades 600, 700, 800, 900, 950 pass; on black, purple shades 50, 100, 200, 300, 400, 500 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| purple-50 | #FAF5FF | 1.07:1 Fail | 19.56:1 AA |
| purple-100 | #F3E8FF | 1.17:1 Fail | 17.79:1 AA |
| purple-200 | #E9D4FF | 1.37:1 Fail | 15.32:1 AA |
| purple-300 | #DAB2FF | 1.78:1 Fail | 11.79:1 AA |
| purple-400 | #C27AFF | 2.79:1 Fail | 7.52:1 AA |
| purple-500 | #AD46FF | 4.12:1 AA large | 5.09:1 AA |
| purple-600 | #9810FA | 5.54:1 AA | 3.78:1 AA large |
| purple-700 | #8200DB | 7.06:1 AA | 2.97:1 Fail |
| purple-800 | #6E11B0 | 8.86:1 AA | 2.37:1 Fail |
| purple-900 | #59168B | 10.98:1 AA | 1.91:1 Fail |
| purple-950 | #3C0366 | 15.03:1 AA | 1.39:1 Fail |
Use purple in your project
Utility class: bg-purple-500. CSS variable: var(--color-purple-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-purple-50: oklch(97.7% 0.014 308.299);
--color-purple-100: oklch(94.6% 0.033 307.174);
--color-purple-200: oklch(90.2% 0.063 306.703);
--color-purple-300: oklch(82.7% 0.119 306.383);
--color-purple-400: oklch(71.4% 0.203 305.504);
--color-purple-500: oklch(62.7% 0.265 303.9);
--color-purple-600: oklch(55.8% 0.288 302.321);
--color-purple-700: oklch(49.6% 0.265 301.924);
--color-purple-800: oklch(43.8% 0.218 303.724);
--color-purple-900: oklch(38.1% 0.176 304.987);
--color-purple-950: oklch(29.1% 0.149 302.717);
}
More Tailwind colors
Previous: violet | Next: fuchsia
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #AD46FF and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.