CSS Color: MediumPurple
Named CSS color MediumPurple — #9370DB in HEX, rgb(147, 112, 219) in RGB, hsl(260, 60%, 65%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | MediumPurple | color: MediumPurple; |
| HEX | #9370DB | color: #9370DB; |
| RGB | rgb(147, 112, 219) | color: rgb(147, 112, 219); |
| HSL | hsl(260, 60%, 65%) | color: hsl(260, 60%, 65%); |
About MediumPurple
MediumPurple is a soft, pleasant violet that is lighter and more approachable than pure Purple. At hex `#9370DB`, it sits at 260 degrees on the hue wheel with 60% saturation and 65% lightness. Its balanced values give it a gentle, creative character.
In web design, MediumPurple is popular for creative platforms, social apps, and technology products. It is soft enough for buttons and accent areas while maintaining enough saturation to be clearly purple. Twitch, Figma, and other creative tools use similar purple tones.
For accessibility, MediumPurple against white achieves approximately 3.2:1 contrast, passing WCAG AA for large text only. For body text, darken it or use it on dark backgrounds where it achieves much better contrast.
MediumPurple is brighter than Indigo and more violet than CornflowerBlue. It pairs well with white, soft pink, light teal, gold, and warm gray. In Tailwind CSS, `violet-400` or `purple-400` provide close matches for this versatile purple.
FAQ
What is the hex code for MediumPurple?
The CSS named color MediumPurple has the hex code #9370DB. You can use it in CSS as color: #9370DB; or simply color: MediumPurple;.
What is MediumPurple in RGB?
In RGB notation, MediumPurple is rgb(147, 112, 219). Use it in CSS as color: rgb(147, 112, 219);.
What is MediumPurple in HSL?
In HSL notation, MediumPurple is hsl(260, 60%, 65%). Use it in CSS as color: hsl(260, 60%, 65%);.
What color category is MediumPurple?
MediumPurple belongs to the Purple color family in the CSS named colors specification.
Can I use the name "MediumPurple" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: MediumPurple; or background-color: MediumPurple; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert MediumPurple to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →