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://ww

Answer 1

Nowadays all modern browsers support color gradients in CSS which allow totally smooth gradients over any width/height. However, still not all browsers support the official CSS linear-gradient, so in order to support all browsers, use the following CSS class:

.gradient {
    background:    -moz-linear-gradient(left, red, yellow, green); /* FF3.6+ */
    background:        -webkit-gradient(linear, left top, right top, color-stop(0%, red), color-stop(50%, yellow), color-stop(100%, green)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, red, yellow, green); /* Chrome10+,Safari5.1+ */
    background:      -o-linear-gradient(left, red, yellow, green); /* Opera 11.10+ */
    background:     -ms-linear-gradient(left, red, yellow, green); /* IE10+ */
    background:         linear-gradient(to right, red, yellow, green); /* W3C */
}

For further reference of the CSS gradient functions, see the following articles in the Mozilla Developer Network:

• linear-gradient (also lists the supported browsers)
• Using CSS gradients

A very good web site to quickly generate completely customized color gradients for all browsers is the Ultimate CSS Gradient Generator.