[css-color-4] Renaming gray()

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. I just tried it with a friend and his response verified what I thought.
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?

[1]: http://dev.w3.org/csswg/css-color-4/#grays

Lea Verou ✿ http://lea.verou.me ✿ @leaverou

Received on Wednesday, 23 July 2014 18:02:13 UTC