Как сделать hex to rgba градиент?

Question

[Artem0071]

Есть цвет rgb: this.getColor // например #ffffff

Как сделать так, чтобы из него получился градиент слева направо, с начального цвета, до полупразрачного?

Сделал так:

'linear-gradient(to right, '+this.getColor+' 0%, '+this.getColor+' 70%, '+this.getColor+' 100%)'

Но все равно получается равномерный статичный
(Я понимаю что тут проценты - расстояние)
Как сделать с помощью js полупразрачный?

В общем нашел что-то, но может у кого то будет идея получше

convertHex(hex, opacity){
        hex = hex.replace('#','');
        let r = parseInt(hex.substring(0,2), 16),
            g = parseInt(hex.substring(2,4), 16),
            b = parseInt(hex.substring(4,6), 16);

        return 'rgba('+r+','+g+','+b+','+opacity/100+')';
      }

Answer 1

[Anton Filippov]

ну конвертаните хекс в ргб

//If you write your own code, remember hex color shortcuts (eg., #fff, #000)

function hexToRgbA(hex){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',1)';
    }
    throw new Error('Bad Hex');
}

hexToRgbA('#fbafff')

/*  returned value: (String)
rgba(251,175,255,1)
*/

^ первая ссылка из гугла https://stackoverflow.com/questions/21646738/conve...

Answer 2

[Дмитрий Еремин]

копайте в сторону альфа-канала
https://stackoverflow.com/questions/15597167/css3-...
xiper.net/collect/html-and-css-tricks/css-tricks/rgba

Comments

[Artem0071]

я и капаю в ту сторону)
у меня есть hex, но как из него с помощю js получить rgba?