convert rgba color value to 0xFFFFFFFF form in javascript

Question

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

What are you starting with specifically? Image data? The string `rgba(0,0,0,1)`? — Mark, May 22 '19 at 05:10
@MarkMeyer I have each r g b a number value. for example 80 for red 130 for green 211 for blue and opacity value will always be 255 — Chanwoo Park, May 22 '19 at 05:13

score 3 · Accepted Answer · answered May 22 '19 at 05:27

3

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 May 22 '19 at 05:27

Ricky Mo

6,285
1
14
30

Can you elaborate furthermore about what the bitwise operators such as << or >>> | do in that context? I think It would be a lot helpful for those who wants to achieve what i want to achieve – Chanwoo Park May 22 '19 at 05:31
2

`<<` is used to shift the byte to the desire position. `|` is used to add the byte to the result. `>>> 0` is just for turning the number into unsigned so it can be printed in the form of "ff5082d3" instead of "-af7d2d". – Ricky Mo May 22 '19 at 05:37
one question, shouldn't each rgb value converted to 16 bit form? – Chanwoo Park May 22 '19 at 05:47
@ChanwooPark Tell me why do you think so and I can clarify for you why your thought is not the case. Short answer: no. – Ricky Mo May 22 '19 at 06:00
for the last part (transparency) you need to take special care , look my answer – Pranoy Sarkar May 22 '19 at 06:01
@PranoySarkar OP mentioned that alpha will always be 255 in the comment that's why I hardcoded it – Ricky Mo May 22 '19 at 06:12
```var hex = 0xff000000 | ( r << 16) | ( g << 8) | b;``` I though this line of code would shift each number 80, 130, 211 to given position – Chanwoo Park May 22 '19 at 06:19
@RickyMo My bad I missed the comment – Pranoy Sarkar May 22 '19 at 06:29
@ChanwooPark do you mean converting from decimal to hexadecimal? This is not necessary as it is just a number. Decimal or hexadecimal is different format of visualisation of the same number, its value doesn't change. `80` is identical to `0x50`. You can write a number literal in either decimal form or hexadecimal form (with `0x` prefix) , or even octal number (with `0o` prefix) and binary number (with `0b` prefix) in javascript. All the variable store is just the numerical value. i.e. you can write `var r = 0x50;` or `var r = 0b1010000;` , which are all equivalent to `var r = 80;`. – Ricky Mo May 22 '19 at 07:21
@RickyMo Thanks for your super nice answers it helped me alot :)) – Chanwoo Park May 22 '19 at 07:34
Thanks for mentioning the practical use of the unsigned shift operator `>>>` in this case! – Lucas Sousa Jan 16 '21 at 23:46

score 0 · Answer 2 · answered May 22 '19 at 05:28

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.

score 0 · Answer 3 · answered May 22 '19 at 06:00

    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

convert rgba color value to 0xFFFFFFFF form in javascript

3 Answers3

Linked