CSS: Why is DarkGray brighter than Gray?

The CSS standard defines the color "Gray" darker than "DarkGray", while "LightGray" is, as expected, lighter than these other two colors. How can that be? I would like to answer this question in this info.

In short: This peculiarity in the CSS standard has, as it is often the case in such circumstances, historical reasons to maintain compatibility.

The Colors

Specifically, it is about the following colors from the standards HTML 3.2 and X11, which form the basis of the CSS3 colors:

HTML 3.2 and CSS 1

Initially, the HTML standard only contained 16 different color names. These were the "VGA Colors" introduced with HTML 3.2 and CSS 1, which essentially corresponded to the basic colors with a few rudimentary gradations.

In addition to "Black" and "White", this standard only contained "Gray" defined with the RGB value #808080 as well as "Silver" defined with #C0C0C0, but no color names for light gray or dark gray.

Development of CSS 3

This changed with CSS 3. The World Wide Web Consortium W3C wanted to support more color names and such a list already existed at that time: the X11 Color Names, released in June 1986 and expanded till 1989 to include more colors, almost up to the current level. This color list was compiled for the X Window System (Unix software for creating graphical user interfaces) and contained over 100 different color names. At the same time, these color names were also supported by some first browsers such as Mosaic and Netscape Navigator, as both of these programs were initially developed as X applications. In addition, the list was open source. So actually the ideal conditions for an adoption into the CSS standard.

However, unfortunately, there was a small problem: The X Colors could not simply be adopted one-to-one, as some of the colors were defined differently than in the old, already supported CSS1 standard. And of course, the new CSS standard had to remain compatible with the old one.

X11 defined DarkGray as #A9A9A9 (66%), Gray as #BEBEBE (75%) as well as LightGray as #D3D3D3 (83%), while the previous standard knew neither DarkGray nor LightGray, but defined Gray as #808080 (50%), so darker than the DarkGray of X11. X11 was therefore internally consistent and defined "dark gray" darker than "gray" and "light gray" lighter than "gray", but this was not consistent with the already defined value of "gray".

Black and White, on the other hand, did not cause any problems, as both colors were already included in both standards and were defined in the same way with #000000 and #FFFFFF respectively.

The Compromise

Since the consortium wanted to adopt as many colors from X11 as possible (also because some browsers already worked with these colors), but at the same time they did not want to contradict the existing standard, the consortium decided on the compromise of adopting DarkGray and LightGray from X11 with exactly the X11 definition, but at the same time retaining the old definition of Gray.

As a result of this compromise, we now have to live with the fact that, contrary to expectations, "gray" in the CSS standard is darker than "dark gray" respectively that "gray" in its brightness is not located between "dark gray" and "light gray", as one might actually expect.

Other Gray Values and Names

You can find more gray values ​​defined by the CSS standard as well as additional information on this topic including color tables in my article about gray values.