Add opacity in react style backgroundColor using hex values?

Question

I'd like to parse a value from a variable in Javascript to a React style property.

However, it appears that one might only be able to add opacity with the rgba value?

Say I have:

const blueColor = "#2c8da9"

I now want to add that to a background color property in JSX with 0.2 opacity. I can do this with rgba, but it does not look nice:

backgroundColor: rgba(blueColor, 0.2)

Is there a way to achieve the same, directly referencing the hexidecimal value rather than using rgba, to input opacity directly into, for example, a backgroundColor property?

Answer 1

You can use the new 8 digit hex color notation, where the last two digits signify the opacity.

const blueColor = '#2c8da9';
const oBlueColor = blueColor+'33'; // 0.2 opacity added

document.getElementById('one').style.backgroundColor = blueColor;
document.getElementById('two').style.backgroundColor = oBlueColor;

<div id="one">one</div>
<div id="two">two</div>

Doesn't work on all browsers yet though, so it's OK to use only if you know your users all have compliant browsers. You might want to hold off releasing this in the wild for now.