OKLCH Studio · color reference
violet-500 in OKLCH
Tailwind v4 violet-500: oklch(0.606 0.250 292.7), HEX #8E51FF. WCAG + APCA pairs, Fix deep links, and @theme snippet.
violet-500 is Tailwind’s default brand stop — strong for accents and buttons. Verify text on this swatch with Fix; many 500s fail white-on-color for body text.
Contrast pairs
WCAG 2.1 normal text + APCA Lc. Open a pair in the live Fix tool — informational only, not a legal audit.
- Text on white4.40:1 · Fail · Lc 70
#8E51FF on #FFFFFF
Open in Contrast → - White on swatchnot a suggestion4.40:1 · Fail · Lc 75
#FFFFFF on #8E51FF
Demo of a common fail — not a suggestion.
Open in Contrast → - Black on swatch4.77:1 · AA · Lc 34
#000000 on #8E51FF
Open in Contrast → - Fix → AA on white5.12:1 · AA · Lc 74
#8342F8 on #FFFFFF
Open in Contrast → - Suggested text on swatch4.60:1 · AA · Lc 34
#060606 on #8E51FF
Lightness adjusted to WCAG AA; neutral gray (hue not from the swatch).
Open in Contrast →
Dark surface pairing
Against #121212: On near-black (#121212), Fix nudges this stop to #995FFF for AA text.
Copy code
@theme {
--color-violet-500: oklch(0.606 0.250 292.7);
}Related
Convert #8E51FF
Keep exploring
Static reference — the live Fix tool uses the same WCAG math with Undo and share links.
Contrast Fix →OKLCH Studio homeTailwind indexCSS names index