Hacker News Reader

Comment by tobr | Hacker News Reader

Maybe someone in this thread would have an answer to this question: how do you interpolate between two colors in HSLUV? Just interpolating each parameter doesn’t give the right result, since eg mixing two saturated complementary colors would create an equally saturated color, rather than some shade of gray.

Converting to CIELUV and mixing there doesn’t seem safe since I don’t think it’s a “convex” color space; you run the risk of ending up with colors that can’t be reproduced properly on a screen.

View on HN

You almost always want to convert to CIELAB when doing things like averaging or interpolating colors. It is true that the sRGB gamut in CIELAB is not convex - this is less of an issue if you can use bigger color spaces like scRGB but that is often not the case. My advice in this case is to do as much as you can in LAB and then clamp your output to the range of values supported by your color space - i.e. if you get RGB(100, 300, -10) convert that to RGB(100, 255, 0). There are more sophisticated things you can do if you have to but this situation doesn't come up super often so it's not really worth the trouble in most cases.

Why not convert to linear sRGB (with higher bits per sample) instead? Something like what PNG supports for 16-bits. Does that give incorrect results too compared to going through CIELAB?

For interpolation, averaging, etc. anything based on RGB is not going to give good results. For example, if you average pure red and pure blue, you should get something like pure purple. But if you do that in RGB you'll get #7f007f, a much darker color than either pure red or pure blue. If you do it with LAB, you'll get #ca0088, which is perceptually about as bright as either of the colors you started with.

It helps to use linear gamma when manipulating RGB values. Linear gamma fixes most issues with interpolating and mixing RGB values and that’s also why most modern CG pipelines use it. It produces the most natural results.

Yes linear gamma generates the most natural results, because that's the way physical light combines. Gamma was a great invention for display and transmission but it sure wrecked our ability to mix colors.

Thank you!

Thank you for the advice! I thought the appeal of HSLUV was that it has distorted CIELUV as little as necessary to map it perfectly onto three predictable parameters. Thus it would never require clamping. I was hoping there would be an official way to convert the hue/saturation to Cartesian coordinates without losing that benefit, but perhaps it wouldn’t be too hard to do myself.

By interpolating, you mean like given two colors, you want to generate the intermediate gradient colors, like on this article[1]? If that's the case, I don't see why interpolating two saturated colors would provide a shade of gray. Can you clarify?

[1]: https://www.alanzucconi.com/2016/01/06/colour-interpolation/

Yeah, basically build a linear (whatever that means in a polar color space) gradient between two colors.

If you interpolate a bright red and bright cyan (complementary colors), the midpoint would be gray in most color spaces. You can try it in your link. But in polar color spaces (like HSLUV and most of the ones starting with H) if you just lerp each of the numbers you have to pick a direction for the hue, and your cyan—red has to pass through a saturated green, yellow or blue, magenta. That rainbow effect can be nice but doesn’t feel linear. It also creates discontinuities when you change a color stop enough.

Here's a comparison between different methods of creating a gradient. https://stackoverflow.com/a/49321304/5987

Yes, now I see what you mean. Yeah HSLuv is not good for that. The SO answer @mark-r pointed gives a good information.

Gradients are complicated beasts, and are often rendered wrong, even by popular softwares like browsers.

Here is a cosine based gradient generation [1]. And an example implementation from thi.ng/color [2].

[1] http://www.iquilezles.org/www/articles/palettes/palettes.htm

[2] https://github.com/thi-ng/color/blob/master/src/gradients.or...

Reply on news.ycombinator.com