将十六进制转换为RGBA

javascript jquery colors

2022-08-30 05:05:31

我想尝试简单的十六进制到rgba转换。我曾经使用过使用rgb作为默认值的浏览器渲染颜色，因此当使用farbtastic颜色选择器时，我通过抓取十六进制值生成的背景颜色将十六进制值转换为rgb（默认情况下为rgb =简单转换）

我尝试将符号替换为，但这不起作用，所以我只是去看看如何将rgb转换为rgba，我仍然遇到麻烦。), 1)

jquery

$('.torgb').val($('#color').css('background-color'));
$('.torgba').val().replace(/rgb/g,"rgba");

目标
enter image description here

编辑：

微小颜色是一个很棒的颜色操作js库，可以完成我在这里想要的一切以及更多。我想你们可能想试一试！- https://github.com/bgrins/TinyColor

答案 1

//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)
*/

答案 2

@ElDoRado1239有正确的想法，但也有一种更干净的方式：

function hexToRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexToRGB('#FF0000', 0.5);