convert rgba color value to 0xFFFFFFFF form in javascript

▲
0
▼

For example, converting rgba(0,0,0,1) would be 4278190080 (result of 0xFF000000).

javascript
asked on Stack Overflow May 22, 2019 by Chanwoo Park • edited May 22, 2019 by Chanwoo Park

4 Answers

▲
2
▼

Simply shift then or. You can also use multiply then add if you want.

var r = 80;
var g = 130;
var b = 211;
var hex = 0xff000000 | ( r << 16) | ( g << 8) | b;
console.log((hex >>> 0).toString(16));

answered on Stack Overflow May 22, 2019 by Ricky Mo
▲
0
▼

I asked this question because given color for example, convertin color #4286F4 to 0xFF4286F4 would not render the same color.

Silly for me I thought 0xFFFFFFFF is formed in order of Alpha(opacity),Red,Green,Blue. But I found out that its order represents Alpha,Blue,Green,Red. so converting #4286F4 to the given format would be 0xFFF48642.

answered on Stack Overflow May 22, 2019 by Chanwoo Park
▲
0
▼

I also have this css color string to Int32 function if you need it.

Didn't do hsl or other color format though.

// Convert css color to Int32
function color2hex(text){
  let test, r = 0, g = 0, b = 0, a = 0;
  if(test = /^rgba\(\s{0,}(\d+)\s{0,},\s{0,}(\d+)\s{0,},\s{0,}(\d+)\s{0,}\,\s{0,}([\d\.]+)\s{0,}\)$/g.exec(text)){
    r = test[1];
    g = test[2];
    b = test[3];
    a = Math.floor(test[4] * 0xff);
  }else if(test = /^rgb\(\s{0,}(\d+)\s{0,},\s{0,}(\d+)\s{0,},\s{0,}(\d+)\s{0,}\)$/g.exec(text)){
    r = test[1];
    g = test[2];
    b = test[3];
    a = 0xff;
  }else if(test = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/g.exec(text)){
    r = parseInt(test[1], 16);
    g = parseInt(test[2], 16);
    b = parseInt(test[3], 16);
    a = parseInt(test[4], 16);
  }else if(test = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/g.exec(text)){
    r = parseInt(test[1], 16);
    g = parseInt(test[2], 16);
    b = parseInt(test[3], 16);
    a = 0xff;
  }else if(test = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/g.exec(text)){
    r = parseInt(test[1] + '' + test[1], 16);
    g = parseInt(test[2] + '' + test[2], 16);
    b = parseInt(test[3] + '' + test[3], 16);
    a = parseInt(test[4] + '' + test[4], 16);
  }else if(test = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/g.exec(text)){
    r = parseInt(test[1] + '' + test[1], 16);
    g = parseInt(test[2] + '' + test[2], 16);
    b = parseInt(test[3] + '' + test[3], 16);
    a = 0xff;
  }
  
  return (a << 24 | r << 16 | g << 8 | b) >>> 0;
}



// Testing
document.write(color2hex('rgba(255, 0, 0, 1)').toString(16));
document.write('<br>');
document.write(color2hex('rgb(255,0,0)').toString(16));
document.write('<br>');
document.write(color2hex('#ff0000ff').toString(16));
document.write('<br>');
document.write(color2hex('#ff0000').toString(16));
document.write('<br>');
document.write(color2hex('#f00f').toString(16));
document.write('<br>');
document.write(color2hex('#f00').toString(16));

answered on Stack Overflow May 22, 2019 by Hao Wu
▲
0
▼
    function rgba(red,green,blue,trans){
        let hex='#';
        red=Number(red).toString(16);
        if(red.length<2){ // if one digit need to append 0 infront 
            hex+='0'+red; 
        }
        else{
            hex+=red;
        }

        green=Number(green).toString(16);
        if(green.length<2){
            hex+='0'+green;
        }
        else{
            hex+=green;
        }

        blue=Number(blue).toString(16);
        if(blue.length<2){
            hex+='0'+blue;
        }
        else{
            hex+=blue;
        }

        trans=Number(trans*255).toString(16);
        trans=trans.replace(/\..*/,'');
        if(red.length<2){
            hex+='0'+trans;
        }
        else{
            hex+=trans;
        }
        return hex;
    }

console.log(rgba(0,0,0,1));//#0000000ff
console.log(rgba(255,255,255,.5))//#ffffff7f
console.log(rgba(151,12,55,.89))//#970c37e2

RBGA takes red , green blue and transparency

all RGB is range from 0 to 255 but transparencey is 0 to 1 check here in mdn for that we need to take special care , simply 1 translates to 255

I tested on chrome its working as expected

answered on Stack Overflow May 22, 2019 by Pranoy Sarkar

User contributions licensed under CC BY-SA 3.0