How to get min, max range for a ColorSpace?

[sidewayss]

I don't see a property anywhere to do it. ColorSpace.prototype.inGamut() would seem to access those values, though I don't understand the meta variable. Is there a public property were I can get the min and max for each of the 3 parameters in a ColorSpace? In the moment I want it for number formatting, toFixed() and padStart() to fix numeric display at 5 characters aligned right. For example:

1.000
100.0 
65535 
  255
-0.36
 1.47

A side question: The docs page for supported spaces displays no ranges for the xyz color spaces. Why is that?

[facelessuser]

The Space objects have ranges for their coords. Spaces with no actual gamut will often use refRange, but these are not hard limits as such spaces do not have an actual gamut.

> new Color('red').space.coords.r.range
[ 0, 1 ]
> new Color('red').to('lab').space.coords.l.range
undefined
> new Color('red').to('lab').space.coords.l.refRange
[ 0, 100 ]

As for XYZ, there is no real defined gamut for it. It can represent any color, even imaginary colors.

[sidewayss]

That fills in the gaps. I didn't see (wasn't looking for) a ColorSpace coords property, and wouldn't have thought that each coordinate would be an Object. I missed all that when trying to figure this out in the Chrome Watch pane, and I have only used Color's .coords as an array of 3 Numbers. Now I see that ColorSpace.prototype.coords is an Object.

I see that the xyz spaces do not define refRange for any of the three coords, all they have is a name property. For the moment I'll assume that xyz is unique in that respect, but I'll verify through some later testing. It'll all be fine if any other spaces that don't define refRange can use the same format as xyz :)

The Wikipedia article on XYZ, to which the Supported Color Spaces page for Color.js links, refers to [0-1] ranges. Would that be the non-imaginary range for xyz? I realize that it would more like [0.950428, 1.0, 1.0889], but per my original question, this is for number formatting, so I'm looking for what is almost more of a category than a pair of numbers. Unless you tell me otherwise I'll assume (pending further confirmation) that the non-absolute xyz spaces are single digit + 3 decimals format.

Thanks for all the info.

Edit: Now I see that the Color.js color picker app uses 0-100 for x,y, and z.

[facelessuser]

Now I see that the Color.js color picker app uses 0-100 for x,y, and z.

I think that is a mistake in the color picker app, that's why the colors don't look great when using the space to pick colors. People will often use 0 - 100 for XYZ, but in some case it will be scaled to 0 - 1. I'm not sure where and when the bug crept into the color picker app, but that should get fixed.

There is nothing wrong with using 0 - 100 scaling for XYZ, but Color.js doesn't store XYZ that way, so that is why the color picker app is busted. It may simply be that specifying the refRange would fix it, but I haven't looked at why it breaks yet.

[SoftMoonWebWare]

Aloha!
Just to note that in my testing using my RGB_Calc library file, which uses basically the same RGB to XYZ matrix:
Outputting XYZ values rounded to 4 decimal places was not enough precision to properly convert back to RGB, so 3 would be worse. I now use 7 decimal-place precision when outputting XYZ values as strings. The "original" RGB to XYZ matrix had 4-decimal precision (https://en.wikipedia.org/wiki/SRGB) but newer specs (see the same Wikipedia link) say to use higher precision - 7 decimal places in the matrix. Bruce Lindbloom (to whom this repo refers to in comments) also uses 7 decimal place precision in his matrixes (see: http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html).

Also, below, you say to limit your XYZ inputs to [0,1].

XYZ(0.787078 0.9157582 1.0813994) === RGB(204 255 255) for instance.

"Aqua" with almost no chroma. Your limits will be too small for edge cases.

Good luck!

[sidewayss]

@SoftMoonWebWare - Thanks for your concern, but the number of decimal places here is purely for display purposes. It won't affect any color conversions I might be doing or colors that I display. It's for displaying the color coordinates. As for the [0, 1] range, again it won't limit any actual values, it's just a way of classifying xyz-d50 and xyz-d65 as displaying with a single digit and 3 decimal places.

[sidewayss]

Thanks for the heads up. Yea, I started with an rgb color then switched the <select> to xyz-d65 and saw that the sliders were at the bottom (left). I played with the sliders and it was an interesting experience, passing through yellow in different ranges as I approached 100. But what do I know about the XYZ color space?

I assume that refRange is used in Supported Color Spaces docs page. I haven't checked all the spaces, but the few I've tried all match, including the xyz spaces as undefined.

For my purposes I can simply default to [0, 1] for the range. I won't be enforcing anything, just formatting the numbers in a tabular way, numbers I'll be getting from Color.js. The only user input is text that goes through Color.to() to become a Color instance.