About this site

I created this site as a fun way to learn Qwik, as well as to celebrate the underappreciated expansion of named colors in the CSS spec over time.

A brief history of the named colors

A magical discovery

Growing up and coming online in the earl- to mid-2000s, my first exposure to web development came in the form of discovering how you could play with the colors of text, backgrounds, borders, and other "boxes" on the screen with certain text annotations in this weird language called "CSS". Ask just about anyone, and they would be able to tell you with a high level of confidence what sort of visual effect background-color:red is going to produce. Especially to a kid, there's something magical about being able to so intuitively control what appears on your screen with a few keystrokes.

At the time, budding enthusiasts and professionals alike would have found their palette limited to the 17 unique colors (18 only if you count gray/grey) implemented by most browsers based on the CSS 2.1 spec. At least, if you wanted to use a human-readable value like red, blue, green, or white—a so-called named color.

From blanchedalmond to lightsalmon

But it turns out, designers and developers have long since been working with a larger, more expressive palette of colors for more than a decade. These colors, which had had their start in the X Window System in the 1980s when color GUIs were still a novelty, were known as the X11 color names, due to their implementation in version 11 of the system.

In those early days, there had been plenty of resistance to adopting a standardized color list, due in equal parts to technical concerns (memory being a highly limited resource) and human ones (any such list would ultimately be arbitrary and subjective). But over the years, developers continued to contribute colors to the list, with substantial additions from Paul Ravelling (who added colors based on paint swatches he had laying around his house from a local paint company, Sinclair Paints) and John C. Thomas (who added colors based on "the handiest standard of subjective color names, a box of 72 Crayola crayons"), among others.

With time, the resistance faded, and the X11 colors spread to the more popular Mac and PC operating systems, thereby becoming the de facto standard. But it would be a while still before the set of ~140 colors made their way into the CSS spec, and even longer before they would be widely supported by browsers. Though the colors were first published in a working draft of the CSS 3 Color Module in 2001, it would take until 2008 for browser implementations to fully mature.

A colorful mess

The CSS color specification is by no means perfect. Its evolution has been criticized for overly favoring incremental improvements and adopting suggestions without sufficient review. The set of named colors themselves are inconsistently named, euro-centrically derived (sometimes to a degree which could even be considered insensitive), unevenly distributed across hues, and largely calibrated based on one guy's HP monitor 30 years ago.

Practically, the colors also have limited utility. In 2022, the HTTP Archive's annual Web Almanac found that out of over 8M websites, only 2% of sites use named colors, and of those, the majority are only using transparent, white, or black.

A beautiful, colorful mess

The thing is, the named colors were never meant to be comprehensive, mathematically precise, or even a system at all, really, and to only pass judgment on them as such misses the point, in my opinion. They were someone's starting point; they were someone's naming shortcuts to colors they were already using; they were someone's way of adding a touch of their [subjective, imperfect] human experience to the [objective, methodical] experience of writing code.

Just as a painter would never say that they were confined exclusively to the colors printed on their tubes of paint, neither is a designer or developer limited to just using the named colors in CSS. In reality, painters mix paint from different tubes together, and designers and developers "mix" their colors, too, with hex codes, RGB values, HSL values, and other formulations.

The names don't need to mean anything. But they might also mean something personal to somebody. They can even be used to honor somebody in a small, meaningful, beautiful way, like rebeccapurple, which was added in memory of Rebecca Meyer, the daughter of Eric Meyer, a pioneer of CSS and web standards.

Saying that the named colors are useless because they're subjectively chosen, don't follow a consistent set of rules, and are only used by 2% of production websites is like saying that most words in the English language are useless for the same reasons, only substitute "websites" for "published writing".

People don't think and talk about colors using hex codes or RGB values, and adolescent Kelli writing her first lines of CSS certainly wouldn't have understood them either. Colors like red, aqua, and lime are discoverable, memorable, and really easy to use. And because of that, they're incredibly useful for a variety of activities, from learning to prototyping to debugging (border:5px solid red anyone?).

The colors bring a little bit of magic 🪄 to the web—a magic that first opened my eyes to the possibilities of programming on the web, and that I hope will continue to do so for others.

This site is my small homage to that magic. I hope you enjoy it. 🙂

named-colors