Tailwind violet color palette
violet-50 to violet-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. violet-500 is #8E51FF in v4 and #8B5CF6 in v3.
Every violet shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| violet-50 | bg-violet-50 | oklch(96.9% 0.016 293.756) | #F5F3FF | #F5F3FF | Alice Blue #F0F8FF |
| violet-100 | bg-violet-100 | oklch(94.3% 0.029 294.588) | #EDE9FE | #EDE9FE | Lavender #E6E6FA |
| violet-200 | bg-violet-200 | oklch(89.4% 0.057 293.283) | #DDD6FF | #DDD6FE | Pale Lavender #EECFFE |
| violet-300 | bg-violet-300 | oklch(81.1% 0.111 293.571) | #C4B4FF | #C4B5FD | Pale Violet #CEAEFA |
| violet-400 | bg-violet-400 | oklch(70.2% 0.183 293.541) | #A684FF | #A78BFA | Periwinkle #8E82FE |
| violet-500 | bg-violet-500 | oklch(60.6% 0.25 292.717) | #8E51FF | #8B5CF6 | Purpley #8756E4 |
| violet-600 | bg-violet-600 | oklch(54.1% 0.281 293.009) | #7F22FE | #7C3AED | Blue Violet #8A2BE2 |
| violet-700 | bg-violet-700 | oklch(49.1% 0.27 292.581) | #7008E7 | #6D28D9 | Purply Blue #661AEE |
| violet-800 | bg-violet-800 | oklch(43.2% 0.232 292.759) | #5D0EC0 | #5B21B6 | Violet Blue #510AC9 |
| violet-900 | bg-violet-900 | oklch(38% 0.189 293.745) | #4D179A | #4C1D95 | Imperial Purple #480CA8 |
| violet-950 | bg-violet-950 | oklch(28.3% 0.141 291.089) | #2F0D68 | #2E1065 | Midnight Blue #191970 |
violet contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, violet shades 600, 700, 800, 900, 950 pass; on black, violet shades 50, 100, 200, 300, 400, 500 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| violet-50 | #F5F3FF | 1.09:1 Fail | 19.14:1 AA |
| violet-100 | #EDE9FE | 1.18:1 Fail | 17.68:1 AA |
| violet-200 | #DDD6FF | 1.38:1 Fail | 15.13:1 AA |
| violet-300 | #C4B4FF | 1.85:1 Fail | 11.31:1 AA |
| violet-400 | #A684FF | 2.85:1 Fail | 7.36:1 AA |
| violet-500 | #8E51FF | 4.40:1 AA large | 4.77:1 AA |
| violet-600 | #7F22FE | 5.89:1 AA | 3.56:1 AA large |
| violet-700 | #7008E7 | 7.29:1 AA | 2.87:1 Fail |
| violet-800 | #5D0EC0 | 9.17:1 AA | 2.28:1 Fail |
| violet-900 | #4D179A | 11.02:1 AA | 1.90:1 Fail |
| violet-950 | #2F0D68 | 15.23:1 AA | 1.37:1 Fail |
Use violet in your project
Utility class: bg-violet-500. CSS variable: var(--color-violet-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-violet-50: oklch(96.9% 0.016 293.756);
--color-violet-100: oklch(94.3% 0.029 294.588);
--color-violet-200: oklch(89.4% 0.057 293.283);
--color-violet-300: oklch(81.1% 0.111 293.571);
--color-violet-400: oklch(70.2% 0.183 293.541);
--color-violet-500: oklch(60.6% 0.25 292.717);
--color-violet-600: oklch(54.1% 0.281 293.009);
--color-violet-700: oklch(49.1% 0.27 292.581);
--color-violet-800: oklch(43.2% 0.232 292.759);
--color-violet-900: oklch(38% 0.189 293.745);
--color-violet-950: oklch(28.3% 0.141 291.089);
}
More Tailwind colors
Previous: indigo | Next: purple
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #8E51FF and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.