Handmade Hero»Forums»Code
217 posts
How to change color gradually like in a color wheel?
Edited by longtran2904 on

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?

Marc Costa
65 posts
How to change color gradually like in a color wheel?
Edited by Marc Costa 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.

217 posts
How to change color gradually like in a color wheel?
Edited by longtran2904 on
Replying to marcc (#25572)

Thanks! Just the Hue value?

Mārtiņš Možeiko
2559 posts / 2 projects
How to change color gradually like in a color wheel?

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.

217 posts
How to change color gradually like in a color wheel?
Edited by longtran2904 on

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

Mārtiņš Možeiko
2559 posts / 2 projects
How to change color gradually like in a color wheel?

https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB

217 posts
How to change color gradually like in a color wheel?

Just found this great blog yesterday.