Chen Hui Jing

Posted on Aug 24, 2019 • Originally published at chenhuijing.com on Aug 22, 2019

Where did CSS named colours come from?

#css #webdev

Talk.CSS, which is Singapore’s monthly CSS meetup, has a segment called CSS colour of the month, where we mention 1 of the 148 named CSS colours. This works out to more than 12 years worth of meetups, and I figured we’d run out of meetups before we ran out of colours.

Since Wei became a co-organiser, we’ve each been taking turns picking the CSS colour of the month, and for the August edition, she picked snow. The hex code for snow is #fffafa, which works out to a RGB value of rgb(255, 250, 250).

Some of you who are familiar with the notation may already have realised that this gives us a gentle tinge of red. Very, very slight, but still, red. And Wei noticed that snow was red(ish). I had no idea why that was, but I wanted to figure it out.

What do the specifications say?

There is a specification called the CSS Color Module Level 4 that is currently in Editor’s Draft status and it defines the colour-related properties and values that already exist in CSS1, CSS2 and CSS Color 3, plus new properties and values. So I thought that’d be a good place to start.

Scroll down to section 6.1 on named colours and we find this:

16 of CSS’s named colors come from HTML originally: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Most of the rest come from one version of the X11 color system, used in Unix-derived systems to specify colors for the console.

Ah hah! The X11 colour system! The specification also points us to a talk on the history of the X11 colour system by Alex Sexton in his talk entitled Peachpuffs and Lemonchiffons at CSSConfUS 2014:

It’s a great talk, and is one of my favourites. If words are not your thing, just skip the rest of the article and watch Alex talk about colours instead. Super entertaining. ❤️

Also, as someone who personally knows Chris Lilley, I’d like to publicly acknowledge that he is one of the nicest, sweetest people I know. Just putting it out there.

Another fun thing I discovered while reading the specification was that CSS defines a set of <system-color> values which allow us “to specify colours in a manner that integrate them into the users’ graphic environment.”

There are security and privacy considerations to this particular feature because in theory, this exposes details of the user’s OS settings, which could be used for fingerprinting. Also, this may make it easier for malware site builders to create user interfaces that seamlessly correspond to an user’s system.

The specification does state that several system colours are now defined to be “generic”, hence mitigating this risk. This makes me appreciate the many different angles that the CSS Working Group considers when authoring specifications.

I really quite like this specification, so do give it a read if you like colours as much as I do.

So what’s this X11 all about?

I messed around with Linux operating systems quite a bit before I even go into web development, so X11 isn’t something that is foreign to me. X is a portable, network-transparent window system. X11 is version 11 of the X Window System.

X was built upon an idea developed by Jim Gettys and Bob Scheifler from MIT. Why the name X? It is a derivation of a pre-1983 window system called W, which ran under the V operating system.

From the documentation:

The X Window System is a network transparent window system which runs on a wide range of computing and graphics machines.

The documentation also contains a brief section about colour names, but it didn’t go into the choice of colour names. It just mentions that X supports the use of abstract colour names and that the value for this abstract name is obtained by searching one or more colour name databases.

I came across this excellent deep dive into colour-name dictionaries by MIT alum, mathematician and free software developer, Aubrey Jaffer. From there, I found some links to early X11 colour dictionaries, and also learned about colour spaces and tuning.

The X server’s database that contains all the colour names is commonly located at /usr/share/X11/rgb.txt. Upon further digging into the version control logs, we can find the list of original colour names that were checked into version control on 19 August, 1985 by Jim Gettys.

2 files were added in that initial commit. rgb.c for parsing the colour list text file and rgb.txt, which contains a list of 68 colours, each with 2 formats of name, camelcase and lowercase with spaces.

The next update to rgb.txt was on 23 February, 1988. That added brown, grey and gray to the list. The RGB values for white were updated from 252, 252, 252 to 255, 255, 255 on 13 May, 1988. An entire grey scale consisting of 100 shades of grey were added to the list on 3 September, 1988, and sandy brown was added the next day.

I highly suggest taking a look at the commit log because amongst the standard messages like added grey0-100, there were fun ones like removed blank line; boy, what a stupid program and made Keith happy among other gems.

snow was added to the list on 26 October, 1989 when the list was expanded with colours which were tuned by Paul Raveling at the Information Sciences Institute (ISI) for the HP monitor. From his notes, we find:

Light and off-white colors, copied from several Sinclair Paints color samples. The intent for adding these is to provide a better choice for light-colored window backgrounds.

Ah hah! The next clue is Sinclair Paints. The Sinclair Paint Co. was a family business founded and run by 6 brothers in the 1930s. The company expanded into several different product divisions, and individual family members specialising in certain aspects of operations.

Unfortunately, the company is now defunct and not much can be found about their original paint swatches. A couple of forum posts on PaintTalk.com are all we have left.

From Alex’s talk, I also managed to dig up links to the comp.windows.x mailing list comments which covered the issue of colours, like the one titled “This is pink??”.

Segue into paint colour names

Perhaps we won’t be able to figure out why snow has a red hue, but it does beg the question of how paint companies name their colours. British paint company, Farrow & Ball, which has been around since 1946, is known for their creative colour names.

Slate.com did some research into this and found that the quirkier names all have their own back stories, but to an extent, it can be considered a marketing thing.

Behr Paint even put a job listing for the position of Color Explorer, which has since been filled. For people who are interested, there was an AMA on Reddit done in 2015 by the folk who name paint colours at PPG Architectural Coatings, where questions about naming colours were answered.

Why did CSS use the X11 colours?

All the discussion around the development of CSS specifications takes place in the open, so it’s possible, with some patience, to dig up the relevant discussion threads on the www-style mailing list archives.

Much of the discussion took place during between 1996–1998 when CSS1 and CSS2 were released, then again between 2001–2002 when the CSS Color Module Level 3 was being released. Feel free to peruse the message threads if you would like to read some occasionally strongly-worded opinions.

To read through whole threads, scroll down to the bottom and click through the Next in thread link.

Of course, there were also some light-hearted moments in there. Tongue-in-cheek seems to be a popular style of humour on that mailing list.

A story about `orange`

Eric Meyer offered this lovely story of how orange made it into the CSS2 specification. Turns out, he used color: orange for a lot of tests in the CSS1 Test Suite, which the W3C published and browsers supported just fine.

However, because orange was never a colour name in CSS1, it was technically invalid CSS. (Refer to Preview: CSS1 Test Suite where Ian Hickson picked out the fact that orange is not in CSS1 and was an IE4 invention in his reply to the original post)

Basically, orange was added CSS2 pretty much specifically to make the CSS1 Test Suite valid, which led to jokes like “CSS2: Now with more orange!”. This incident was also referenced Easter-egg style in the January 1999 issue of Web Techniques.

Eric had written the cover article about CSS2 in that issue and requested a detergent-style cover with orange as the primary colour. The article’s headline was also set in orange. I LOVE IT. And I’ll close off this little anecdote with a quote from Eric:

Remember, the root of it is: I goofed. Always validate, kids!

Wrapping up

So I didn’t manage to track down the actual reason why Sinclair Paint Co. named the white with a slightly reddish hue, “snow”, but I did find out a whole lot of interesting and entertaining things about colours.

The surface has barely been scratched here. And as someone who loves colours, I’m fairly certain this is not the end of things. Stay tuned, my friends!

Relevant links

Top comments (7)

Chris Achard • Aug 24 '19

This is so neat! I always wondered where the CSS colors came from too - and now I know :)

Also thanks for the video link there - that's neat: TIL that when you're deciding between grey (with an 'e') and gray (with an 'a'), you can remember that England starts with an 'E', so it's grey in England, and America starts with an 'A', so it's gray there... that always messed me up!