You typed color: purple into your CSS expecting a medium violet-purple and got something darker and more muted than you intended. That is the first trap in the CSS purple family. CSS purple (#800080) is darker than the word suggests, and the medium, vivid purples most designers actually want have different names: mediumpurple, orchid, or blueviolet. The fifteen named CSS purples cover a range from near-white lavender tints through vivid mid-range purples to the very dark indigo and darkmagenta at the bottom.
The Color Name Finder identifies which CSS purple is closest to any custom HEX you are working with. This guide covers all fifteen named CSS purples, what distinguishes each one at the RGB level, and the story behind the one color in this group that is unlike any other in the entire CSS named color system.
The Fifteen Named Purple Colors in CSS
The full CSS purple family, ordered from darkest to lightest:
| CSS Name | HEX | RGB | Character |
|---|---|---|---|
| indigo | #4B0082 | R:75, G:0, B:130 | Very dark blue-purple |
| darkmagenta | #8B008B | R:139, G:0, B:139 | Very dark pure purple |
| purple | #800080 | R:128, G:0, B:128 | Dark muted purple |
| darkviolet | #9400D3 | R:148, G:0, B:211 | Dark cold violet |
| blueviolet | #8A2BE2 | R:138, G:43, B:226 | Vivid blue-leaning purple |
| darkorchid | #9932CC | R:153, G:50, B:204 | Dark warm jewel purple |
| rebeccapurple | #663399 | R:102, G:51, B:153 | Medium-dark warm purple |
| mediumpurple | #9370DB | R:147, G:112, B:219 | Medium warm blue-purple |
| mediumorchid | #BA55D3 | R:186, G:85, B:211 | Medium vivid purple |
| orchid | #DA70D6 | R:218, G:112, B:214 | Light warm vivid purple |
| violet | #EE82EE | R:238, G:130, B:238 | Light vivid spectral purple |
| plum | #DDA0DD | R:221, G:160, B:221 | Light warm muted purple |
| thistle | #D8BFD8 | R:216, G:191, B:216 | Very light neutral purple |
| lavender | #E6E6FA | R:230, G:230, B:250 | Very light cool-toned purple |
| lavenderblush | #FFF0F5 | R:255, G:240, B:245 | Near-white pinkish purple |
Purple colors in CSS are defined by roughly equal or dominant red and blue channels with a suppressed or absent green channel. The relationship between the red and blue values, and how much green is present or absent, controls whether a CSS purple reads as warm (more red), cold (more blue), or neutral.
The Darkest CSS Purples: Indigo, Darkmagenta, and Purple
Indigo (#4B0082) is the darkest CSS purple by luminance. Its RGB is R:75, G:0, B:130. The zero green channel and low red channel at 75 mean very little light is returned by this color on screen. It reads as a very deep, near-black blue-purple. Indigo sits at the edge of the purple family and the blue family in the color families grouping, and it appears in the colors that start with i guide alongside indianred and ivory.
The name comes from the indigo plant (genus Indigofera), which produces one of the oldest natural blue-purple dyes in the world. Isaac Newton assigned indigo a place in his seven-color rainbow to make the count match the seven notes of the Western musical scale. CSS indigo is substantially darker than what most people call indigo in everyday speech. The spectral color indigo sits between blue and violet, but CSS indigo resolves on screen as a very deep purple.
Darkmagenta (#8B008B) has RGB R:139, G:0, B:139. The equal red and blue channels at 139 with zero green produce a pure, deep purple with no warm or cool lean. At this luminance level, the distinction between dark purple and dark magenta collapses visually. The eye reads both as the same very deep, saturated tone.
Purple (#800080) is the entry in this family that surprises most designers. Its RGB is R:128, G:0, B:128. The equal channels at half strength produce a dark, medium-saturation purple with no tint in either direction. It is not the vivid, medium purple most people reach for when they type the word into a CSS property. CSS purple is a darker, more restrained color than the everyday word suggests. If the goal is a "generic purple" that works as a conventional mid-range color, mediumpurple (#9370DB) is closer to what most people have in mind.
Dark Vivid Purples: Darkviolet, Blueviolet, and Darkorchid
Darkviolet (#9400D3) has RGB R:148, G:0, B:211. The zero green channel combined with a high blue channel at 211 makes this one of the coldest, most vivid CSS purples. It reads as a spectral violet: the purple most associated with ultraviolet lamps, vivid dye, or neon light. The high blue contribution keeps it firmly in the cold-leaning range. There is almost no warmth in this color.
Blueviolet (#8A2BE2) has RGB R:138, G:43, B:226. The very high blue channel at 226 and a small green channel at 43 give it a distinctly blue-leaning quality. Blueviolet sits at the visible edge of the blue-purple boundary and most closely resembles what painters call "blue-violet" when mixing pigments. The small green contribution warms it enough to prevent the full coldness of darkviolet while keeping it clearly in the vivid range.
Darkorchid (#9932CC) has RGB R:153, G:50, B:204. Its green channel at 50 is the highest of this dark group, which warms the color noticeably. Darkorchid reads as a jewel-toned, warm dark purple. It is the most versatile of the dark CSS purples for design work because its balance of warmth and saturation allows it to pair with both cool neutrals (white, light gray) and warm neutrals (cream, tan) without clashing.
Medium Purples: Rebeccapurple, Mediumpurple, and Mediumorchid
Rebeccapurple (#663399) has RGB R:102, G:51, B:153. It sits in the medium-dark range: darker than mediumpurple, lighter than darkorchid. The relationship between its red (102) and blue (153) channels gives it a clean, legible purple quality without the coldness of blue-leaning entries or the warmth of orchid-leaning ones. For headings, brand accents, and UI elements that need a purple that reads as intentional rather than playful, rebeccapurple is often the most practical starting point in the CSS purple family.
Mediumpurple (#9370DB) has RGB R:147, G:112, B:219. The relatively high green channel at 112 is what makes it feel different from the dark group. That green contribution softens the color and gives it a lighter, more accessible quality. Mediumpurple reads as the most neutral and approachable purple in the CSS system. It is one of the better choices for general UI use because its moderate saturation does not overwhelm adjacent colors and it pairs naturally with white, light gray, and most warm neutrals.
Mediumorchid (#BA55D3) has RGB R:186, G:85, B:211. The higher red channel at 186 relative to mediumpurple shifts it toward the warm, vivid orchid quality. Mediumorchid reads as a vivid, warm, saturated purple with an almost magenta lean at certain luminance levels. It pairs well with teal, navy, and warm neutrals in design systems that need vivid color without going fully into neon territory. The muted pinks from the shades of pink color names guide, particularly palevioletred and mediumvioletred, sit adjacent to mediumorchid in the red-purple spectrum.
Light Purples: Orchid, Violet, and Plum
Orchid (#DA70D6) has RGB R:218, G:112, B:214. Its nearly equal red (218) and blue (214) channels, with a moderate green (112), produce a warm, balanced lavender-pink. Orchid is named after the flower genus, and the color matches the most common purple-pink orchid variety seen in florist displays. It is lighter and warmer than mediumorchid and reads as vivid but approachable. It works in floral, fashion, and beauty design contexts where the purple needs warmth rather than richness.
Violet (#EE82EE) is the lightest of the vivid CSS purples, with RGB R:238, G:130, B:238. Its very high and equal red and blue channels at 238 each, with a moderate green at 130, produce a light, vivid purple. CSS violet is the color Newton placed at the short-wavelength end of his rainbow. At this luminance level, the color reads as bright and vivid rather than deep or rich. Violet is a more faithful representation of the spectral color at that wavelength than CSS indigo is at its end.
Plum (#DDA0DD) has RGB R:221, G:160, B:221. The equal red and blue channels with a high green at 160 produce a muted, dusty, warm purple. Plum reads as an antique-rose-adjacent desaturated purple rather than a vivid one. The name references the color of a ripe plum's skin. In design, plum works as a muted accent in soft or vintage palettes where orchid or violet would be too saturated for the overall tone.
Pale Purples: Thistle, Lavender, and Lavenderblush
Thistle (#D8BFD8) has RGB R:216, G:191, B:216. Its high green channel at 191 with equal red and blue channels at 216 each produces a very muted, neutral purple that reads more as a warm gray-purple than a vivid purple. Thistle is one of the most neutral CSS purples. It works as a subtle background tint or a near-neutral accent in palettes that need a whisper of purple rather than a statement color.
Lavender (#E6E6FA) has RGB R:230, G:230, B:250. The blue channel at 250 is only slightly higher than the equal red and green channels at 230, producing an extremely pale, cool-tinted near-white. CSS lavender reads as barely purple unless compared directly with pure white. It is one of the palest named colors in the entire CSS system and is used primarily as a subtle cool background tint for interfaces and documents where warmth needs to be reduced without going to a cool gray.
Lavenderblush (#FFF0F5) is the palest entry in the CSS purple family, with RGB R:255, G:240, B:245. The maximum red channel at 255 with a high green (240) and high blue (245) produces a near-white pink that has almost no visible purple quality without direct comparison. It functions similarly to seashell or honeydew in the near-white color group: a subtle tint that references a color family without committing to it. On most screens, lavenderblush and white are visually indistinguishable unless placed next to each other.
Rebeccapurple: The Only CSS Color Named After a Real Person
Every other color in the CSS specification is named after a natural object, a place, a material, or a historical pigment. Rebeccapurple (#663399) is different. It is the only CSS named color named after a specific real person, and the story behind it is worth knowing regardless of whether you ever use the color in a project.
Rebecca Meyer was the daughter of Eric Meyer, a prominent CSS author and web developer whose work on the CSS specification and the website meyerweb.com placed him at the center of web standards development in the early 2000s. Rebecca died on June 7, 2014, her sixth birthday, from a brain tumor called diffuse intrinsic pontine glioma. Purple was her favorite color.
Within days of her death, developers in the web community proposed naming a CSS color after her. The color #663399 was chosen. Eric Meyer's response to the proposal is documented on his website at meyerweb.com. The CSS Colors Level 4 specification was amended to include rebeccapurple as a named color.
The color was given her full name, "rebeccapurple," specifically because she had recently asked to be called Rebecca rather than Becky. Using her full name was a deliberate choice made by the community. The cool color names guide covers this story as part of its overview of the most interesting CSS color names and the histories behind them.
For practical design purposes, rebeccapurple is a clean, medium-dark warm purple that works well in brand design, heading styles, and UI accent elements. Its balanced RGB values give it legibility at small sizes and presence at large ones. But knowing its origin gives it a different weight in the color system than any other named CSS color carries.
Finding the Closest CSS Name for Any Purple HEX
Custom brand purples, design tool palette exports, and colors extracted from images rarely match a CSS name exactly. Paste any purple HEX into the Color Name Finder to get the closest CSS match using perceptual Delta-E distance in CIE Lab color space. For dark, vivid purples the tool returns darkviolet, blueviolet, or darkorchid. For medium purples it returns mediumpurple, mediumorchid, or rebeccapurple. For pale tints it returns lavender, thistle, or plum.
For any purple scale, the tints and shades generator takes a base purple and generates lighter and darker variants with consistent hue. Starting from rebeccapurple gives a warm, formal purple scale. Starting from blueviolet gives a cooler, more electric range. The color section has all the tools for building a complete purple palette from any starting point in the CSS purple family.
