How to change color gradually like in a color wheel?

I want to change from one color to another but in a color wheel. If you ever see a simple color picker, you know that when you drag the picker around the wheel, it changes the color in an unusual way. It kinds of changing one channel all the way first then to other channels.

image.png

For example, in the above image, if I want to change from red to green, the order should be red -> orange -> yellow -> green.

I don't think I can do a simple lerp: (1-t) x a + t x b. Also, sometimes I want it to just loop through all the colors in the wheel forever. How can I do something like that?


Edited by longtran2904 on

These color wheels use a different color space, like HSV.

To do what you describe, you'd have to interpolate the Hue value in the HSV color space and then convert the resulting color to RGB for display.


Edited by Marc Costa on

Thanks! Just the Hue value?


Edited by longtran2904 on
Replying to marcc (#25572)

Here's a good example you can play around: https://colorpicker.me/

The circle from your picture is the colorful vertical bar. Try changing its value and notice how Hue/Saturation/Value (HSV) items change.

Can someone teach me the quickest way to convert from HSV to RGB and vice-versa? All the values are between 0 and 1.


Edited by longtran2904 on

Just found this great blog yesterday.