in Maths, Tutorial, Unity

The Secrets of Colour Interpolation

This post discusses about the tricky problem of colour interpolation, and explores possible solutions. Many software and engines offer read-to-use functions to interpolate colours. In Unity, for instance, Color.Lerp is available and does its job pretty nicely. Use the interactive swatch below to see how Color.Lerp works.

There’s nothing wrong in using these functions, as long as you know what the deal with colour interpolation is.

Understanding interpolation

Interpolation is a technique that allows you to “fill a gap” between two numbers. Most APIs expose linear interpolation based on three parameters: the starting point a, the ending point b and a value t between 0 and 1 which moves along the segment that connected them:

    \[c = a + \left(b-a\right)*t\]

When t=0, a is returned. When t=1, a+\left(b-a\right)=b is returned instead. The beauty of this formula is that is easy to understand, efficient to implement, and it works in any dimension. Lerping in two dimension only requires to independently lerp the X and Y components. Lerping always returns points on the line that connects a and b, regardless of the number of dimensions. A standard RGB lerp can be done as such:


If it’s true that linear interpolation works as expected in three dimensions, the same cannot say for colours. There’s a fundamental difference between the XYZ and RGB spaces: the way the human eye perceive colours. While it make sense to connect two points in a 3D space with a line, the same doesn’t always apply for points in the RGB space. Interpolating the R, G and B components independently offers no guarantee on the hue of the intermediate colours. As Stuart Denman highlights in his Improve Color Blending, the RGB space of cyan and red meet halway in grey. A new hue appears because the RGB space does not capture how Humans perceive colours very well.

The next pages of this post will explore better ways to interpolate colours.


💖 Support this blog

This websites exists thanks to the contribution of patrons on Patreon. If you think these posts have either helped or inspired you, please consider supporting this blog.


📧 Stay updated

You will be notified when a new tutorial is relesed!

📝 Licensing

You are free to use, adapt and build upon this tutorial for your own projects (even commercially) as long as you credit me.

You are not allowed to redistribute the content of this tutorial on other platforms. Especially the parts that are only available on Patreon.

If the knowledge you have gained had a significant impact on your project, a mention in the credit would be very appreciated. ❤️🧔🏻

Write a Comment



  1. Is there something for Unity (or better some kind of algorithm) to correctly lerp colours in the LCH space? Ideas? I’d like to implement colour transition into an app I’m making and that would be really precious!

  2. Something is wrong with the HSV* function. On the conclusion page the interpolation using that algorithm looks rubbish, even compared to RGB, unless the input colour has a value of 100%.

      • Hey Alan,

        I think I’ve noticed the issue – instead of just swapping the hue on swap, you can swap the whole color (swap variable a with variable b).

        Unless I’m mistaken, I don’t think it makes sense to combine the H of one color with the SV of another – you’ll get colors that aren’t between the two origins at all (but rather on a line diagonally across) and the only reason it works for 100% value colors is it’s a special case where the S,V of the ends are the same.

  3. I have implemented your HSV interpolation algorithm, but one of my users spotted a problem with it.
    Consider interpolation from full blue RGB (0, 0, 255 ) to full white RGB (255, 255, 255) – in HSV this is creating a problem that pink color is inserted in between. That’s something very unwanted.

    And even worse depending on slight change of white channel e.g. (255, 255, 254) white it goes through different colours.

    On your interactive test, it doesn’t even provide interpolation from blue to white – it’s black. I’m not quite sure how to fix this behaviour as it should go straight from white to blue.

    • Hi Pavel!
      Thank you for the message!
      I have spotted a typo in the HSV function, although that is not the cause of the issue you’re experiencing.

      Which software are you using? If you have a native way to convert from RGB to HSV, can you lerp between these 3 numbers?

      Perhaps there is an issue with the HSV conversion code.
      I’ll look into it!

      • I have finally answer for my concerns:
        The HSV interpolation code is correct (once you fix your bugs in it).
        The thing is as it’s cone, the interpolation is basically on disc. So depending which hue you assign to white colour, it will go from e.g. blue to white through different colours.

        If this is unwanted:
        The trick is to use HSL color scheme and interpolate on sphere (Hue from 0 to 360 degrees, Lightness from 0 to 180 degrees, saturation as sphere radius). Use spherical linear interpolation.

        This will solve the problem with white going to blue through different colours. It will still retain property of hue interpolation (e.g. from red to green through yellow).

        However for my purposes after some more thoughts even the property to go from red to green through yellow is unwanted. So I’ll revert back to standard RGB interpolation in my case.

  4. Great post and explanation, thanks for sharing!

    I have a question about interpolating between hues:
    This tool is great for interpolating between colours in the LCH colour space ( When I use it to create a colour wheel with equal brightness and saturation, but stepping through hues, it seems like the hue steps are not consistent. E.g. the differences between red to orange, or orange to yellow seems much larger than the differences between blues. To better understand what I mean, check this imgur link:

    If LCH is perceptually uniform, shouldn’t all equal distance hue steps look the same? Is this a shortcoming of LCH when interpolating between hue? Is there a better way to create a perceptually uniform colour wheel? Thanks!

    • Hey! Lerping through colours is never an easy thing.
      I am currently working on a tool that allows to have colours of uniform luminosity. It works by sampling the luminosity distribution of the colours, and then re-sampling the distribution itself to keep the luminosity changes constant.

      While this works nicely, it is not perfect.
      For a better approach I am running gradient descent to find the colour with the closest hue to the one you want, but same luminosity.

      Hopefully I’ll be able to post them sooner or later! 😀

  5. Interesting write up!
    I had a hunch that one could do cheap with “patching” the saturation and/or luminosity with an extra channel, making it simpler than converting the color space. I was also wondering about lerping in linear space. I did a quick test in Photoshop. patching the saturation does weird sharp lines instead of smooth transitions, and luminosity has no result in Photoshop. So they don’t work. But here’s the base, “normal”, linear and LAB result.
    As usual, linear wins!


  • Onsen UI for Vue の スワイプ対応タブバーを使用して、UXを改良しよう! | モナカプレス July 5, 2020

    and I just realized your widget, while fun to play with, is broken:
    You gotta treat the hue/chroma like an angle. (Add/sub the whole range if it brings the colors closer, before lerping)

  • Tutorial Series - Alan Zucconi July 5, 2020

    and I just realized your widget, while fun to play with, is broken:
    You gotta treat the hue/chroma like an angle. (Add/sub the whole range if it brings the colors closer, before lerping)