CSS Color: Plum
Named CSS color Plum — #DDA0DD in HEX, rgb(221, 160, 221) in RGB, hsl(300, 47%, 75%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Plum | color: Plum; |
| HEX | #DDA0DD | color: #DDA0DD; |
| RGB | rgb(221, 160, 221) | color: rgb(221, 160, 221); |
| HSL | hsl(300, 47%, 75%) | color: hsl(300, 47%, 75%); |
About Plum
Plum is a soft, pastel purple that provides a gentle, feminine touch to designs. At hex `#DDA0DD`, it has nearly equal red (221) and blue (221) with moderate green (160). Its 47% saturation and 75% lightness create a muted, lavender-like appearance.
In web design, Plum works well for soft backgrounds, card accents, and gentle highlighting. It is popular in wellness apps, beauty sites, and modern lifestyle brands. Its subdued nature makes it easy to use in larger areas without overwhelming content.
For accessibility, Plum against white achieves approximately 2.0:1 contrast, which fails WCAG for text. Use it as a background color with very dark text, or as an accent on dark surfaces.
Plum is softer and lighter than Orchid, and warmer than Lavender. It pairs well with dark purple, navy, teal, cream, and soft gold. In Tailwind CSS, `purple-300` or `fuchsia-200` offer similar softness.
FAQ
What is the hex code for Plum?
The CSS named color Plum has the hex code #DDA0DD. You can use it in CSS as color: #DDA0DD; or simply color: Plum;.
What is Plum in RGB?
In RGB notation, Plum is rgb(221, 160, 221). Use it in CSS as color: rgb(221, 160, 221);.
What is Plum in HSL?
In HSL notation, Plum is hsl(300, 47%, 75%). Use it in CSS as color: hsl(300, 47%, 75%);.
What color category is Plum?
Plum belongs to the Purple color family in the CSS named colors specification.
Can I use the name "Plum" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Plum; or background-color: Plum; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Plum to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →