search

regorxxx / chroma.js

JavaScript library for all kinds of color manipulations
https://regorxxx.github.io/chroma.js/
Other
4 stars 3 forks source link

[BUG] css colors are wrong (lab/lch/oklab/oklch) #12

Open gka opened 3 months ago

gka commented 3 months ago

Describe the bug This fork of chroma.js returns wrong CSS colors.

To Reproduce Steps to reproduce the behavior:

  1. convert a color like yellow to CSS lab using chroma('yellow').css('lab');
  2. copy the CSS color and use it in a website
  3. see that browsers interpret the color as #ecff00 and not #ffff00

or see https://observablehq.com/d/3d92b4e33590750f

Expected behavior

I would expect to be able to use the CSS representations of a hex color in a browser and get the same color.

Screenshots

image

Additional context The problem is that W3C uses a different white reference point for their CIE Lab implementation (D50). They're also using a slightly different OKLab implementation.

FYI, gka/chroma.js now also supports exporting colors as modern CSS colors in lab/lch/oklab/oklch. I stumbled upon the differences in how browsers interpret CIELab when working on this feature. My solution was to change the CIELab implementation so users are able to change the Lab reference point. Also, when parsing or exporting CSS colors in Lab/Lch, chroma.js will automatically change to the D50 reference point to ensure that the colors are matching.

gka commented 3 months ago

Ah, and I forgot to mention that there's another problem with your lab2css implementation.

here https://github.com/regorxxx/chroma.js/blob/90cc076bf9e3c6bf40e40a59f4c7b140b37bdf94/src/io/css/lab2css.js#L16-L17

you are taking the absolute a and b components of CIELab and simply append a % sign to it. But in W3C lab colors, 100 and 100% are not the same values! In fact, 100% equals 125, see specs.

gka commented 3 months ago

also: would be happy to work towards "merging" our two versions of chroma.js. feel free to jump on our Discord chat any time.