更新

Question

我想写一个javascript程序来获取css中定义的颜色词的rgb颜色。

例如，如果我输入red，我想输出rgb(255, 0, 0)。我还想将rgb(255, 0, 0)转换为red。

有没有办法在javascript中执行此操作？

Answer 1

这无法以编程方式轻松完成，因为浏览器的行为不同。您无法确定它们是返回原始值（例如您的单词）还是计算出的十六进制或rgb值。（虽然有getComputedStyle()可能！）

在每种情况下，都不会获取rgb / hex / hsl值的颜色词。（至少我不知道这是可能的）。

“最简单”，可靠的方法是创建一个包含所有颜色词及其各自值的映射对象。你可以在这里找到这个列表：

http://dev.w3.org/csswg/css-color/#svg-color

var word2value = {
       red: {"hex":"#FF0000","rgb":"255,0,0"},
       /* ... all other values */
}

var value2word = {
       "FF0000" : "red",
       "255,0,0": "red"
}

注意，您需要通过括号表示法访问：value2word["255,0,0"]

Answer 2

你可以

使用javascript创建一个新元素。
设置背景颜色o.s.样式到输入值
将其附加到身体
获取其window.getComputedStyle 注意：兼容性
返回等效的backgroundColor o.s。

function getRGB(v) {
    var el = document.createElement("div");
    el.style["background-color"] = v;
    document.body.appendChild(el);

    var style = window.getComputedStyle(el);

    var color = style["backgroundColor"];

    document.body.removeChild(el);
    return color;

}

getRGB ("red") //"rgb(255, 0, 0)"

但请注意：正如Cristoph所说，你不能肯定地说总是得到正确的价值
虽然它在Chrome上运行得很好

但我不认为你可以通过地图反过来得到它，就像Cristoph建议的那样

恶魔JSBin

更新

这是一个带有完整地图的函数，它返回颜色包含颜色的十六进制，命名和rgb represantations的对象。

function getColor (r,g,b) {

var colors = {TooBigToPostHere:...}     //see the JSBin                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
function rgbToHex(r, g, b) {
     var hex = "#";
     for (var i = 0; i < 3; i++) {
         var _hex = arguments[i].toString(16);
         while (_hex.length < 2) _hex = "0" + _hex;
         hex += _hex
     }
     return hex.toUpperCase();
 }
 if (typeof r === "string")  r = r["to"+(!!~r.indexOf("#")?"Upper":"Lower")+"Case"]();   
 if (r in colors) return colors[r]
 else if (r !== undefined && g !== undefined && b !== undefined) {
     var hex = rgbToHex(r, g, b);
     if (hex in colors) return colors[hex]
     else return {
             rgb: [r, g, b],
             hex: hex,
             name: null
     }
 } else {
     throw new SyntaxError("Invalid Arguments");
 }

}

产生此输出：

console.log ( getColor (245,245,245)) //{"hex": "#F5F5F5", "name": "whitesmoke", "rgb": [245, 245, 245]}
console.log ( getColor ("#EE82EE")); //{"hex": "#EE82EE", "name": "violet", "rgb": [238, 130, 238]}
console.log ( getColor ("red")); //{"hex": "#FF0000", "name": "red", "rgb": [255, 0, 0]}

<{3}} 上的演示 注意：颜色包含JSBin

的完整列表
下面是我用来刮掉上面颜色表的代码

var colors = {}; [].forEach.call(document.querySelectorAll (".colortable tr"), function (e,i) { if ( i > 0 ) { var hex = e.children[3].innerText; colors[hex] = {}; colors[hex].hex = hex; colors[hex].name = e.children[2].innerText; colors[hex].rgb = e.children[4].innerText.split(","); colors[hex].rgb.map(function (a,b,c) {c[b] = +a}) colors[colors[hex].name] = colors[hex]; } });

Answer 3

我认为这就是你想要的：

Text:
<input type="text" id="ctext" />
<br>RGB:
<input type="text" id="crgb" />
<br>
<button onclick="doMagic();">Magic</button>
<div id="output" style="display:none"></div>
<script>
    function doMagic() {
        $('#output').html('<p id=test style=\'color:' + $('#ctext').val() + ';\'>sometext</p>');
        $('#crgb').val($('#test').css("color"));
    }
</script>

在fiddle上查看。

我觉得它很棒！

从颜色词中获取颜色代码

3 个答案:

更新