從顏色詞獲取顏色代碼

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。

我認爲它很棒！