How to multiply hex color codes?

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?

I think you'll need to explain a bit better what you need. Why would green at half strength times 256 become high intensity blue? — Joachim Isaksson, May 24 '14 at 17:57
I'm a bad reader, can you provide a practical example of the question please? — Asad Ali, May 24 '14 at 17:58
I'm creating animation in pixi.js, in 24 steps I want to change squares fill color from green to blue. 256 is just a random number. — Starwave, May 24 '14 at 18:01
0x0000FF is small than 0x008000. So you would have to multiply by a value less than 1, or intentionally overflow and clear the overflow bit. To be honest, it's completely unclear to me why you would want to do this. — hatchet - done with SOverflow, May 24 '14 at 18:01
It would make more sense to reduce the green from 80 to 0, while increasing the blue from 0 to FF at the same time. That would not be achieved using simple multiplication or division of the entire value. — hatchet - done with SOverflow, May 24 '14 at 18:03
"in 24 steps I want to change squares fill color from green to blue. 256 is just a random number.", So you start with green, end with blue, and you want the 22 colors between to have smooth change over these 24 colors? — kajacx, May 24 '14 at 18:07
`(0x008000-0x0000FF)/24 = 0x54A` (1354). In each of the 24 steps, decrease the color by '0x54A' and you'll have blue in the end (I think). — Asad Ali, May 24 '14 at 18:07
@AsadAli - doing it that way, wouldn't the blue component cycle several times from low values to high values? That might be an odd looking transition. — hatchet - done with SOverflow, May 24 '14 at 18:10
@AsadAli I dont thing this would work, imagine if you would go from `002000` to `001000` in 15 steps, the blue color should remain `00` the whole time, but your aritmetic solution will put non-zero values in blue channel. — kajacx, May 24 '14 at 18:10
@kajacx As far i can think, there should be smooth change from green to blue without low-high cycles. Am i missing something? — Asad Ali, May 24 '14 at 18:12
Thank you Asad, but kaja is right, the color is changing to blue, but it jumps from black to blue 24 times. I sorta need smooth color transition, straight from green to blue. — Starwave, May 24 '14 at 18:15
These other similar questions may help. In effect, you are generating a color gradient, but displayed over time instead of over space. http://stackoverflow.com/questions/27532/generating-gradients-programmatically http://stackoverflow.com/questions/8252996/fastest-way-to-calculate-colors-for-a-gradient — hatchet - done with SOverflow, May 24 '14 at 18:15

score 1 · Accepted Answer · edited May 24 '14 at 20:36

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);

edited May 24 '14 at 20:36

Starwave

2,352
2
23
30

answered May 24 '14 at 18:19

kajacx

12,361
5
43
70

I added another cooments and commented them (yo dawg) to not get confused. – kajacx May 24 '14 at 18:48
Ehm, I hope you replaced "same code" comments with same code only renamed variables? – kajacx May 24 '14 at 18:56
Added edit, but seems it did not save. Yeah i just changed few var names, console gives me [0,0,0...], all the elements in array are zeros. That i/z fixed. – Starwave May 24 '14 at 19:14
OK, i'll open editor and look into it, but i wanr you: JS isnt my speciality. – kajacx May 24 '14 at 19:15
console: 0 -> 32768 for every iteration – Starwave May 24 '14 at 19:38
OK, i didn't want to, but it has came to this: https://www.pslib.cz/karel.hrkal/ukazky/color_combine.php don't mind that sprintf error, i was testing something else. – kajacx May 24 '14 at 19:42

How to multiply hex color codes?

1 Answers1