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
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 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
Solution 2:
The best way to do this is to understand what the hex color codes actually mean. Once you grasp this, it will become clear how to make gradients of arbitrary smoothness. The hex color codes are triplets representing the red, green and blue components of the color respectively. So for example in the color FF0000, the red component is FF, the green component is 00 and the blue component is 00. FF0000 looks red because the red component is dialed all the way up to FF and the green and blue are dialed all the way down to 00. Similarly, pure green is 00FF00 and pure blue is 0000FF. If you convert the hex numbers to decimal, you'll get a value in between 0 and 255.
So now how does one make a gradient transitioning from red to yellow to green? Easy; you take the end points, decide how many steps you want in between, and then evenly step through each of the 3 color channels to transition from one color to the next color. Below is an example going in steps of 11 hex (17 in decimal):
FF0000 <-- red
FF1100
FF2200
FF3300
FF4400
FF5500
FF6600
FF7700
FF8800
FF9900
FFAA00
FFBB00
FFCC00
FFDD00
FFEE00
FFFF00 <-- yellow
EEFF00
DDFF00
CCFF00
BBFF00
AAFF00
99FF00
88FF00
77FF00
66FF00
55FF00
44FF00
33FF00
22FF00
11FF00
00FF00 <-- green
Solution 3:
I just had a project and began with more or less similar solution to jball and Asaph. That is, smoothly incrementing from red (FF0000) to (FFFF00) to (00FF00).
However, I found that, visually, the changes seemed to be much more drastic around "yellow," while they were barely noticeable around "red" and "green." I found that I could compensate for this by making the changes exponential rather than linear, causing the increments to be smaller around "yellow" and larger around "red" and "green". The solution (in Javascript) I worked out looked like this:
/**
* Converts integer to a hexidecimal code, prepad's single
* digit hex codes with 0 to always return a two digit code.
*
* @param {Integer} i Integer to convert
* @returns {String} The hexidecimal code
*/
function intToHex(i) {
var hex = parseInt(i).toString(16);
return (hex.length < 2) ? "0" + hex : hex;
}
/**
* Return hex color from scalar *value*.
*
* @param {float} value Scalar value between 0 and 1
* @return {String} color
*/
function makeColor(value) {
// value must be between [0, 510]
value = Math.min(Math.max(0,value), 1) * 510;
var redValue;
var greenValue;
if (value < 255) {
redValue = 255;
greenValue = Math.sqrt(value) * 16;
greenValue = Math.round(greenValue);
} else {
greenValue = 255;
value = value - 255;
redValue = 256 - (value * value / 255)
redValue = Math.round(redValue);
}
return "#" + intToHex(redValue) + intToHex(greenValue) + "00";
}
This yielded a much smoother gradient as I changed the value, and changing inputValue by a certain seemed to affect the color to more or less the same degree regardless of the starting point.
Solution 4:
Here is nice looking gradient from green to red
/* Green - Yellow - Red */
.gradient_0 {background: #57bb8a;}
.gradient_5 {background: #63b682;}
.gradient_10 {background: #73b87e;}
.gradient_15 {background: #84bb7b;}
.gradient_20 {background: #94bd77;}
.gradient_25 {background: #a4c073;}
.gradient_30 {background: #b0be6e;}
.gradient_35 {background: #c4c56d;}
.gradient_40 {background: #d4c86a;}
.gradient_45 {background: #e2c965;}
.gradient_50 {background: #f5ce62;}
.gradient_55 {background: #f3c563;}
.gradient_60 {background: #e9b861;}
.gradient_65 {background: #e6ad61;}
.gradient_70 {background: #ecac67;}
.gradient_75 {background: #e9a268;}
.gradient_80 {background: #e79a69;}
.gradient_85 {background: #e5926b;}
.gradient_90 {background: #e2886c;}
.gradient_95 {background: #e0816d;}
.gradient_100 {background: #dd776e;}
/* Red - Yellow - Green */
.anti-gradient_100 {background: #57bb8a;}
.anti-gradient_95 {background: #63b682;}
.anti-gradient_90 {background: #73b87e;}
.anti-gradient_85 {background: #84bb7b;}
.anti-gradient_80 {background: #94bd77;}
.anti-gradient_75 {background: #a4c073;}
.anti-gradient_70 {background: #b0be6e;}
.anti-gradient_65 {background: #c4c56d;}
.anti-gradient_60 {background: #d4c86a;}
.anti-gradient_55 {background: #e2c965;}
.anti-gradient_50 {background: #f5ce62;}
.anti-gradient_45 {background: #f3c563;}
.anti-gradient_40 {background: #e9b861;}
.anti-gradient_35 {background: #e6ad61;}
.anti-gradient_30 {background: #ecac67;}
.anti-gradient_25 {background: #e9a268;}
.anti-gradient_20 {background: #e79a69;}
.anti-gradient_15 {background: #e5926b;}
.anti-gradient_10 {background: #e2886c;}
.anti-gradient_5 {background: #e0816d;}
.anti-gradient_0 {background: #dd776e;}<div class="gradient_0">0</div>
<div class="gradient_5">5</div>
<div class="gradient_10">10</div>
<div class="gradient_15">15</div>
<div class="gradient_20">20</div>
<div class="gradient_25">25</div>
<div class="gradient_30">30</div>
<div class="gradient_35">35</div>
<div class="gradient_40">40</div>
<div class="gradient_45">45</div>
<div class="gradient_50">50</div>
<div class="gradient_55">55</div>
<div class="gradient_60">60</div>
<div class="gradient_65">65</div>
<div class="gradient_70">70</div>
<div class="gradient_75">75</div>
<div class="gradient_80">80</div>
<div class="gradient_85">85</div>
<div class="gradient_90">90</div>
<div class="gradient_95">95</div>
<div class="gradient_100">100</div>Solution 5:
Looking at any chart will give the illusion that "color codes" are individual values that you must lookup. In fact, the smoothest transition you can get is to simply increment the amount of green in the color and decrement the amount of red.
See, the cryptic hexidecimal codes are actually not at all cryptic. They have six digits, where the first two show the amount of red in the color, the middle two show the amount of green, and the last two show the amount of blue.
And unlike human counting where when we get from 0 to 9 we move to the next place value and get 10, with hexidecimal we count all the way up to F. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10
So your goal is to get from FF 00 00 (red only, no green or blue) to FF FF 00 (red mixed with green, which is yellow), and finally to 00 FF 00.
How can you do that? Just keep adding a little bit at a time to the green amount until it gets all the way up to FF, and then start taking a little bit away from the red amount until it gets down to 00.
And how much is "a little bit"? However much you think it takes to get a smooth transition. You could add 30 at a time and get pretty major jumps from one color to another, or add 1 at a time and have the transition progress more smoothly (but perhaps also more slowly). Experiment and see what works for you.