Description
5 years ago, I opened this mailing list issue:
The gray() functional notation [1] is a great idea for specifying desaturated colors with varying degrees of transparency in a concise and readable way. However, I’m not sure about the naming. Right now, the named color
gray
corresponds to gray(50%). gray(0%) is black and gray(100%) is white.
After using this function myself for a while (through emulating it in Sass), I’m starting to think its naming is quite unintuitive. The usual assumption with functions that take a 0-100% parameter is that 100% gives the full “effect” of the function name, in this case, gray. Ask any random person what color they think gray(100%) represents, I doubt they’d guess white. [...]
For example, think of CSS filter functions: sepia(100%) colorizes the image as sepia, values < 100% are a lighter version of the effect. Same with invert(), grayscale() etc.
If we want to keep the link to hsl(), white() might be a better name. Although, I’m not sure if white(0%) == black is exactly intuitive, but it seems more intuitive than gray(0%).
Or, we might reverse the parameter and have black(100%) == black and black(0%) == white, which is on par with how many real life things work, such as (grayscale) printing.
Or maybe someone else has a better idea?
There was consensus that the name needs to change, but not to what. So I started a survey, which also confirmed that the name gray()
as a bad idea.
The last post in the thread is by @tabatkins saying that "the results are impressive, let's let it run for another week and take what people decide".
Well, it ran for 5 years, and these are the results:
It looks like rgb(<number>)
is overwhelmingly leading, but that is likely just a result of authors today being more familiar with the rgb()
function. There is a famous quote (somewhat dubiously) attributed to Henry Ford: “If I had asked people what they wanted, they would have said faster horses.” The fact that RGB is not user friendly is well established in the literature, so I don't think it should be the only solution for easy specification of grayscale colors (though it may be nice to have it as an additional shortcut).
Apart from that, there doesn't seem to be any clear consensus on the name, besides that gray()
is not the best option.
Renaming the function also eliminates the gray
/grey
confusion elaborated in #3298.
Since we're already working in Color 5, it would be nice to finally have a resolution on this, if it's going to be renamed.
To recap, here are some ideas for names that have been mentioned:
black()
withblack(0%)
=white
andblack(
100%) =
black`white()
withwhite(0%)
=black
andwhite(
100%) =
white`grayscale()
lightness()
darkness()
shade()
I personally feel much more strongly that gray()
is a poor name choice than I feel that any of the above should be the one of choice. I think they're all better than gray()
. Slight preference for white()
as the absence of light producing black makes more sense than the absence of darkness producing white. We should also make sure that 50% is the gray that is perceptually between white and black, and not just hsl(0,0%,50%)
.
Whichever name you propose, please write it out with 0%, 50%, 100% and make sure it still makes sense and reads naturally for the color it produces.