The "X" ensures that we convert our number to an upper-case hex value, while the "02" prefix ensures that the number 12 will be printed as "0C" and not just "C". The confusing bit, though, might be in the printf value. For any other number, we figure out which side of the $middle we're on and calculate the 0 to 255 value. If we're greater than the maximum, we just have green. In the for loop, if we're less than the minimum, we just have red. We also calculate the $scale to know how to scale any given number from 0 to 255. Printf "XFF00\n" => 255 - int( ( $num - $middle ) * $scale ) īasically, we figure out the $middle where we're going to stop counting up the green and start counting down the red. Here's one way to write that: my ( $min, $max ) = ( 1, 11 ) Įlsif ( $num int( ( $num - $min ) * $scale ) Then once we hit the midpoint, we keep green at FF and slide the red from FF to 00. In other words, from the bottom to the midpoint, we have red as FF and slide the green from 00 to FF. If you look at the above, you'll see that we start with red, have yellow "FFFF00" as the average and green "00FF00" as the good. I'm always hitting a search engine for an example, so I figured other people could use this, too.Īs you will remember for your HTML color codes, they're often RGB numbers in three two-digit hexadecimal numbers, ranging from 0 (00) to 255 (FF). ![]() In other words, I want a smooth, linear gradient from red to green for any number in a range. As I'm often building Web pages, that means I want: Color code Specifically, I want to use red for "bad" and "green" for good, with a linear gradient in between. I sometimes find that I want to visual data with color. Experiment and see what works for you.Note: the following technique is not friendly to the color-blind. 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). 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.Īnd how much is "a little bit"? However much you think it takes to get a smooth transition. 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. 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.Īnd 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. See, the cryptic hexidecimal codes are actually not at all cryptic. 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. Looking at any chart will give the illusion that "color codes" are individual values that you must lookup. 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. Return "#" intToHex(redValue) intToHex(greenValue) "00" anti-gradient_100 value Scalar value between 0 and 1 Below is an example going in steps of 11 hex ( 17 in decimal): FF0000 <- red 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. If you convert the hex numbers to decimal, you'll get a value in between 0 and 255. Similarly, pure green is 00FF00 and pure blue is 0000FF. 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. So for example in the color FF0000, the red component is FF, the green component is 00 and the blue component is 00. The hex color codes are triplets representing the red, green and blue components of the color respectively. ![]() Once you grasp this, it will become clear how to make gradients of arbitrary smoothness. The best way to do this is to understand what the hex color codes actually mean.
0 Comments
Leave a Reply. |