# Change Graphic Color Based on Number Value

## Recommended Posts

Hi,

I'm trying to change a graphics color based on the value of the number.  If that number is 0, the graphic is blue.  If that number is maxRange (we'll use 37000) it is fully green, numbers closer to 0 would be more blue, and slowly it would become more green as the value reaches it's ceiling.  How could I achieve this in Phaser? Thanks!

##### Share on other sites

So I ended up doing something like this, it's working, but I'm not sure if it's the best way?

countMax is the upper limit variable (say 1000), and curCount is val between 0 and countMax;

``````    makeColor: function() {
// 0,55,255 is rgb blue val
// 0,125,0 is rgb green val
var r = 0;
var g = 55;
var b = 255;

var maxG = 75;
var minB = 0;

g = Math.floor(g + ((75/this.countMax)*(this.curCount)));
b = Math.floor(b + (((255/this.countMax)*(this.curCount))*-1));

if (g > maxG) g = maxG;
if (b < minB) b = minB;

//console.log(r+","+g+","+b);

return this.RGB2Hex(r,g,b);
},
``````