十六进制转RGB颜色值转换器

Question

我有一段用于将十六进制值转换为RGB的JavaScript代码，但我想知道是否可以使用jQuery调用该函数并插入HTML？

以下是JavaScript代码：

function hex2rgb( colour ) {
    var r,g,b;
      if ( colour.charAt(0) == ‘#’ ) {
          colour = colour.substr(1);
    }

    r = colour.charAt(0) + ” + colour.charAt(1);
    g = colour.charAt(2) + ” + colour.charAt(3);
    b = colour.charAt(4) + ” + colour.charAt(5);

    r = parseInt( r,16 );
    g = parseInt( g,16 );
    b = parseInt( b ,16);
    return “rgb(” + r + “,” + g + “,” + b + “)”;
}

更新

我正在尝试创建一个输入框，您可以在其中输入十六进制值，按下回车键，然后RGB值将被插入（可能会显示在某个透明元素中）。

- user1658756

---

可能需要更多关于你具体想要做什么的信息。 - Kevin Boucher

jQuery是JavaScript，所以是的。 - Sparky

你是否在想：将十六进制值输入文本框 -> 点击按钮 -> 输出RGB值作为文本？ - st3inn

Answer 1

有效的十六进制颜色代码可以在 '#' 后面有 3 个 或 6 个字符。

function hexToRgb(hex){
    if(/^#([a-f0-9]{3}){1,2}$/.test(hex)){
        if(hex.length== 4){
            hex= '#'+[hex[1], hex[1], hex[2], hex[2], hex[3], hex[3]].join('');
        }
        var c= '0x'+hex.substring(1);
        return 'rgb('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+')';
    }
}

- kennebec

Answer 2

HTML：

<input type="text" id="hex-input" placeholder="hex goes here"/>
<button id="magic-button">PUSH ME!</button>
<div id="rgb-output"></div>​​​​​​​​​​​​

JS：

$(document).ready(function() {
    $("#magic-button").click(function() {
        $("#rgb-output").html(hex2rgb($("#hex-input").val()));
    });

    $("#hex-input").keyup(function(event){
        if(event.keyCode == 13){
            $("#magic-button").click();
        }
    });
});

function hex2rgb( colour ) {
    var r,g,b;
    if ( colour.charAt(0) == '#' ) {
        colour = colour.substr(1);
    }
    if ( colour.length == 3 ) {
        colour = colour.substr(0,1) + colour.substr(0,1) + colour.substr(1,2) + colour.substr(1,2) + colour.substr(2,3) + colour.substr(2,3);
    }
    r = colour.charAt(0) + '' + colour.charAt(1);
    g = colour.charAt(2) + '' + colour.charAt(3);
    b = colour.charAt(4) + '' + colour.charAt(5);
    r = parseInt( r,16 );
    g = parseInt( g,16 );
    b = parseInt( b ,16);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}​    

http://jsfiddle.net/2fb3D/

- st3inn

---

太好了！有没有办法让它在我按回车键时工作，并能够使用半十六进制值（例如#222而不是#222222）？ - user1658756

谢谢！还有没有一种方法可以反转它或制作RGB到十六进制转换器？ - user1658756

可能想在这里查看：https://dev59.com/7G035IYBdhLWcg3wGMDa - st3inn

Answer 3

你可以将 elementId 传递给函数。

function hex2rgb( colour, id )
...
   $("#"+id).text("rgb(" + r + "," + g + "," + b + ")")
}

- Diodeus - James MacFarlane

---

你有示例/演示吗？我是JS新手，这很令人困惑。 - user1658756