Colour graduation steps

July 6, 2009 – 11:38 pm

I had to get the graduations between a couple of colours the other day, and in lieu of finding much of use online, I thought I’d put my solution up here in case it can help anybody who’s looking for something similar.

 

Usage is really simple:

getColourSteps(0xFF0000, 0x0000FF, 10);

 

…or as a simple demo:

var colours : Array = getColourSteps(0xFF0000, 0x0000FF, 10);

for (var i : uint; i < colours.length; ++i) {
    var shape : Shape = new Shape();
    shape.graphics.beginFill(colours[i]);
    shape.graphics.drawRect(50*i, 0, 50, 50);
    addChild(shape);
}

 

So here’s the code. As always, use it how you want, but this time there’s the proviso that you have to keep the “u” in colour…

function getColourSteps(hex_1 : uint, hex_2 : uint, steps : uint) : Array {
	var arr : Array = [];

	for (var i : uint; i < steps; i++) {
		arr.push(getColourStep(hex_1, hex_2, i / (steps-1)));
	}

	return arr;
}

function getColourStep(hex_1 : uint, hex_2 : uint, percent : Number) : uint {

	var tmpHex : uint;
	var newHex : uint;
	var i : int;

	while (i++ < 4) {
		tmpHex = hex_1 >> i*8 & 255;
		tmpHex += ((hex_2 >> i*8 & 255) - tmpHex) * percent;
		newHex = newHex | tmpHex << i*8;
	}

	return newHex;
}