从颜色词获取颜色代码

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]} 

而一个演示上JSBin
注：颜色包含Extended color keywords

继承人的我用来凑代码完整列表上述颜色表

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。

我认为它很棒！