White and black are out of gamut

[jameshfisher]

I was trying this out to create a color range, like so:

  --color-primary-100: lch(100%  10 230);
  --color-primary-90:  lch( 90%  10 230);
  --color-primary-80:  lch( 80%  10 230);
  --color-primary-70:  lch( 70%  10 230);
  --color-primary-60:  lch( 60%  10 230);
  --color-primary-50:  lch( 50%  10 230);
  --color-primary-40:  lch( 40%  10 230);
  --color-primary-30:  lch( 30%  10 230);
  --color-primary-20:  lch( 20%  10 230);
  --color-primary-10:  lch( 10%  10 230);
  --color-primary-0:   lch(  0%  10 230);

However, I quickly found that it's not possible to represent white or black! For example:

$ node
> const postcssLabFunction = require('postcss-lab-function');
> const postcss = require('postcss')([ postcssLabFunction() ]);
> postcss.process('body { background: lch(100% 10 230); }').css;
'body { background: rgb(236, 255, 255); }'
> postcss.process('body { background: lch(  0% 10 230); }').css;
'body { background: rgb(  0, 6, 17); }'

I was strongly expecting these to come out as RGB white and black, i.e. rgb(255, 255, 255) and rgb(0, 0, 0). This expectation was due to:

• The spec, which says "The first argument specifies the CIE Lightness. This is typically a number between 0% (representing black) and 100% (representing white)." Since my first argument is 100%, the output should be "white".
• This LCH color picker, which outputs white (i.e. rgb(255, 255, 255)) for the same arguments.

The difference between your implementation and the LCH color picker seems to be the clamping function. Your clamping function clamps each channel to the range 0...255. But the LCH color picker's clamping function turns down the c channel until the output is within the sRGB gamut. This, IMO, gives much better results.

[jameshfisher]

I could contribute this change, if you're open to it.

[romainmenke]

Hi @jameshfisher Out of gamut color mapping wasn't specced until just a few weeks ago.
There is an ongoing effort to implement this here : csstools/postcss-plugins#70

With the current draft those inputs convert to :

  --color-primary-100: rgb(254,  255, 255);
  --color-primary-90:  rgb( 207,  231, 241);
  --color-primary-80:  rgb( 180,  202, 212);
  --color-primary-70:  rgb( 153,  175, 185);
  --color-primary-60:  rgb( 127,  148, 158);
  --color-primary-50:  rgb( 101,  123, 132);
  --color-primary-40:  rgb( 77,  98, 106);
  --color-primary-30:  rgb( 54,  74, 82);
  --color-primary-20:  rgb( 31,  51, 59);
  --color-primary-10:  rgb( 10,  30, 38);
  --color-primary-0:   rgb(  0,  0, 0);

[Antonio-Laguna]

Closing this issue to archive it so the discussion can continue on the issue mentioned above.