in colours, maths, tutorial, Unity3D

The Secrets of Colour Interpolation

Share Button

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:

x

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.

 

📧 Stay updated

A new tutorial is released every week.

💖 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.

Paypal
Ko-fi
Twitter_logo

Write a Comment

Comment

11 Comments

  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%.

  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 (http://tristen.ca/hcl-picker/#/hlc/13/1.1/FE876B/FF8570). 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: https://imgur.com/a/461cY

    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! 😀

Webmentions

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

    I created an asset for Unity, which creates Lab and Lch color gradients https://www.assetstore.unity3d.com/#!/content/117137

  • Tutorial Series - Alan Zucconi May 18, 2018

    I created an asset for Unity, which creates Lab and Lch color gradients https://www.assetstore.unity3d.com/#!/content/117137