chroma.js icon indicating copy to clipboard operation
chroma.js copied to clipboard

Some documentation about _interpretation_ of chroma.js colors, i.e. color space, would be useful

Open garyo opened this issue 3 years ago • 1 comments

Could you document the expected display transform (is it sRGB always?) and source interpretation (linear or sRGB or some other space?) Without that info, the color values are a bit meaningless. For example, web CSS colors are in sRGB, so #808080 (0.5 in each channel) when passed through sRGB display transform is much darker than 50% brightness, and something like #c0c0c0 is closer to 50% brightness. In order to use chroma.js, I think users have to understand which spaces transforms are done in and how the values are interpreted. For instance, when interpolating, do you convert to scene-linear, interpolate, and convert back? (As suggested by, for instance, this.) Some documentation on this would be useful.

Note that I'm not talking about color models in the HLS/CIELuv/RGB sense, but the actual space, i.e. chromaticities and transfer functions, such as scene-linear, rec709, sRGB, Adobe RGB, Rec2020, etc. -- see references such as this.

garyo avatar Aug 04 '20 21:08 garyo

The hex-string is defined in the same way as web-colors, so sRGB (0-255). Everything "RGB" here is sRGB clipped to sRGB 0-255, in fact.

Interpolating, mixing, and blending have their own "mode" parameter; see https://vis4.net/chromajs/#chroma-mix. The default is "lrgb", i.e. linearized sRGB space. The color-scale unfortunately defaults to (gamma) sRGB, but a .mode() operation can be used to change it. See https://vis4.net/chromajs/#scale-mode.

WRT the CMYK space, it needs a big "don't use" on it.

Artoria2e5 avatar Apr 09 '21 15:04 Artoria2e5