csstools/postcss-color-mod-function

Blackness modifier wrong output

AlexandreBonaventure opened this issue · 2 comments

AlexandreBonaventure commented

Hi,
When using blackness modifier I stumbled upon some discrepancies.
I made a PR #14 where you can see the test suite failing:

given color: color-mod(#f7f8f8 blackness(7%));
expected color: rgb(238, 238, 238);
actual color: rgb(247, 237, 237);

The output expected is given by https://colorme.io/

jonathantneal commented

colorme is not necessarily accurate. A lot of earlier implementations did not correctly follow the blending methods provided by the spec. I would need many more details to investigate this issue. The spec provides the math needed to calculate this conversions yourself, if you would like. I may not have time to do this right now.

jonathantneal commented

The conversion done by color-mod is correct. HSL/HWB Adjustments set or adjust the saturation, lightness, whiteness, or blackness of the base color, when the base color is interpreted as an HSL or HWB color, as appropriate. See https://www.w3.org/TR/css-color-4/#hsl-hwb-adjusters.

The example you have provided should convert the RGB hex color to HWB in order to adjust its B channel before converting it back

  1. Start with the hex color #f7f8f8.
  2. Converted to rbg(), this is rgb(247, 248, 248), or rgb(96.86274509803921% 97.25490196078431% 97.25490196078431%).
  3. Converted to hwb(), this is hwb(180deg 96.86274509803921% 2.7450980392156907%).
  4. With the b channel set to 7%, this is hwb(180deg 96.86274509803921% 7%).
  5. Converted to rgb(), this is rgb(96.86274509803921% 93% 93%), or rgb(247, 237, 237).

The RGB to HWB conversion follows http://alvyray.com/Papers/CG/hwb2rgb.htm
The HWB to RGB conversion follows https://www.w3.org/TR/css-color-4/#hwb-to-rgb