Related
This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color? Ideally, I would like the mixin to take any form of color definition, and apply transparency:
#include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5);
#include set-alpha( #ff0000, 0.5 ); //prints rgba(255, 0, 0, 0.5);
#include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);
Use the rgba function built into Sass
Sets the opacity of a color.
Examples:
rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)
Parameters:
(Color) color
(Number) alpha — A number between 0 and 1
Returns:
(Color)
Code:
rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
The rgba function doesn't work on color with no transparency, it returns an hex again. After all, it's not meant to transform hex to rgba, we're just making profit out of hex doesn't allow alpha (yet).
rgba(#fff, 1) // returns #fff
So, I made al little functions that buils the rgb string. I don't need to deal with transparencies for now.
#function toRGB ($color) {
#return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
I use the rgbapng compass plugin
rgbapng is a Compass plugin for providing cross-browser* compatible
RGBA support. It works by creating single pixel alpha-transparent PNGs
on the fly for browsers that don't support RGBA. It uses the pure Ruby
ChunkyPNG library resulting in hassle-free installation and
deployment.
Install
gem install compass-rgbapng
Usage
#include rgba-background(rgba(0,0,0,0.75));
Compiles to:
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
There's also ie-hex-str() for IE's ##AARRGGBB format:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */
from_hex(hex_string, alpha = nil);
From the documentation:
Create a new color from a valid CSS hex string. The leading hash is
optional.
SASS scale-color() will do this in a flexible way: e.g. color: #{scale-color( $primary, $alpha: -50% )};. Full reference here.
Note that if the initial color ($primary in this example) is a solid color (with no transparency), then the $alpha value must be a negative value (up to -100%) to add transparency.
In my case, rgba doesn't allow hex.
So, I use a transparentize which decreases the alpha channel.
.blue-background {
background: transparentize(var.$color-my-blue, .8);
}
Is it possible to set value of alpha channel when providing fill and stroke colors in PDFlib?
$p->setlinewidth(20);
$p->setcolor('fill', 'rgb', 1, 0, 0, null);
$p->setcolor('stroke', 'rgb', 0, 1, 0, null);
$p->rect(0, 0, 100, 100);
$p->fill_stroke();
Is it possible to make rectangle's red fill and thick green border to be semi-transparent?
Is it possible to make rectangle's red fill and thick green border to be semi-transparent?
sure, please use GState for this task. You find a complete sample code within the PDFlib cookbook: Transparent Graphics
/* Save the current graphics state. The save/restore of the current
* state is not necessarily required, but it will help you get back to
* a graphics state without any transparency.
*/
$gstate = $p->create_gstate("opacityfill=.5 opacitystroke=.5");
$p->save();
$p->set_gstate($gstate);
$p->setlinewidth(20);
$p->setcolor('fill', 'rgb', 1, 0, 0, null);
$p->setcolor('stroke', 'rgb', 0, 1, 0, null);
$p->rect(0, 0, 100, 100);
$p->fill_stroke();
$p->restore();
For a powerful path generation, you might use the Path object. See PDFlib 9.2 Documentation as well the samples within PDFlib Cookbook - path objects.
page.drawText(WATERMARK.LABEL, {
x: 180,
y: 400,
size: 30,
font: helveticaFont,
color: rgb(220 / 255, 220 / 255, 220 / 255),
rotate: degrees(-315),
opacity: 0.6
})
// add opacity field only
I'm trying to create elipse with radial gradient fill, but flash makes it filled with solid color (the second one - 0xe9afaf)
var mat:Matrix = new Matrix();
mat.createGradientBox(150, 100, 0, 0, 0);
timeField = new Shape();
timeField.graphics.beginGradientFill(GradientType.RADIAL, [0xd35f57, 0xe9afaf], [1, 1], [0,255],mat);
timeField.graphics.lineStyle(3, 0x561717);
timeField.graphics.drawEllipse(GlobalVariables.globalStage.stageWidth / 2 - 75, -50, 150, 100);
timeField.graphics.endFill();
addChild(timeField);
I have no idea what's wrong.
The position of your matrix's gradient box and your ellipse are off center, so you're seeing the solid part of the gradient after all the color has faded out. You're going to have to offset your gradient box to match the position of the ellipse.
Line 2:
mat.createGradientBox(150, 100, 0, GlobalVariables.globalStage.stageWidth / 2 - 75, -50);
Or you can also make your ellipse at 0, 0 and move the timeField to the center where you want it.
timeField.graphics.drawEllipse(0, 0, 150, 100);
timeField.x = GlobalVariables.globalStage.stageWidth / 2 - 75;
timeField.y = -50;
Edit: I don't necessarily need a solution to this problem--rather I'd like to understand why it's occurring. I don't see why I should be getting the odd results below...
Although this question is directed towards an issue I'm having with an HTML5 canvas application, I think the problem is less specific.
I have an HTML5 canvas app that allows you to stamp images on the screen. These images are 32bit PNG's, so I'm working with transparency. If I stamp a highly transparent image in the same location many times (roughly 100), I end up with an absolutely terrible result:
The color of the image that I'm using as a stamp is RGB(167, 22, 22) and the background that I'm stamping onto is RGB(255, 255, 255). Here's the source image, if anyone's interested:
As you can tell, the image has extremely low alpha levels. Likely about 2/255 to 5/255 or so. What I would expect to happen is that if you repeatedly apply the image stamp to the canvas enough times, you'll get pixels of color RGBA(167, 22, 22, 255). Unfortunately, I'm getting a mixed bag of colors including some very odd regions of gray with a value of RGB(155, 155, 155).
I just loaded up Excel and plugged in the equation for source-over alpha blending (Wikipedia reference) and I seem to be converging to RGB(167, 22, 22) after enough iterations. I'm probably missing something fundamental about alpha blending operations and how the HTML5 canvas implements source-over compositing... can anyone help straighten me out?
Thanks!
Note: this question is similar to my issue, but I don't quite understand why I'm getting the results I've posted here.
The precision and rounding rules of canvas math internals are mostly undefined, so it's hard to say exactly what's happening here. All we really know is that the pixels are unsigned bytes, and the alpha is premultiplied.
However, we can get some information by using getImageData to inspect the pixels as the stamp is drawn, like so:
var px = 75;
var py = 100;
var stamp = new Image;
stamp.onload = function() {
for (var i = 0; i < 100; ++i) {
imageData = context.getImageData(px, py, 1, 1);
console.log(Array.prototype.slice.call(imageData.data, 0, 4));
context.drawImage(stamp, 0, 0);
}
};
stamp.src = 'stamp.png';
The sample at px = 75, py = 100 is right in the middle of a gray blob. After drawing the stamp once on a white canvas, the log reads:
[254, 254, 254, 255]
At px = 120, py = 150, the sample is in the middle of a red area. After drawing the stamp once, the log reads:
[254, 253, 253, 255]
So, it looks like the canvas was modified by (-1, -1, -1) for the grey pixel, and (-1, -2, -2) for the red pixel.
Sampling these same pixels in the stamp image using RMagick gives:
[167, 22, 22, 1] // x = 75, y = 100
[167, 22, 22, 2] // x = 120, y = 150
Working through the math, using the standard alpha blending equation, you can test each of the color values:
function blend(dst, src) {
var a = src[3] / 255.0
return [
(1.0 - a) * dst[0] + a * src[0],
(1.0 - a) * dst[1] + a * src[1],
(1.0 - a) * dst[2] + a * src[2]
];
}
console.log(blend([255, 255, 255], [167, 22, 22, 1]));
// output: [254.6549..., 254.0862..., 254.0862...]
console.log(blend([255, 255, 255], [167, 22, 22, 2]));
// output: [254.3098..., 253.1725..., 253.1725...]
From this, we can guess that the canvas blending code is actually flooring the results, instead of rounding them. This would give you a result of [254, 254, 254] and [254, 253, 253], like we saw from canvas. They're likely not doing any rounding at all, and it's being floored implicitly when cast back to an unsigned byte.
This is why the other post recommends storing the image data as an array of floats, doing the math yourself, and then updating the canvas with the result. You get more precision that way, and can control things like rounding.
Edit: In fact, this blend() function isn't exactly right, even when the results are floored, as the canvas pixel values for 120, 150 stabilize at [127, 0, 0], and this function stabilizes at [167, 22, 22]. Similarly, when I drew the image just once into a transparent canvas, getImageData on the pixel at 120, 150 was [127, 0, 0, 2]. What?!
It turns out that this is caused by premultiplication, which seems to be applied to loaded Image elements. See this jsFiddle for an example.
Premultiplied pixels are stored as:
// r, g, b are 0 to 255
// a is 0 to 1
// dst is all 0 to 255
dst.r = Math.floor(r * a);
dst.g = Math.floor(g * a);
dst.b = Math.floor(b * a);
dst.a = a * 255;
They are unpacked later as:
inv = 1.0 / (a / 255);
r = Math.floor(dst.r * inv);
g = Math.floor(dst.g * inv);
b = Math.floor(dst.b * inv);
Running this pack/unpack against [167, 22, 22, 2] reveals:
a = 2 / 255; // 0.00784
inv = 1.0 / (2 / 255); // 127.5
r = Math.floor(Math.floor(167 * a) * inv); // 127
g = Math.floor(Math.floor(22 * a) * inv); // 0
b = Math.floor(Math.floor(22 * a) * inv); // 0
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.
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
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
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>
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.
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.
My reason for finding this question was that I was trying to make a colored uptime indicator for a table full of devices that "check-in" hourly. The idea being that it would be red at 0%, transition to yellow at 50%, and be green at 100%. This is of course pretty useless but it was an easy way to make a table look more impressive than it actually was. Given a min, max, and value it returns rgb 0-255 values for the correct color. Assumes valid input.
function redYellowGreen(min, max, value)
{
var green_max = 220;
var red_max = 220;
var red = 0;
var green = 0;
var blue = 0;
if (value < max/2)
{
red = red_max;
green = Math.round((value/(max/2))*green_max);
}
else
{
green = green_max;
red = Math.round((1-((value-(max/2))/(max/2)))*red_max);
}
var to_return = new Object();
to_return.red = red;
to_return.green = green;
to_return.blue = blue;
return to_return;
}
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.
I came to this post because looking for a simple way to generate a list of colors red-yellow-green for a set of values.
Useful when programming dashboards or reports that need to show "what-if" analysis and enhance good vs average vs bad values. Found interesing articles on several sources, but came out to this very simple JavaScript function:
function fSemaphor(minimal, maximal, value) {
var difference = maximal - minimal;
var medium = (minimal + difference / 2) | 0; // |0 returns INT
var RED = 255,
GREEN = 255;
if (value <= medium)
GREEN = (GREEN * (value / medium)) | 0;
else
RED = (RED * (1.0 - value / maximal)) | 0;
// returns HEX color, for usage in CSS or any style
return ("#" + (('0') + RED.toString(16)).substr(-2) + ('0' + GREEN.toString(16)).substr(-2) + '00'); // blue
}
I even provide a full example of it's usage. Just copy and paste to an HTML page, and see what it does.
Max value: <input value=0 id="minim" /> Min value: <input value=20 id="maxim" />
<input type=submit value="Calculate colors" onClick="fCalcul()">
<table id=tColors border=2></table>
<script>
function fCalcul() {
var i;
var tblRows = "<tr><th>value</th><th>Color</th></tr>";
var minValue = parseInt(minim.value);
var maxValue = parseInt(maxim.value);
var tblBody = "";
var increment = 1;
if ((maxValue - minValue) > 40) // don't show more than 40 rows, for sample sake
increment = ((maxValue - minValue) / 40) | 0;
for (i = minValue; i <= maxValue; i += increment) {
tblBody += "<tr><td>" + i + "</td><td style='background: " +
fSemaphor(minValue, maxValue, i) + "'>" +
fSemaphor(minValue, maxValue, i) + "</td></tr>";
}
tColors.innerHTML = tblRows + tblBody;
}
function fSemaphor(minimal, maximal, value) {
var difference = maximal - minimal;
var medium = (minimal + difference / 2) | 0; // |0 returns INT
var RED = 255,
GREEN = 255;
if (value <= medium)
GREEN = (GREEN * (value / medium)) | 0;
else
RED = (RED * (1.0 - value / maximal)) | 0;
// returns HEX color, for usage in CSS or any style
return ("#" + (('0') + RED.toString(16)).substr(-2) + ('0' + GREEN.toString(16)).substr(-2) + '00'); // blue
}
</script>
Special thanks to Ovid blog in http://blogs.perl.org/users/ovid/2010/12/perl101-red-to-green-gradient.html, who gave a technical explanation that helped me simplify it
Works in Chrome & Safari only
From NiceWebType.com:
<style type="text/css">
h1 {
position: relative;
font-size: 60px;
line-height: 60px;
text-shadow: 0px 0px 3px #000;
}
h1 a {
position: absolute;
top: 0; z-index: 2;
color: #F00;
-webkit-mask-image: -webkit-gradient(linear, left center, right center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
content: "CSS Text Gradient (Webkit)";
color: #0F0;
}
</style>
<h1><a>CSS Text Gradient (Webkit)</a></h1>
When I had to do this my choice was to switch from hex to rgb code, which seemed more calculation-friendly.
You can read the details here:
http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/
Here is a simple, yet dirty, way to generate these colors:
COLORS = [ "FF00%0.2XFF" % x for x in range(0,260,5) ] + [ "FF00FF%0.2X" % x for x in range(250,-1,-5) ]
The color encoding is for Google maps: aabbggrr.
This will give you a list of 103 colors. I removed three and then indexed the list with using a percentage as an integer.
On my side, I solved the issue with 2 brushes:
float sweepAngle = 45.0F; // angle you want ...
LinearGradientBrush linGrBrushUp = new LinearGradientBrush(
new Point(0, 0), new Point(w, 0),
Color.FromArgb(255, 0, 255, 0), // green
Color.FromArgb(255, 255, 255, 0) // yellow
);
LinearGradientBrush linGrBrushDown = new LinearGradientBrush(
new Point(w, 0), new Point(0, 0),
Color.FromArgb(255, 255, 255, 0), // yellow
Color.FromArgb(255, 255, 0, 0) // red
);
g.DrawArc( new Pen(linGrBrushUp, 5), x, y, w, h, 180.0F, sweepAngle>180.0F?180.0F:sweepAngle );
g.DrawArc( new Pen(linGrBrushDown, 5), x, y, w, h, 0.0F, sweepAngle>180.0F?sweepAngle-180.0F:0 );
I used this in a php page:
$percent = .....; //whatever the percentage you want to colour
If ($percent <= 50) {
$red = 255;
$green = $percent * 5.1;
}
If ($percent >= 50) {
$green = 255;
$red = 255 - ($percent - 50) * 5.1;
}
$blue = 0;
Your RGB is then ($red, $green, $blue)
Note: The 5.1 factor dervies from 255/50