RGB到十六进制和十六进制到RGB

01/17 18:59
阅读数 27

如何将RGB格式的颜色转换为十六进制格式,反之亦然?

例如,将'#0080C0'转换为(0, 128, 192) '#0080C0' (0, 128, 192)


#1楼

hexToRgb的替代版本:

function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

编辑:2017/3/28这是另一种方法 似乎更快

function hexToRgbNew(hex) {
  var arrBuff = new ArrayBuffer(4);
  var vw = new DataView(arrBuff);
  vw.setUint32(0,parseInt(hex, 16),false);
  var arrByte = new Uint8Array(arrBuff);

  return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}

编辑:8/11/2017经过更多测试后,上述新方法并不快:(。虽然这是一种有趣的替代方法。


#2楼

此代码接受#fff和#ffffff变体和不透明度。

function hex2rgb(hex, opacity) {
        var h=hex.replace('#', '');
        h =  h.match(new RegExp('(.{'+h.length/3+'})', 'g'));

        for(var i=0; i<h.length; i++)
            h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);

        if (typeof opacity != 'undefined')  h.push(opacity);

        return 'rgba('+h.join(',')+')';
}

#3楼

如果需要比较两个颜色值(指定为RGB,名称颜色或十六进制值)或转换为十六进制,请使用HTML5 canvas对象。

var canvas = document.createElement("canvas");
var ctx = this.canvas.getContext('2d');

ctx.fillStyle = "rgb(pass,some,value)";
var temp =  ctx.fillStyle;
ctx.fillStyle = "someColor";

alert(ctx.fillStyle == temp);

#4楼

@ Tim,添加到您的答案中(将其添加为注释有点尴尬)。

如所写,我发现rgbToHex函数在该点之后返回一个包含元素的字符串,它要求r,g,b值都在0-255范围内。

我相信这对大多数人来说似乎是显而易见的,但是我花了两个小时才弄清楚,到那时我意识到问题出在其他地方之前,原始方法已经膨胀到了7行。 因此,为了节省其他人的时间和麻烦,下面是我经过稍微修改的代码,该代码检查先决条件并修剪字符串的多余部分。

function rgbToHex(r, g, b) {
    if(r < 0 || r > 255) alert("r is out of bounds; "+r);
    if(g < 0 || g > 255) alert("g is out of bounds; "+g);
    if(b < 0 || b > 255) alert("b is out of bounds; "+b);
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}

#5楼

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
展开阅读全文
打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部