How to multiply hex color codes? - colors

Question

I want to change color from 0x008000 (green) to 0x0000FF (blue).
If I multiply 0x008000 * 256 = 0x800000 (Google search acts as a calculator).
I need to find the correct multiplier so the result would be 0x0000FF.
To answer people below - I am doing this in order to make a color transition on a rectangle in pixi.js.
From what I've gathered, RGB color code is divided into 3 parts - red, green and blue in a scale of 0-FF expressed in hex, or 0-255 in decimal. But how to multiply correctly to get desired result?

Answer 1

If you want linear change from one color to another, i recommend something like this:
int startColor = 0x008000;
int endColor = 0x0000FF;
int startRed = (startColor >> 16) & 0xFF;
int startGreen = (startColor >> 8) & 0xFF;
int startBlue = startColor & 0xFF;
int endRed, endGreen, endBlue; //same code
int steps = 24;
int[] result = new int[steps];
for(int i=0; i<steps; i++) {
int newRed = ( (steps - 1 - i)*startRed + i*endRed ) / (steps - 1);
int newGreen, newBlue; //same code
result[i] = newRed << 16 | newGreen << 8 | newBlue;
}
This is for JavaScript:
var startColor = 0x008000;
var endColor = 0x0000FF;
var startRed = (startColor >> 16) & 0xFF;
var startGreen = (startColor >> 8) & 0xFF;
var startBlue = startColor & 0xFF;
var endRed = (endColor >> 16) & 0xFF;
var endGreen = (endColor >> 8) & 0xFF;
var endBlue = endColor & 0xFF;
var steps = 24;
var result = [];
for (var i = 0; i < steps; i++) {
var newRed = ((steps - 1 - i) * startRed + i * endRed) / (steps - 1);
var newGreen = ((steps - 1 - i) * startGreen + i * endGreen) / (steps - 1);
var newBlue = ((steps - 1 - i) * startBlue + i * endBlue) / (steps - 1);
var comb = newRed << 16 | newGreen << 8 | newBlue;
console.log(i + " -> " + comb.toString(16));
result.push(comb);
}
console.log(result);