CODEWITHSUNDEEP
javascript
Justin808
Justin808

Reputation: 21512

javascript shifting issue (rgb and rgba to hex)

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

Upvotes: 3

Views: 8443

Answers (2)

Pedro404
Pedro404

Reputation: 178

RGB to HEX

 rgb(0 255 94)
 rgb(0, 255, 94)

RGBA to HEX

 rgba(255,25,2,0.5)
 rgba(255 25 2 / 0.5)
 rgba(50%,30%,10%,0.5)
 rgba(50%,30%,10%,50%)
 rgba(50% 30% 10% / 0.5)
 rgba(50% 30% 10% / 50%)

DEMO - CODEPEN.IO

Upvotes: 0

user578895
user578895

Reputation:

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?

Upvotes: 8

Related Questions