Change all opacity values of a CSS color pattern by a certain ratio

Question

So we have this string representing a color pattern in CSS:

const COLOR = 'linear-gradient(to top, rgba(255, 0, 0, 0.3), purple, rgba(100, 100, 200), rgba(255, 0, 0, 0.8))';

It is possible that we may have more rgba(....) or even rgb(...) substrings.

Is there an efficient regexp or method to increase the opacity value of each rgba() substrings that have the opacity specified by 10% for example?

function changeOpacity(text, change = 1) {

    ...

    return(newTextValue);
}

console.log(changeOpacity(COLOR, 1.1));

So the resulting value would be:

linear-gradient(to top, rgba(255, 0, 0, 0.33), purple, rgba(100, 100, 200), rgba(255, 0, 0, 0.88))

Answer 1

Try this:

 const COLOR = 'linear-gradient(to top, rgba(255, 0, 0, 0.3), purple, rgba(100, 100, 200), rgba(255, 0, 0, 0.8))'; function changeOpacity(text, change = 1) { newstr = text.replace(/\d\.\d/g, x => (parseFloat(x) * change).toFixed(2)); return(newstr); } console.log(changeOpacity(COLOR, 1.1));

Answer 2

I don't know your exact requirement but you can easily change the opacity of rgba(....) or rgb(....) in a gradient.

linear-gradient(to top, rgba(255, 0, 0, 0.3), purple 40%, rgba(100, 100, 200) 50%, rgba(255, 0, 0, 0.8))