CSS: Why is dark grey lighter than regular grey?

It's not easy to notice. Heck, I didn't even notice it until I read about it on Reddit. So what's the matter?

See the Pen Grey vs Dark Grey by samplasion (@samplasion) on CodePen.

This pen right here is a tangible example of what I mean. We can see that the div with class darkgrey has a lighter background than the div with class grey.

This is actually a remnant of the old web. Before the World Wide Web Consortium (W3C) existed, every browser had to implement its own way of rendering webpages. The biggest browser at the time was Netscape Navigator, which, in the first versions, used the X window system on UNIX. The X window system has a set of colors, that includes a grey and a dark grey, respectively indicating 75% and 66% grey values.

When the W3C went and merged the X11 palette into the new specification, there was a clash between their grey and X11's grey. They eventually settled for the consortium's grey which was (and still is) a 50% grey (128, 128, 128). The darkgrey, on the other hand, wasn't present and was imported as is.

See where the problem is? At that point in time, the specification included a grey at 50% and a darkgrey at 66% carrying on until now. Even the CSS4 draft still uses these values.

Of course, this applies to all the JavaScript methods and properties that interface with colors (for example, canvas).

This was a brief showcase at the history behind this weird CSS bit, and I hope you enjoyed it. Stay safe!