The CSS Standard Color Names and "Rebecca Purple"
Published | Last Update
Who came up with all these colors and why are they here?
4,033 views, 1 RAM, and 1 comment
The Abundance of Odd CSS Color Names
Have you ever wondered where the 141 standardized color names in CSS actually came from? Some of them, such as “red” and “blue” and the other classic ones, make enough sense. But for every “green” there are a dozen non-intuitive color names, including the likes of “blanchedalmond,” “burlywood,” and “dodgerblue.” And what in God’s name is a “papayawhip”?
To makes things worse, many of the naming decisions range from confusing to nonsensical. Any reasonable person would assume that the likes of “lime” and “limegreen” refer to the same shade, but when dealing with CSS colors this is not the case. “Grey” is somehow darker than “darkgrey,” which is not something I would personally expect. There is “mediumvioletred” and “palevioletred,” but no plain old “violetred.”
It is bewildering that so many shades of white and other light neutral colors are included. I challenge anyone to differentiate between “aliceblue,” “azure,” “floralwhite,” “ghostwhite,” “honeydew,” “ivory,” “lavenderblush,” and friggin’ “snow.”
It seems bizarre to include standardized names as subjective as these in CSS, a language which is otherwise so precise. Although it is useful to have bright standardized colors on hand for testing purposes, virtually no programmer ever has ever included the likes of “peachpuff” in their final code. And anyway, classic colors like “violet,” “yellow,” and even “magenta” are perfectly adequate for testing.
When styling a site, a web designer will usually want to tweak the hex code of the color their working with to make it just the shade they are looking for, making the abundance of named colors feel very unnecessary.
To go back to the question that got us into all this trouble in the first place--where did all these color names come from anyway? And why in the heck did the full list of colors jump from 140 to 141 in 2014?
The History of CSS Color Names
This first version of this color list was introduced in 1984, as a component of X Window System’s X10R3, a Graphical User Interface released by MIT. This list consisted of only 69 basic shades, and most of the ones with more “colorful” names would not be added until later. In 1988, a newer version (X11R2) arrived with three additional color names, including the identical shades of “grey” and “gray,” which were both included to avoid potential spelling errors.
Though MIT could simply have specified these colors using their numeric values, at the time it was thought that people would find it more natural and convenient to denote colors by name. As it turns out, we see that today the vast majority of coders prefer to use numeric values such as HEX or RGB. The decision to use color names would set us on a path of standardized color names that we would never fully escape.
More color names came with the release of X11R4 in 1989. These additions included a surplus of light neutral tones, such as the ones I was complaining about earlier. Part of the reason for this is that colors tend to vary more substantially between monitors in the 1980s, meaning that there tended to be more distinction between these shades and some merit to them being included.
The 1989 update also introduced a slew of new tones with flowery and perplexing names, such as “blanchedalmond” and “papayawhip.” These names were taken directly from the catalog of Sinclair Paints, which goes to explain where these bizarre naming choices actually originated.
X11 was also released in 1989, and introduced some bolder hues into the list. In this supplement, colors and names were taken directly from Crayola crayons and included the likes of “salmon” and “aquamarine,” as well as others. These bold hues were in part an attempt to address the inconsistency between how colors were displayed on different monitors.
In 2001, the World Wide Web Consortium (W3C) decided that the list of colors used in X11 would be included in the official CSS 3 Color Module. These colors were already supported by all existing browsers and up to this point W3C had been using them in compatibility testing. They were subsequently standardized in CSS in order to prevent existing websites from breaking.
As might be expected, this decision sparked controversy and outrage throughout the programming community. Many coders felt that the disorganized and subjective X11 color list had no place being included in the otherwise precise and methodical CSS. Some went as far as to declare their inclusion an insult to CSS and to the concept of design as a whole.
The 141st color: "rebeccapurple"
In 2014, an additional color was added to the CSS standard, bringing the total number of colors to 141. With the amount of criticism surrounding the old X11 colors, it might seem like an odd move to introduce a newly named color over 10 years after the establishing the canon. However, the story behind “rebeccapurple” and its incorporation into CSS is oddly touching and to some degree helps to alleviate the cynicism surrounding the named colors list.
This new name, “rebeccapurple” was given to the HEX color #663399, and was so introduced to honor the memory of Rebecca Meyer, who died of brain cancer on her sixth birthday. Rebecca was the daughter Eric Meyer, a web design consultant and author who has been involved extensively in writing about, documenting, and advocating for the CSS web standard--and who remains involved to this day.
The initiative to add Rebecca’s favorite color to the list of named colors was started by designer Jeffrey Zeldman, who wanted to bring what recognition and support he could to Rebecca and her family. Despite some slight resistance from a few of the more conservative developers, “rebeccapurple” was officially added in June 2014. Those who opposed the motion were readily dismissed as being “jerks.”
What is the True Utility of These Named Colors?
Although it can be helpful to give different components of your website gaudy background colors such as “lime” and “crimson” while getting pages set up and doing testing, it is very rare to see named colors in a site’s finalized code (with the exception of “white” and “black,” of course). The utility in using named colors as placeholders and testers do not necessarily legitimize the excessive 141 separate names that are included.
These names were introduced by a variety of developers, back when it was not quite clear what direction coding would go. The general practice ended up being the use of numerical values, and named colors became largely obsolete.
However, despite the offense they cause some developes, we are past the point where removing them is a viable option, and they are not really causing any trouble just by existing anyway. The best thing we can do at this point is to just ignore them, save for a few of your favorites which you can break out whenever you need a placeholder color in your code.
I usually opt for something obnoxious like “firebrick” or good ol’ “dodgerblue.”
- [Code Demos] 5 More HTML and CSS Features You Didn't Know Existed (And One Work-in-Progress You Didn't Know Yo...
- How Hex Colors Work
- An Update on Current Web Design Trends
- Solving FizzBuzz with CSS
- How much is my website worth?
- Embedding Fonts with CSS and Base64
- How to install GeneratePress, set up a Child Theme and set up GeneratePress Premium properly, in the proper wa...
- Get These Dependencies Off My Lawn: 5 Tasks You Didn't Know Could be Done with Pure HTML and CSS
- Using Variables in CSS with PHP
Example of color, unless this ghetto hack fails:
Also, look at this. Grey (left) is darker than darkgrey (right)
You can also find examples of the other named hex colors here:
Sir, I can do you a nice SEO.
Post a New Comment
Do you like having a good time?
Register an Account
Read Quality Articles
Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.
Argue with People on the Internet
Use your account to explain why people are wrong on the Internet forum.
Vandalize the Wiki
Or don't. I'm not your dad.
Ask and/or Answer Questions
If someone asks a terrible question, post a LMGTFY link.
Make Some Money
Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.