10 ms·

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’

by tobr 7y ago

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.

kuon 7y ago
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/ https://www.alanzucconi.com/2016/01/06/colour-interpolation/
- tobr 7y ago
  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.
  - mark-r 7y ago
    Here's a comparison between different methods of creating a gradient. https://stackoverflow.com/a/49321304/5987 https://stackoverflow.com/a/49321304/5987
  - kuon 7y ago
    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.
  - dimovich 7y ago
    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 http://www.iquilezles.org/www/articles/palettes/palettes.htm [2] https://github.com/thi-ng/color/blob/master/src/gradients.org#implementation https://github.com/thi-ng/color/blob/master/src/gradients.or...
anchpop 7y ago
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.
- jfkebwjsbx 7y ago
  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?
  - anchpop 7y ago
    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.
    - ThJ 7y ago
      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.
      - mark-r 7y ago
        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.

by tobr 7y ago

kuon 7y ago

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/ https://www.alanzucconi.com/2016/01/06/colour-interpolation/

tobr 7y ago
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.
- mark-r 7y ago
  Here's a comparison between different methods of creating a gradient. https://stackoverflow.com/a/49321304/5987 https://stackoverflow.com/a/49321304/5987
- kuon 7y ago
  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.
- dimovich 7y ago
  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 http://www.iquilezles.org/www/articles/palettes/palettes.htm [2] https://github.com/thi-ng/color/blob/master/src/gradients.org#implementation https://github.com/thi-ng/color/blob/master/src/gradients.or...

anchpop 7y ago

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.

jfkebwjsbx 7y ago
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?
- anchpop 7y ago
  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.
  - ThJ 7y ago
    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.
    - mark-r 7y ago
      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.