[tbabb]

EDIT: Author has pointed out that the interpolation mode can be changed. Very slick!

It looks like this is interpolating in HCL or HSV space— that tends to produce unexpected results, including intermediate colors with unrelated hues (pink between orange and blue?), or sharp discontinuities if one of the endpoints changes slightly (try mixing orange and blue, and then shifting the blue towards teal until suddenly the intermediate pink pops to green).

This document[1] also illustrates pretty well.

Interpolating in RGB space has its own issues (more so if gamma is not handled correctly) due to the human visual system's differing sensitivity to different colors— the result is often that two bright colors will have an intermediate color which is darker than either endpoint.

There's a known solution, thankfully: Mix colors in a perceptual color space like Lab or Oklab[2]. The behavior is very predictable and aesthetically pleasing.

[1] https://observablehq.com/@zanarmstrong/comparing-interpolati... [2] https://bottosson.github.io/posts/oklab/

[pabue]

First of all thanks for the comments and info. I'm actually not doing the color interpolation myself. I'm using chroma.js[1] for the most part.

You can actually change the interpolation mode on the bottom below the color boxes. The default is LCH because I think it looks the best most of the time, but you can use LAB if you prefer that.

[1] https://gka.github.io/chroma.js/

[cmurf]

    CIE L*C*h is based on either CIE 1976 L*a*b* or CIE 1976 L*u*v*, it's just a different representation. <--for formatting or the asterisks vanish.

For displays you're incrementally better off using LChuv. But note that these are very rudimentary color appearance models compared to CIECAM02 and newer, where surrounding color and ambient light can be taken into account. For a given color, surrounding it with two different colors will produce a different color appearance for that given color, i.e. a spot measurement of the given color will of course be the same, but the color in context will be different. It's a feature of human vision. Simultaneous contract, Bezold effect, and so on.

But without display compensation (mapping the CIE color created for given RGB value, such that a color management system can alter the RGB sent to the display in order to preserve color appearance) you will still have the experience of getting a different color for a given encoding on different displays.

How far down the rabbit hole do you want to go? In any case, these are better than HSL and HSV representations.

[yesenadam]

tip: In HN comments you can write \* to display an asterisk.

[famfamfam]

Really cool site! After playing with it for a while, could the CSS gradient for MIX could be changed to use the same number of color stops as there are steps rather than just using the start and end, to better match the chosen interpolation mode? I had a great gradient in LAB space, but the CSS version interpolates through ugly greys in RGB.

[pabue]

That's a great idea! I'm gonna take a look at that.

[tbabb]

Aha! That was a bonehead miss on my part. Very nice, and very slick interface. :)

[pabue]

Well it is very easy to miss. ;) Thank you!

[dimal]

Thanks so much for this info! I had no idea this was a solved problem.