About Orchid
Orchid (orchid) is a light, moderately saturated magenta with the hex code #da70d6, or rgb(218, 112, 214). In HSL it sits at a hue of 302°, 59% saturation and 65% lightness. It is one of the 148 named colors every browser understands, so you can write color: orchid; instead of the hex value.
Using Orchid for text and backgrounds
| Pairing | Contrast ratio | WCAG |
|---|---|---|
| Orchid text on white | 2.89 : 1 | fails |
| Orchid text on black | 7.27 : 1 | AAA |
On a orchid background, use black text (7.27 : 1). WCAG asks for at least 4.5 : 1 for body text and 3 : 1 for large text. Check other pairs with the Contrast Checker.
CSS
.element {
color: orchid; /* or #da70d6 */
background-color: #da70d6;
border: 1px solid rgb(218 112 214 / 50%);
}Similar named colors
Violet (#ee82ee), Medium Orchid (#ba55d3), Plum (#dda0dd), Hot Pink (#ff69b4), Pale Violet Red (#db7093), Medium Purple (#9370db).
Color Name FinderPaste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
Open the tool Frequently asked questions
What is the hex code for orchid?
#da70d6 — that is rgb(218, 112, 214) and hsl(302, 59%, 65%). In CSS you can also just write orchid.
Is orchid text readable on white?
Its contrast ratio on white is 2.89 : 1, which fails WCAG — use it for decoration or on a dark background instead.
What colors go well with orchid?
Its complementary color is #71da75; analogous colors #a971da and #da71a2 sit next to it on the color wheel.