.whiteness turns white to red

[mwinche]

In my node REPL (color@0.10.1, node@4.2.1):

[temp (master)]$ node
> var Color = require('color');
undefined
> new Color('#ffffff').whiteness(5).hexString()
'#FF0D0D'
> 

That doesn't seem right to me.

[MoOx]

To be honest I cannot confirm this bug. We should find a reference somewhere.

[Qix-]

This is correct functionality.

.whiteness() and its sister method .blackness() are part of the HWB color model, which include Hue, Whiteness, and Blackness.

In short, hue defaults to 0°, or red. The .whiteness() and .blackness() methods work on a 0-100 scale, so setting .whiteness(5) takes most of the white out of the red - 95% to be exact.

This brings it very close to FF0000. In fact, 0xFF * (5 / 100) == 0x0D, hence 0xFF0D0D.

Great question :) Perhaps this could be re-worked into an API suggestion. Admittedly, I had to double check this was the case as well because the hue(), whiteness() and blackness() methods are in no way grouped together to indicate they're referring to the HWB model.

Hope this helps!

[MoOx]

Thanks for this great explanation 👌🏼

[mwinche]

Indeed, great explanation! I guess I'm using the wrong tool for the job.

[Qix-]

@mwinche what are you trying to achieve?

[mwinche]

Basically, trying to take a color and make it 5% "whiter". Specifically, using it within cssnext:

box-shadow: color(var(--accent) whiteness(5%)) 0px 1px 1px 0px inset;

When the accent happened to be white or off-white it was doing a red box-shadow, which was not what I intended. Traced it all the way down to this color module.

[mwinche]

Playing around some more, looks like what I needed was this:

box-shadow: color(var(--accent) lightness(+5%)) 0px 1px 1px 0px inset;

Regardless, .whiteness turning white to red still felt weird, hence the issue.

[Qix-]

Yep I believe you're looking for .lighten() from this package. Usually when grayscale colors go to a reddish tint, it's a sign that you're working with a Hue-based model. 👍

[mwinche]

Thanks for the tip!

[dy]

@mwinche .whiteness(5) should be understood as 'take the basic pure most saturated color and turn it's whiteness to 5%'. In case of #fff it is impossible to infer which color is the basic one, because it can be any. By default it is red (hue = 0⁰). Hope it makes any sense)

[mwinche]

Yeah, maybe I should take some time and learn all these color models, seems interesting. I'm sure HWB wouldn't exist if there wasn't some use case for which it was ideally suited.

[Qix-]

HWB was invented by the guy who invented HSL and HSV iirc. HWB is supposed to be more user-friendly. I'd have to agree. It's just not used very much.