4 ms·

Why Dark Gray Is Brighter Than Gray in CSS

89 points by pplonski86 7y ago

Tempest1981 7y ago
If DarkGray is too bright (66%), there's always DimGray at #696969 (41%)
- TSiege 7y ago
  nice
teddyh 7y ago
TLDR: “dark-gray” came from when the X11 color set was imported into CSS, while “gray” came from the original HTML colors.
inflatableDodo 7y ago
>Even today in the latest CSS draft the color “dark-gray” produces a lighter shade than the color “gray”, and just to prove naming things is hard both grey and gray are valid color names. Now if we can just make both color and colour into valid colour names, I'll be happy.
- xpil 7y ago
  You mean, valid color names right?
thristian 7y ago
Originally, HTML didn't support any kind of colours at all. Netscape introduced HTML attributes for colouring things, and it passed the colour names straight through to X11. Because X11 shipped with a suite of pre-defined colour names, Netscape supported those pre-defined colour names. Because X11 supported custom colours in #RGB, #RRGGBB and #RRRRGGGGBBBB syntax, Netscape supported those too. Meanwhile, Microsoft wanted in on the browser game, but a lot of people still used Windows on machines with 16-colour VGA rather than high-end workstations with true-colour displays, so Internet Explorer couldn't offer the hundreds of named colours Netscape could. Instead, it provided names for the standard Windows 16 colour palette: black, maroon, green, olive, navy, purple, teal, silver, gray, red, lime, yellow, blue, fuchsia, aqua, white.
- resoluteteeth 7y ago
  > Netscape introduced HTML attributes for colouring things, and it passed the colour names straight through to X11. Because X11 shipped with a suite of pre-defined colour names, Netscape supported those pre-defined colour names. Because X11 supported custom colours in #RGB, #RRGGBB and #RRRRGGGGBBBB syntax, Netscape supported those too. Thank you. This is much clearer than the article.
- alanbernstein 7y ago
  Thanks, I didn't quite follow the explanation in the article, but I'm still confused. When was the decision made to use "dark gray" for something brighter than 50% gray? Why? By whom?
  - jccooper 7y ago
    The real problem is the web color uses the same name, but not the same color. X11 'gray' is rather light (#BEBEBE / 75%), where the W3C 'gray' is significantly darker (#808080 / 50%). (X11 also had a 'web gray' that matched this!) The X11 'dark gray' at 66% (rather like the W3C 'silver') thus made sense in its color set, though not when imported into a different set. You might say, "this means X11 only had very light grays", and from a named perspective this seems to be true. I'm not certain if this is due to UI fashion or a physical artefact of the monitors. But in any case, if you wanted darker shades in X11, you could use 'grayNN', from grey0 (black) on up to grey100 (white).
    - alanbernstein 7y ago
      Ah, thanks, now I get it. Also not sure about the reason for the x11 naming, but I can imagine the gamma curve influencing the choices for those values.
  - resoluteteeth 7y ago
    X11 started using dark gray to mean 66% gray at some point in the 80s. https://en.wikipedia.org/wiki/X11_color_names https://en.wikipedia.org/wiki/X11_color_names https://unix.stackexchange.com/questions/72919/what-are-the-origins-of-rgb-txt https://unix.stackexchange.com/questions/72919/what-are-the-...
samirm 7y ago
This has always bothered me.
Theodores 7y ago
Can anyone remember 'web safe colours'? https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors In the days when you could even get an SGI workstation with 8 bit colours the 'web safe colours' was a safe bet. I very much like the colour names, although some are way off. In particular 'chocolate' is more orange than chocolate coloured. I also like the 'black' and 'white' easy colours rather than the hex codes even if it is one or two more bytes.
- jandrese 7y ago
  The old X11 rgb.txt has a lot of historical choices that are dubious today. Randall Monroe built a "better" one[1] from crowdsourced data on the internet, but even he admits that it's too late to change. [1] https://blog.xkcd.com/2010/05/03/color-survey-results/ https://blog.xkcd.com/2010/05/03/color-survey-results/
  - Theodores 7y ago
    "Fuchsia" seems a problem colour. Funny to think Google are using the least well spelt colour for their operating system project.
dublin 7y ago
Once again, an article behind what is effectively a paywall. Medium is perhaps more objectionable than a true paywall, since you have to pay via agreeing to tracking...
derefr 7y ago
A bit of a tangent: given how modern monitors are increasingly being factory color-calibrated and having HDR with zone-controllable backlights, etc.; is there (or could there be) a color space where “brightness” is absolute, i.e. radiated photons per area, measured in e.g. lumens per square millimeter? (Presumably, anything needing to render elements defined in such a color space would need to probe the OS for information about the nits, DPI, and gamma-curve setting of the monitor, and then work backward.) I don’t know if it’s something CSS would adopt, but it’d be neat to be able to create e.g. a JPEG image of the sun that shows up as eye-searingly-bright on all compliant HDR monitors, sitting in a window next to regular windows where “white” just means a not-too-eye-searing shade. What’s CSS’s policy on adopting units that only make sense for certain media, anyway? (E.g. “seconds of arc” as a size measurement for VR displays?)
- skavi 7y ago
  https://github.com/w3c/strategy/issues/18 https://github.com/w3c/strategy/issues/18 there has been some discussion about adopting HDR images for the web.

89 points by pplonski86 7y ago

Tempest1981 7y ago

If DarkGray is too bright (66%), there's always DimGray at #696969 (41%)

TSiege 7y ago
nice

teddyh 7y ago

TLDR: “dark-gray” came from when the X11 color set was imported into CSS, while “gray” came from the original HTML colors.

inflatableDodo 7y ago

>Even today in the latest CSS draft the color “dark-gray” produces a lighter shade than the color “gray”, and just to prove naming things is hard both grey and gray are valid color names. Now if we can just make both color and colour into valid colour names, I'll be happy.

xpil 7y ago
You mean, valid color names right?

thristian 7y ago

Originally, HTML didn't support any kind of colours at all. Netscape introduced HTML attributes for colouring things, and it passed the colour names straight through to X11. Because X11 shipped with a suite of pre-defined colour names, Netscape supported those pre-defined colour names. Because X11 supported custom colours in #RGB, #RRGGBB and #RRRRGGGGBBBB syntax, Netscape supported those too. Meanwhile, Microsoft wanted in on the browser game, but a lot of people still used Windows on machines with 16-colour VGA rather than high-end workstations with true-colour displays, so Internet Explorer couldn't offer the hundreds of named colours Netscape could. Instead, it provided names for the standard Windows 16 colour palette: black, maroon, green, olive, navy, purple, teal, silver, gray, red, lime, yellow, blue, fuchsia, aqua, white.

resoluteteeth 7y ago
> Netscape introduced HTML attributes for colouring things, and it passed the colour names straight through to X11. Because X11 shipped with a suite of pre-defined colour names, Netscape supported those pre-defined colour names. Because X11 supported custom colours in #RGB, #RRGGBB and #RRRRGGGGBBBB syntax, Netscape supported those too. Thank you. This is much clearer than the article.
alanbernstein 7y ago
Thanks, I didn't quite follow the explanation in the article, but I'm still confused. When was the decision made to use "dark gray" for something brighter than 50% gray? Why? By whom?
- jccooper 7y ago
  The real problem is the web color uses the same name, but not the same color. X11 'gray' is rather light (#BEBEBE / 75%), where the W3C 'gray' is significantly darker (#808080 / 50%). (X11 also had a 'web gray' that matched this!) The X11 'dark gray' at 66% (rather like the W3C 'silver') thus made sense in its color set, though not when imported into a different set. You might say, "this means X11 only had very light grays", and from a named perspective this seems to be true. I'm not certain if this is due to UI fashion or a physical artefact of the monitors. But in any case, if you wanted darker shades in X11, you could use 'grayNN', from grey0 (black) on up to grey100 (white).
  - alanbernstein 7y ago
    Ah, thanks, now I get it. Also not sure about the reason for the x11 naming, but I can imagine the gamma curve influencing the choices for those values.
- resoluteteeth 7y ago
  X11 started using dark gray to mean 66% gray at some point in the 80s. https://en.wikipedia.org/wiki/X11_color_names https://en.wikipedia.org/wiki/X11_color_names https://unix.stackexchange.com/questions/72919/what-are-the-origins-of-rgb-txt https://unix.stackexchange.com/questions/72919/what-are-the-...

samirm 7y ago

This has always bothered me.

Theodores 7y ago

Can anyone remember 'web safe colours'? https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors In the days when you could even get an SGI workstation with 8 bit colours the 'web safe colours' was a safe bet. I very much like the colour names, although some are way off. In particular 'chocolate' is more orange than chocolate coloured. I also like the 'black' and 'white' easy colours rather than the hex codes even if it is one or two more bytes.

jandrese 7y ago
The old X11 rgb.txt has a lot of historical choices that are dubious today. Randall Monroe built a "better" one[1] from crowdsourced data on the internet, but even he admits that it's too late to change. [1] https://blog.xkcd.com/2010/05/03/color-survey-results/ https://blog.xkcd.com/2010/05/03/color-survey-results/
- Theodores 7y ago
  "Fuchsia" seems a problem colour. Funny to think Google are using the least well spelt colour for their operating system project.

dublin 7y ago

Once again, an article behind what is effectively a paywall. Medium is perhaps more objectionable than a true paywall, since you have to pay via agreeing to tracking...

derefr 7y ago

A bit of a tangent: given how modern monitors are increasingly being factory color-calibrated and having HDR with zone-controllable backlights, etc.; is there (or could there be) a color space where “brightness” is absolute, i.e. radiated photons per area, measured in e.g. lumens per square millimeter? (Presumably, anything needing to render elements defined in such a color space would need to probe the OS for information about the nits, DPI, and gamma-curve setting of the monitor, and then work backward.) I don’t know if it’s something CSS would adopt, but it’d be neat to be able to create e.g. a JPEG image of the sun that shows up as eye-searingly-bright on all compliant HDR monitors, sitting in a window next to regular windows where “white” just means a not-too-eye-searing shade. What’s CSS’s policy on adopting units that only make sense for certain media, anyway? (E.g. “seconds of arc” as a size measurement for VR displays?)

skavi 7y ago
https://github.com/w3c/strategy/issues/18 https://github.com/w3c/strategy/issues/18 there has been some discussion about adopting HDR images for the web.