HTML Color Codes: Red to Yellow to Green

Question

I would like to come up with as many HEX HTML values to have a smooth color gradient from red to green:

I would like this to be similar to the following: http://www.utexas.edu/learn/html/colors.html

I don't have the best eye for color choices, so I'm hoping a standard chart is already put together showing how to transition from red through yellow to green smoothly.

On that website "1 of 6" is most similar to what I'm looking for, but that example is limited to 11 colors:

(1) FF0000 Red,  (2) FF3300 Red(Orange) (3) ff6600  (4) ff9900  (5) FFCC00 Gold  (6) FFFF00 Yellow (7) ccff00 (8) 99ff00 (9) 66ff00 (10) 33ff00 (11) 00FF00 Lime  

It would be great to be able to double the number of colors, but yet make them transition smoothly.

Thanks for any insights and help.

Answer 1

Depending on how many colors you want to end up with, the solution is just to keep incrementing the green value by a certain amount, and then when green is maxed (FF), decrement the red value repeatedly by the same amount.

Pseudo-code:

int red = 255; //i.e. FF int green = 0; int stepSize = ?//how many colors do you want? while(green < 255) {     green += stepSize;     if(green > 255) { green = 255; }     output(red, green, 0); //assume output is function that takes RGB } while(red > 0) {     red -= stepSize;     if(red < 0) { red = 0; }     output(red, green, 0); //assume output is function that takes RGB } 

Generating by hand, you can simply increment by 16, like so:

FF0000 FF1000 FF2000 FF3000 FF4000 FF5000 FF6000 FF7000 FF8000 FF9000 FFA000 FFB000 FFC000 FFD000 FFE000 FFF000 FFFF00 //max, step by 15 F0FF00 //cheat, start with a -15 to simplify the rest E0FF00 D0FF00 C0FF00 B0FF00 A0FF00 90FF00 80FF00 70FF00 60FF00 50FF00 40FF00 30FF00 20FF00 10FF00