How to convert transparent colors to rgb

Question

I have colors in following format

backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',

                    ],

They are transparent colors, but when i convert them to this:

backgroundColor: [
                        getRandomColor(),
                        getRandomColor(),

                    ],

They are not transparent anymore.

function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

Can anyone help me please thanks.

Refer [__Transparent ARGB hex value__](http://stackoverflow.com/questions/23201134/transparent-argb-hex-value) — Rayon, Nov 07 '16 at 15:59
`getRandomColor()` is generating hexidecimal color codes, but transparency comes from adding an additional "alpha" channel (the last value in the rgba values and `getRandomColor()` isn't generating or applying that alpha channel value. — Scott Marcus, Nov 07 '16 at 15:59

Shomz · Answer 1 · 2016-11-07T16:16:44.923

You should probably stick to the rgba format you originally used because you can't specify the alpha channel using the hex notation. So your code would have to go through another run just to convert it back from hex to rgba and add the alpha value.

See this example, it randomizes all four (rgba) components:

function getRandomColor() {
        var color = [];
        for (var i = 0; i < 3; i++ ) {
            color.push(Math.floor(Math.random() * 256));
        }
        color.push(Math.random()); // alpha
        return 'rgba(' + color.join(',') + ')';
    }

div {text-align: center; margin: 20px 0; font-size: 40px;text-shadow: 0 0 1px #000; color: #ff0;cursor:pointer}
div:hover {text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 4px #000}
body {background: url(https://thumbs.dreamstime.com/x/retro-tile-background-5479386.jpg)}

<div onclick="this.style.background = getRandomColor()">Click me</div>

Of course, you can modify it to randomize only the RGB components and add alpha manually in case you want it locked at 0.2.

score 2 · Answer 2 · answered Nov 07 '16 at 16:44

How to convert transparent colors to rgb?

here's a function that should work in converting rgba to rgb:

var backgroundColor = [
  'rgba(255, 99, 132, 0.2)',
  'rgba(54, 162, 235, 0.2)'
]

function RGBfromRGBA(rgba) {
  const [r, g, b, per] = rgba.match(/[0-9\.]+/g)

  const diff = Number(per)

  return `rgb(${ channelInter(Number(r),diff) },${channelInter(Number(g),diff) },${channelInter(Number(b),diff)})`

}

function channelInter(v, p) {
  return 255 - (255 - v) * p | 0
}

var res = RGBfromRGBA(backgroundColor[1])

$('#rgba').css('background', backgroundColor[1]).html(backgroundColor[1])
$('#rgb').css('background', res).html(res)

div {
  height: 100px;
  width: 100px;
  margin: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='rgba'></div>
<div id='rgb'></div>

in the snippet I also made a little test and it seems ok, let me know how it goes;

Tinsten · Accepted Answer · 2016-11-07T16:10:43.650

HEX (example): #42dff4 NOT transparent

RGB (example): rgb(100,42,230) NOT transparent

RGBA (example): rgba(123,42,243,0.5) Transparent

getRandomColor() returns colors in HEX value. HEX values are always non-transparent. If you want random rgba color values (transparent) do this:

function getRandomColor() {
return "rgba(" + Math.floor(Math.random() * 255) + ","
                  + Math.floor(Math.random() * 255) + ","
                  + Math.floor(Math.random() * 255) + ",0.2)";

}

This will return a rgba value, this is the code you are looking for.

Alexis · Answer 4 · 2016-11-07T16:09:50.277

0

You just have to return 3 different value for red, green, blue between 0 and 255....

edit : And use rgba, for specify the opacity of the color.

rgba(red,green,blue,alpha=opacity).

function getRndColor()
{
 return "rgba("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+",0.2)";
}

console.log(getRndColor());

edited Nov 07 '16 at 16:09

answered Nov 07 '16 at 16:02

Alexis

5,681
1
27
44

How to convert transparent colors to rgb

4 Answers4