UI Shades

A study in indigo

Tailwind Purple 500

#AB4EFF

Family
Indigo
L
0.628
C
0.250
H
304°

Notes

Tailwind Purple 500 anchors the framework's purple ramp at mid-saturation. The hex sits between Violet and Fuchsia in hue and reads as confident and slightly theatrical. It pulls duty as a primary brand colour for premium services, arts, or technology products. Against white the body text contrast is borderline at small sizes; larger sizes are safest and dark text overlays the clean option on button surfaces. Body text contrast against white passes AA only at sizes 18px and above; smaller body text needs the 600 stop for legible contrast.

#ab4eff
Tailwind Purple 500
Tailwind Purple 500
#ab4eff
oklch(0.628 0.25 304)
rgb(171 78 255)
hsl(271.5 100% 65.3%)
Share
#fff5ff
#faedff
#efdaff
#e3c3ff
#cd95ff
#ab4eff
#9532e5
#7d18c7
#5d0297
#40006d
#23003f

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Tailwind Purple 500

Cross-reference
Q&A

Frequently asked questions

What is Tailwind Purple 500?

Tailwind Purple 500 anchors the framework's purple ramp at mid-saturation. The hex sits between Violet and Fuchsia in hue and reads as confident and slightly theatrical. Its hex code is #AB4EFF.

What are the tints and shades of Tailwind Purple 500?

uishades builds an 11-step OKLCH ramp for Tailwind Purple 500 (#AB4EFF) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Tailwind Purple 500?

Its complementary color is #739800. Triadic partners are #CA6E00 and #00A191; analogous neighbours are #DA30C5 and #6472FF.

What are the OKLCH and RGB values of Tailwind Purple 500?

Tailwind Purple 500 is #AB4EFF - OKLCH 0.628 0.250 304°, rgb(171 78 255), in the indigo family.