Add culori to benchmark

[ai]

Hi. I am very interested in new color library for oklch.com.

We are using culori and if benchmark will show that your tool is faster I will think about switching.

Can you add it to benchmark?

[mattdesl]

I've added a culori benchmark inside test folder, which tests converting OKLCH to P3 and then gamut mapping to P3. I'm not familiar with their API so if there is a more optimal method of doing that, let me know.

Testing with input type: Random Sampling in P3 Gamut
Conversion OKLCH to P3 --
Culori: 52.53 ms
Ours: 17.28 ms
Speedup: 3.0x faster

Gamut Mapping OKLCH to P3 Gamut --
Culori: 84.81 ms
Ours: 16.56 ms
Speedup: 5.1x faster

Testing with input type: Random Sampling in OKLab L Planes
Conversion OKLCH to P3 --
Culori: 44.20 ms
Ours: 12.92 ms
Speedup: 3.4x faster

Gamut Mapping OKLCH to P3 Gamut --
Culori: 1592.35 ms
Ours: 23.39 ms
Speedup: 68.1x faster

Testing with input type: Random Sampling in OKLab L Planes (Fixed Cusp)
Conversion OKLCH to P3 --
Culori: 46.21 ms
Ours: 12.98 ms
Speedup: 3.6x faster

Gamut Mapping OKLCH to P3 Gamut --
Culori: 1554.91 ms
Ours: 17.96 ms
Speedup: 86.6x faster

I've also benchmarked the bundle size: it is smaller than Colorjs, coming in at ~43 kb (compare to ~3.5 kb for @texel/color).

It should be noted that @texel/color is effectively a bit lower-level than culori; it doesn't aim to have complete parsing/serialization that matches CSS spec, which I've enjoyed as a feature of oklch.com input fields, so I doubt you'd be able to move off it completely. I would probably only consider the swtich if you feel your app is bottlenecked; or perhaps only use @texel/color to optimize the hot code paths, but note it will introduce slight differences in results (the matrices in culori do not seem to match exactly, I haven't dug into what they are using).

EDIT: The benchmarks had an error which should be fixed now; culori gamut mapping gets a little closer to @texel/color when input is already in-gamut.

[ai]

Amazing, thanks. I added task to try @texel/color at least for chart painting.

[danburzo]

Thanks @mattdesl for including Culori in the benchmark (author here), and congrats on the project, the performance looks amazing on what is probably the most computationally-intensive color operation! We are using binary search for gamut mapping, which throws a wrench into the Big O, so I’m not surprised by the difference :-) I’ve added @texel/color to the list of resources. In regards to the matrices, there’s an open issue to align with everybody else for better compat.