Get color code from color word

Question

I would like to write a javascript program to get rgb color for specific color words in css.

So, for example, if I type red , I would like to output rgb(255, 0, 0) . I would also like to convert from rgb(255, 0, 0) to red .

Is there any way to do this in javascript?

Answer 1

This cannot be easily implemented programmatically because browsers differ in their behavior. You cannot say for sure whether they will return the original value (for example, your word) or the calculated hex or rgb value. (Perhaps though with getComputedStyle() !)

In each case, you will not get a colored word for your rgb / hex / hsl value. (At least I don’t know what is possible).

The “easiest”, reliable way is to create a matching object that contains all the color words and their corresponding meanings. You can find the list here:

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

note that you need to access through the entry in brackets: value2word["255,0,0"]

Answer 2

You could

• create a new element using javascript.
• set background color os style to input value
• attach it to the body
• get window.getComputedStyle note: compatibility
• return equivalent of backgroundColor os

---

 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)" 

But note: as Christoph says you cannot say for sure that you always need to have the right meaning
Although this works fine for me in Chrome

But I don’t think you can get it in reverse order with the Card, as Christophe says.

JSBin daemon

Update

---

Here is a full-mapping function that returns colored objects containing hexadecimal, registered, and rgb representations of color.

 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"); } } 

What produces this conclusion:

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

And a demo on JSBin
Note: colors contain a complete list of advanced color keywords

Here is the code I used to clear the color table above.

 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

I think this is what you want:

 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> 

Check it out on fiddle .

I think it works great!