This looks fantastic for working with colors, and from a great developer too. A very very similar js library is Culori [0, 1], which I discovered on the original Oklab introduction post [2].<p>If you're doing generative artwork or any procedural work with a non-fixed palette, a good color library and working in linear or Oklab based colorspace is a must. Using sRGB or HSV/B when interpolating for gradients or generating palettes or complementary colors is extremely painful; a 50% brightness (HSV) yellow is visually much brighter than a 50% brightness purple, with similar issues cropping up for saturation. Balancing the lighting and contrast of programmatically generated colors is so much simpler when you have a perceptually uniform colorspace like OkLCh, or linear RGB if you're working with predefined hex values.<p>[0]: <a href="https://culorijs.org/" rel="nofollow">https://culorijs.org/</a><p>[1]: <a href="https://github.com/Evercoder/culori" rel="nofollow">https://github.com/Evercoder/culori</a><p>[2]: <a href="https://bottosson.github.io/posts/oklab/" rel="nofollow">https://bottosson.github.io/posts/oklab/</a>
really glad to see this released, because it will help popularize the new lch/oklch color spaces, which are an improvement over rgb/hsl.<p>with that said, i did some experimentation with these new color spaces recently and found that even these are not foolproof for those of us who don't want to be steeped in the depths of color spaces and human perception. for instance, mentioned in the article is automatic gamut mapping for when you try to display a color that's outside the gamut. seems like that's a good thing since it would take care of some rare edge cases, right?<p>no, the edge cases are all over the place. the gamut "depth" is dependent on the component values (like lightness and chroma), so if you want to go from a light red hue to a light yellow hue, you can't just change the hue component, because the lightness and chroma values might put the target color out of bounds. that's where the automatic gamut mapping kicks in. but guess what? the various browser engines currently have their own algorithms, and they that don't pick the same nearby colors.<p>the evil martians oklch color picker[0] shows this visually. if you look at the hue vs. lightness graph, notice how jagged the (planar projection of the) gamut is there. for any given horizontal line (constant lightness), you might end up out of bounds on the chroma component for a chosen hue. this can happen in any of the 3 dimensions.<p>also, while oklch is more perceptually even generally, there are gradient examples where it's not much better (i think orange/brown gradients is one of those cases, but i'm not certain, offhand). color is apparently quite hard, so i'm not knocking the effort or the improvements, but there are still some gotchas remaining for designers/developers.<p>[0]: <a href="https://lch.evilmartians.io/" rel="nofollow">https://lch.evilmartians.io/</a>
I delved into the bewildering world of color last Christmas/New Year when developing a new reduce-palette/dither filter for my JS canvas library. The number of different color spaces available, converting between color spaces, calculating color distances - this stuff is mad and frustrating in equal measure!<p>I built my own solution, then afterwards came across the Color.js repo. I have a strict "no dependencies" rule for my library; discovering Color.js is the closest I've ever come to breaking that rule.
This is nice!<p>I can't help but wonder why everyone still names their API functions Foo_to_Bar when the reverse Bar_from_Foo is so much more readable when chaining conversions.<p>Compare the example here:<p><pre><code> let myoklch =
OKLab_to_OKLCH(XYZ_to_OKLab(D65_to_D50(lin_ProPhoto_to_XYZ(lin_ProPhoto(mycolor)))))
</code></pre>
With what it could have been if it had used Bar_from_Foo naming instead:<p><pre><code> let myoklch =
OKLCH_from_OKLab(OKLab_from_XYZ(D50_from_D65(XYZ_from_linProPhoto(lin_ProPhoto(mycolor)))))</code></pre>
I'm the maintainer of `color`, this looks nice and high level. Will start to point people to this when they ask for these higher level features. Great work!
I used this recently. I wanted to create a timeline UI for DemoTime with elements on the timeline matching the gradient background.<p>Color.js is admittedly overkill for this, but it let me import just the interpolate function and it did the trick.
My god this would have been amazing when I worked at a custom/ print on demand merch co (like Teespring - people upload their own designs - except there was no minimum). Working through color spaces with custom uploaded images for their "shop" and print was HELL