UI Shades

A study in purple

Violet

#EE82EE

Family
Purple
L
0.762
C
0.186
H
327°

Notes

Violet in CSS is the bright, slightly pink-leaning purple of the wild flower. The hex sits between Orchid and Plum, with moderate chroma at mid-high lightness. Editorial, beauty, and arts brands use it as a primary or secondary accent, usually against cream for warmth or deep teal for a complementary contrast. Against white the body text contrast is borderline at small sizes; headlines are the safest territory and dark text overlays the clean option on button surfaces. Body text contrast against white passes AA only at sizes 18px and above; smaller text needs a deeper purple.

#ee82ee
Violet
Violet
#ee82ee
oklch(0.762 0.186 327.21)
rgb(238 130 238)
hsl(300 76.1% 72.2%)
Share
#fff2ff
#ffe8ff
#ffceff
#ffafff
#ee82ee
#c657c7
#ab3cad
#912793
#6c156d
#4c074d
#2a022b

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 Violet

Cross-reference
Q&A

Frequently asked questions

What is Violet?

Violet in CSS is the bright, slightly pink-leaning purple of the wild flower. The hex sits between Orchid and Plum, with moderate chroma at mid-high lightness. Its hex code is #EE82EE.

What are the tints and shades of Violet?

uishades builds an 11-step OKLCH ramp for Violet (#EE82EE) - 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 Violet?

Its complementary color is #4CD067. Triadic partners are #E1A800 and #00CBE2; analogous neighbours are #FF78B3 and #BE98FF.

What are the OKLCH and RGB values of Violet?

Violet is #EE82EE - OKLCH 0.762 0.186 327°, rgb(238 130 238), in the purple family.