CSS Color: Orchid
Named CSS color Orchid — #DA70D6 in HEX, rgb(218, 112, 214) in RGB, hsl(302, 59%, 65%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Orchid | color: Orchid; |
| HEX | #DA70D6 | color: #DA70D6; |
| RGB | rgb(218, 112, 214) | color: rgb(218, 112, 214); |
| HSL | hsl(302, 59%, 65%) | color: hsl(302, 59%, 65%); |
About Orchid
Orchid is a warm purple-pink that balances elegance with energy. At hex `#DA70D6`, it sits at 302 degrees — just 2 degrees past magenta toward red. With 59% saturation and 65% lightness, it is vivid but approachable.
In web design, Orchid is popular for beauty brands, creative portfolios, and feminine-coded designs. Its warmth distinguishes it from cooler purples, making it feel more personal and inviting. It works well for accent buttons, illustrations, and gradient components.
For accessibility, Orchid against white achieves approximately 2.9:1 contrast, which is insufficient for text on light backgrounds. Pair it with dark backgrounds for text use, or use it as decorative accents and backgrounds on light surfaces.
Orchid is warmer and more pink than MediumPurple, and less bright than Violet. It pairs well with navy, dark green, gold, ivory, and warm gray. In Tailwind CSS, `fuchsia-400` or `purple-400` provide approximate matches.
FAQ
What is the hex code for Orchid?
The CSS named color Orchid has the hex code #DA70D6. You can use it in CSS as color: #DA70D6; or simply color: Orchid;.
What is Orchid in RGB?
In RGB notation, Orchid is rgb(218, 112, 214). Use it in CSS as color: rgb(218, 112, 214);.
What is Orchid in HSL?
In HSL notation, Orchid is hsl(302, 59%, 65%). Use it in CSS as color: hsl(302, 59%, 65%);.
What color category is Orchid?
Orchid belongs to the Purple color family in the CSS named colors specification.
Can I use the name "Orchid" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Orchid; or background-color: Orchid; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Orchid to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →