apps icon indicating copy to clipboard operation
apps copied to clipboard

XYZ color picker confuses 0..1 and 0..100% range

Open svgeesus opened this issue 3 years ago • 8 comments

The XYZ-d65 color picker has 0..100 scale but gives black for [0,0,0] and an oog color close to white for [1,1,1]; it is not possible to pick any other colors due to the slider granularity.

image

svgeesus avatar Jul 01 '22 13:07 svgeesus

@LeaVerou

svgeesus avatar Jul 04 '22 12:07 svgeesus

Maybe the max granularity shouldn't be 1 but .1? Take a look here and tell me how you think we should fix this generically. We can't just special case XYZ.

LeaVerou avatar Jul 04 '22 13:07 LeaVerou

let {name, range, refRange} = meta;
	name = name || id;
	range = range || refRange || [0, 100];
	let [min, max] = range;
	let step = (max - min) / 100;
	if (step > 1) {
		step = 1;
}

Since xyzd65 and xyzd50 don't declare a range, they end up with [0, 100] and (100-0)/100 should be 1 but is, I suspect, something like 1.00000000000001 and thus greater than 1. An epsilon in there would catch this and make it more robust. Although why forcing there to be only 100 steps is beneficial could also be examined.

svgeesus avatar Jul 04 '22 14:07 svgeesus

Giving the relative XYZs a reference range of [0, 1] would also work.

svgeesus avatar Jul 04 '22 14:07 svgeesus

(confirming this UI bug still exists)

svgeesus avatar Jan 16 '23 17:01 svgeesus

Is this issue still present on https://apps.colorjs.io/picker/ ? If so, please transfer to the apps repo.

LeaVerou avatar May 28 '24 00:05 LeaVerou

Confirming that the issue still exists, because [0..1] and [0..100] are being confused

svgeesus avatar May 28 '24 09:05 svgeesus

What should the range be for each XYZ space?

LeaVerou avatar May 28 '24 18:05 LeaVerou

As I said earlier:

Giving the relative XYZs a reference range of [0, 1] would also work.

svgeesus avatar Nov 18 '24 22:11 svgeesus

@DmitrySharabin could we integrate the <color-picker> component to use here so we don't maintain similar code in two places?

LeaVerou avatar Dec 14 '24 19:12 LeaVerou

@DmitrySharabin could we integrate the <color-picker> component to use here so we don't maintain similar code in two places?

@LeaVerou, I integrated the <color-picker> component (preview and corresponding PR). Please take a look.

DmitrySharabin avatar Dec 16 '24 17:12 DmitrySharabin

Thanks @DmitrySharabin! Is this issue present in <color-picker> too? If not, we should close.

LeaVerou avatar Dec 23 '24 18:12 LeaVerou

Is this issue present in <color-picker> too?

Unfortunately, it does. As @svgeesus mentioned, since xyzd65 and xyzd50 don't declare a range, they end up with [0, 100] (here and here). In <color-picker>, we don't fall back to [0, 100] (when calculating the default color) expecting that all the color spaces declare ranges for their coords (that make <color-picker> throw for the mentioned color spaces).

So, to solve this issue, we should probably declare ranges for those spaces. As Chris said:

Giving the relative XYZs a reference range of [0, 1] would also work.

DmitrySharabin avatar Dec 24 '24 12:12 DmitrySharabin

Yeah, let's do that.

LeaVerou avatar Dec 25 '24 00:12 LeaVerou

Yeah, let's do that.

Done.

DmitrySharabin avatar Dec 25 '24 13:12 DmitrySharabin