in colours, maths, tutorial, Unity3D

The Secrets of Colour Interpolation

Share Button

Despite all the effort, the transition still doesn’t look good. The reason is that even if we have correctly learped through the Hue component, different colours have different luminosities. As explained by Gregor Aisch in How To Avoid Equidistant HSV Colors, equidistant colours in the HSV space are not perceived as really equidistant. Even HSV colours with the same brightness (V) can differ in their perceived brightness and luminosity. Many aspects are responsible for this. The R, G and B components of a colour contributes in different ways the perceived luminosity, due to the way their respective photoreceptors work. Several attempts have been made to capture the non-linear relationships between R, G and B in a colour model. One of the most successful is the LCH (also known as HCL for Hue, Chroma and Lightness). Equidistant colours in the LCH space are also perceived as equidistant. The swatches below clearly shows how the LCH space provides a more uniform distribution of the colours.

x

The conversion from RGB to LCH is very expensive. This is because colours have to be converted into to intermediate spaces, the XYZ and LAB. A very good library which supports all of these conversions is chroma.js.

Using colours with equidistant perceived luminosity is essential for all these applications in which colours have a precise meaning, such as diagrams and heatmaps. Providing uniform luminosity is also important for colour blind people, as discussed in Accessibility Design: Color Blindness. A starting point to design a safe colour palette is ColorBrewer.

 

📧 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