javascript shifting issue (rgb and rgba to hex)

Question

I found a RGB to hex converter and I'm trying to make a RGBA to hex converter. The original rgb2hex function works but the new rgba2hex function does not. What am I doing wrong? The rgba function is returning gba, no r.

// convert RGB color data to hex
function rgb2hex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

// convert RGBA color data to hex
function rgba2hex(r, g, b, a) {
    if (r > 255 || g > 255 || b > 255 || a > 255)
        throw "Invalid color component";
    return ((r << 32) | (g << 16) | (b << 8) | a).toString(16);
}

Example:

alert(rgb2hex(255, 155, 055));
alert(rgba2hex(255, 155, 055, 255));

Current output: ff9b2d and 9b2dff

Expected output:ff9b2d and ff9b2dff

Answer 1

Your issue is that bitwise math in JavaScript caps out at 31 bits, so you can't quite do this as is. You need to use normal math ops, not bitwise ops:

// convert RGBA color data to hex
function rgba2hex(r, g, b, a) {
    if (r > 255 || g > 255 || b > 255 || a > 255)
        throw "Invalid color component";
    return (256 + r).toString(16).substr(1) +((1 << 24) + (g << 16) | (b << 8) | a).toString(16).substr(1);
}

Also fixed an issue with the original algorithm where if the first component is < 10, the output doesn't have enough digits.

Anyway, this won't work anyway... #ff9b2dff isn't a valid color, but you may not care?