›

Palette gradient algorithms

DanikDanik Posts: 899
edited February 2014 in General
I've implemented a new way to generate gradients between palette colors,
and I have been trying out some different color interpolation methods.
None of them really work that well so I started reading about it and it
actually seems to be a very complicated thing to mix colors realistically.

Here are the methods I tried:
image
The first one converts the colors to HSL color space and performs the interpolation there. It works nice for similar hues but breaks down for large hue differences.
The second one is simple RGB interpolation which results in very desaturated colors in the middle.
The last one is an attempt to combine the first two, but is pretty similar to RGB.

I'm not sure if I should spend time on this, but it would be nice to get it right. It might also prove useful if I decide to implement more advanced brushes with color mixing.

What do you think, is it good enough? Does anyone have any insight into this problem?

Comments

  • PajaroidePajaroide Posts: 30
    HSL looks very good to me.
  • UbuUbu Posts: 10
    HSL looks the best. You might also want to consider converting the colors to Lab space. Lab space was specifically designed so that linear changes correspond to
    what the human eye perceives as a certain amount of color change.
    http://en.wikipedia.org/wiki/Lab_color_space

    This article might be of interest:
    http://www.codeproject.com/Articles/19045/Manipulating-colors-in-NET-Part-1
  • DanikDanik Posts: 899
    Yeah, I might look into using Lab. I made some tests in Photoshop and the gradients are more pleasing than RGB:

    image

    I tweaked the hybrid a bit to get more of the HSL interpolations saturated colors. It's basically interpolating between the RGB and HSL gradients depending on the difference in hue. Opposite hues give 100% RGB and similar hues give more of the HSL interpolated gradient:

    image

  • SpitznaglSpitznagl Posts: 5
    edited February 2014
    Cool!

    In the context of a flood fill gradient generator as shown in one of the images, the Lab one looks by far the best to me. The colours are way more spread out where the RBG produce a clear junction.

    If you are instead working on those algorithms to generate sequences of colours to choose from as I guess you are, then I personally would probably only use HSL. In that context, it would be nice to have it generate the exact colour values, e.g., pure red & pure blue @50/50 should give ff00ff instead of ff00fb.

    Of course it doesn't really changes much to not have it precise, but you know, some of us are just that anal about this sort of things ;) If it is for a flood fill type of application, then never mind.

    If the slight error is caused by the resolution of the Hue (360 possible values), a solution could probably be to start by calculating more precise hues from the RBG values of the two original colours and by rounding the results appropriately.
  • DanikDanik Posts: 899
    Yeah, Lab is the nicest I think. Seems like the conversion is a bit complex though so I will settle with the the hybrid method for now.

    The RGB color space (256*256*256) is quite a lot bigger than HSL (360*100*100) so there will be some loss when going from RGB to HSL and back (like ff00ff turning into ff00fb). So yeah, maybe it would make sense to store HSL at higher precision. Hmm.
  • UbuUbu Posts: 10
    If you want to try Lab conversions, all the formulas you need with c# equivalents can be found at the end of this link:
    http://www.codeproject.com/Articles/19045/Manipulating-colors-in-NET-Part-1

    If not, I do agree with @Spitznagl when it comes to exact color values and sequences of colors to choose from (not flood fill).
  • DanikDanik Posts: 899
    Ah, I missed that part of the article. Thanks!
Sign In or Register to comment.