htmlcolorshexscale

HTML Color Codes: Red to Yellow to Green


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 (dead link)

[Edit: replacing it with one as similar to the original as I remember] Go here now (8/29/2024) https://www.unm.edu/~tbeach/IT145/color.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.


Solution

  • 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