UI Shades

A study in purple

Plum

#DDA0DD

Family
Purple
L
0.783
C
0.108
H
327°

Notes

The English word plum carries two associated colours: the deep purple-black of the fruit's skin and the dusty pinkish-grey of the dried flesh inside. CSS Plum captures the latter. The X11 committee picked the value from the Crayola box in 1985 and froze it; modern Crayola Plum has since drifted darker. The CSS hex works well as a heritage accent - the kind Aesop uses on apothecary labels - or as a secondary surface in editorial. Pair it with cream and brushed gold for an art-deco palette. Body text against white passes AA only at sizes 18px and above; for smaller copy step down to a deeper purple.

#dda0dd
Plum
Plum
#dda0dd
oklch(0.783 0.108 326.54)
rgb(221 160 221)
hsl(300 47.3% 74.7%)
Share
#fff6ff
#ffedff
#fcd7fc
#f4c0f4
#dda0dd
#af72af
#955a96
#7d467e
#5c305d
#401e41
#230e23

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 Plum

Cross-reference
Q&A

Frequently asked questions

What is Plum?

The English word plum carries two associated colours: the deep purple-black of the fruit's skin and the dusty pinkish-grey of the dried flesh inside. CSS Plum captures the latter. Its hex code is #DDA0DD.

What are the tints and shades of Plum?

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

Its complementary color is #8ACB8F. Triadic partners are #D7B463 and #54CCDB; analogous neighbours are #F09BBA and #BFAAF6.

What are the OKLCH and RGB values of Plum?

Plum is #DDA0DD - OKLCH 0.783 0.108 327°, rgb(221 160 221), in the purple family.