Get hex codes for all colors between two colors?

Question

I want to have buttons that are switching from one color to another.

Eg. 1000 buttons where the first one is yellow and the last one is green and all the between will slowly move from yellow to green.

How can I generate all the hex codes for colors (eg. #8a3a3a) between these two colors?

Answer 1

Yes, it is. You can compute it as follows:

Imagine the colors are points in a three-dimensional space, with each component (red, green, blue) representing one dimension. Depending on how many color tones you want between the two colors, you can try to evenly divide the differences between the two colors, for each component separately. For instance, if rA is the red component of color A, and rB the red component of color B, and if you want 10 steps in between, then the red component of the second step is r2 = (rB - rA) * 2 / 10.

Convert the components to decimal first (e.g. 8a => 138), and you should probably write a small program for the computation. I don't think you need so many tones though, because each component has only a range from 0 to 255 (rounding necessary), and the human eye cannot differentiate between so many colors anyway.

Answer 2

Split the two input colors into red, green, blue components and convert them to float. Subtract source components from destination components, divide each by 1000 and call them f.ex. deltaRed, deltaGreen, deltaBlue. Start with source components, convert those into a "#rrggbb" string 1000 times, each loop adding the deltas. If you want to actually reach the destination color, you have to loop from 0 to 1000, ie. 1001 times.

Answer 3

This may be what you need: http://sandbox.leigeber.com/fader/fader.html

Code: http://www.leigeber.com/wp-content/uploads/2008/05/fader.zip