Question

我目前正在制作RGB到Hex转换器并遇到了问题。例如，如果输入了rgb(9,9,9)，则会输出#999而不是#090909。这似乎只是值0到9的问题（尽管0不是问题）。

我目前的代码：

c = type.slice(4).split(','); // type would be 'rgb(9,9,9)'
c[2] = c[2].substring(0, c[2].length - 1);

var s = '#';
for (i=0; i<3; i++) {
  c[i] = +c[i]
  s += c[i].toString(16);
  console.log(s);
}

如您所见，我没有单独的红色，绿色和蓝色输入。我希望能够输入全彩色。我在javascript控制台中对此进行了测试，因为我的页面尚未准备就绪，但此刻并不重要。我测试了它进入rgb(255,255,255)并成功输出了#ffffff。

如果有人可以帮我解决这个问题。感谢。

Answer 1

以下将对RGB到十六进制的转换：

  function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert( rgbToHex(0, 51, 255) ); // #0033ff

或

您也可以使用以下代码。在以下函数中，如果指定的颜色字符串已经是十六进制，则返回该字符串。如果它是rgb格式，则将其转换为十六进制。

function colorToHex(color) { if (color.substr(0, 1) === '#') { return color; } var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color); var red = parseInt(digits[2]); var green = parseInt(digits[3]); var blue = parseInt(digits[4]); var rgb = blue | (green << 8) | (red << 16); return digits[1] + '#' + rgb.toString(16); }; colorToHex('rgb(120, 120, 240)')

Answer 2

检查您的值是否小于16（= 0x10）。如果是，请在前面添加一个零：

s += (c[i] < 16 ? "0" : "") + c[i].toString(16);

Answer 3

试试这个简单的js函数：

function rgb2hex(rgb_color) {
    var output = [];
    var slots = rgb_color.trim().match(/^rgba?\(([0-9]+),([0-9]+),([0-9]+)(,[0-9]+)?\)$/i);
    if (slots instanceof Array) {
        for (var x = 1; x <= 3; x++) {
            var _hex = parseInt(slots[x], 10).toString(16) + "";
            output.push(_hex.length == 2 ? _hex : "0" + _hex)
        }
    }
    return "#" + output.join("");
}

console.log(rgb2hex("rgb(9,9,9)"));

RGB到十六进制代码

3 个答案: