How to convert Color Names to Hexcode using JavaScript ?
Given a color name and the task is to get the HexCode of the color name. There are a few of the techniques discussed with the help of JavaScript.
Approach 1:
- Store the HexCodes of all possible color names in a JavaScript Object.
- Compare the given color name with a list of color objects and if a match is found then it returns the respective HexCode of the color and if a match is not found then it returns false.
Color Names: Just copy-paste the names inside of “var colours”.
“aliceblue”:”#f0f8ff”, “antiquewhite”:”#faebd7″, “aqua”:”#00ffff”, “aquamarine”:”#7fffd4″, “azure”:”#f0ffff”, “beige”:”#f5f5dc”, “bisque”:”#ffe4c4″, “black”:”#000000″, “blanchedalmond”:”#ffebcd”, “blue”:”#0000ff”, “blueviolet”:”#8a2be2″, “brown”:”#a52a2a”, “burlywood”:”#deb887″, “cadetblue”:”#5f9ea0″, “chartreuse”:”#7fff00″, “chocolate”:”#d2691e”, “coral”:”#ff7f50″, “cornflowerblue”:”#6495ed”, “cornsilk”:”#fff8dc”, “crimson”:”#dc143c”, “cyan”:”#00ffff”, “darkblue”:”#00008b”, “darkcyan”:”#008b8b”, “darkgoldenrod”:”#b8860b”, “darkgray”:”#a9a9a9″, “darkgreen”:”#006400″, “darkkhaki”:”#bdb76b”, “darkmagenta”:”#8b008b”, “darkolivegreen”:”#556b2f”, “darkorange”:”#ff8c00″, “darkorchid”:”#9932cc”, “darkred”:”#8b0000″, “darksalmon”:”#e9967a”, “darkseagreen”:”#8fbc8f”, “darkslateblue”:”#483d8b”, “darkslategray”:”#2f4f4f”, “darkturquoise”:”#00ced1″, “darkviolet”:”#9400d3″, “deeppink”:”#ff1493″, “deepskyblue”:”#00bfff”, “dimgray”:”#696969″, “dodgerblue”:”#1e90ff”, “firebrick”:”#b22222″, “floralwhite”:”#fffaf0″, “forestgreen”:”#228b22″, “fuchsia”:”#ff00ff”, “gainsboro”:”#dcdcdc”, “ghostwhite”:”#f8f8ff”, “gold”:”#ffd700″, “goldenrod”:”#daa520″, “gray”:”#808080″, “green”:”#008000″, “greenyellow”:”#adff2f”,
“honeydew”:”#f0fff0″, “hotpink”:”#ff69b4″, “indianred “:”#cd5c5c”, “indigo”:”#4b0082″, “ivory”:”#fffff0″, “khaki”:”#f0e68c”, “lavender”:”#e6e6fa”, “lavenderblush”:”#fff0f5″, “lawngreen”:”#7cfc00″, “lemonchiffon”:”#fffacd”, “lightblue”:”#add8e6″, “lightcoral”:”#f08080″, “lightcyan”:”#e0ffff”, “lightgoldenrodyellow”:”#fafad2″, “lightgrey”:”#d3d3d3″, “lightgreen”:”#90ee90″, “lightpink”:”#ffb6c1″, “lightsalmon”:”#ffa07a”, “lightseagreen”:”#20b2aa”, “lightskyblue”:”#87cefa”, “lightslategray”:”#778899″, “lightsteelblue”:”#b0c4de”, “lightyellow”:”#ffffe0″, “lime”:”#00ff00″, “limegreen”:”#32cd32″, “linen”:”#faf0e6″, “magenta”:”#ff00ff”, “maroon”:”#800000″, “mediumaquamarine”:”#66cdaa”, “mediumblue”:”#0000cd”, “mediumorchid”:”#ba55d3″, “mediumpurple”:”#9370d8″, “mediumseagreen”:”#3cb371″, “mediumslateblue”:”#7b68ee”, “mediumspringgreen”:”#00fa9a”, “mediumturquoise”:”#48d1cc”, “mediumvioletred”:”#c71585″, “midnightblue”:”#191970″, “mintcream”:”#f5fffa”, “mistyrose”:”#ffe4e1″, “moccasin”:”#ffe4b5″, “navajowhite”:”#ffdead”, “navy”:”#000080″, “oldlace”:”#fdf5e6″, “olive”:”#808000″, “olivedrab”:”#6b8e23″, “orange”:”#ffa500″, “orangered”:”#ff4500″, “orchid”:”#da70d6″, “palegoldenrod”:”#eee8aa”,
“palegreen”:”#98fb98″, “paleturquoise”:”#afeeee”, “palevioletred”:”#d87093″, “papayawhip”:”#ffefd5″, “peachpuff”:”#ffdab9″, “peru”:”#cd853f”, “pink”:”#ffc0cb”, “plum”:”#dda0dd”, “powderblue”:”#b0e0e6″, “purple”:”#800080″, “rebeccapurple”:”#663399″, “red”:”#ff0000″, “rosybrown”:”#bc8f8f”, “royalblue”:”#4169e1″, “saddlebrown”:”#8b4513″, “salmon”:”#fa8072″, “sandybrown”:”#f4a460″, “seagreen”:”#2e8b57″, “seashell”:”#fff5ee”, “sienna”:”#a0522d”, “silver”:”#c0c0c0″, “skyblue”:”#87ceeb”, “slateblue”:”#6a5acd”, “slategray”:”#708090″, “snow”:”#fffafa”, “springgreen”:”#00ff7f”, “steelblue”:”#4682b4″, “tan”:”#d2b48c”, “teal”:”#008080″, “thistle”:”#d8bfd8″, “tomato”:”#ff6347″, “turquoise”:”#40e0d0″, “violet”:”#ee82ee”, “wheat”:”#f5deb3″, “white”:”#ffffff”, “whitesmoke”:”#f5f5f5″, “yellow”:”#ffff00″, “yellowgreen”:”#9acd32″
Example: This example implements the above approach.
- html
html
<body> <h1 style="color: green"> GeeksforGeeks </h1> <p id="GFG_UP"> </p> Type Valid Color: <input id="input" type="text" /> <br><br> <button onclick="gfg_Run()"> Click Here </button> <p id="GFG_DOWN"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Type color and click on the button."; function convert(color) { var colours = { // Pase here the colors list }; if (typeof colours[color.toLowerCase()] != 'undefined') return colours[color.toLowerCase()]; return false; } function gfg_Run() { color = document.getElementById('input').value; el_up.style.color = color; el_down.innerHTML = "The RGB value of " + color + " is " + convert(color); } </script> </body> |
Output:
How to convert Color Names to Hexcode using JavaScript ?
Approach 2:
- First take the valid color name from the user.
- Set that color to the CSS color property of a DIV element.
- Use window.getComputedStyle(element).color property which returns the RGB value of the color.
- Call the convert() user defined function and use RGB value as a parameter.
- Use match() method to select the value of Red, Green, and Blue. The value of RGB is stored in the form of array.
- The hexCode() function call to convert the value of RGB to hexCode.
- The slice() method gets the part of a string and returns the extracted parts in a new string. The toString() method converts the number to string.
- Refer link to convert the RGB to HexValue.
Example 2: This example uses the approach discussed above.
- html
html
<body> <h1 style="color: green"> GeeksforGeeks </h1> <p id="GFG_UP"> </p> Type Valid Color: <input id="input" type="text" /> <br><br> <button onclick="gfg_Run()"> Click Here </button> <p id="GFG_DOWN"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Type color and click on the button."; function getVal(color) { // Setting the text color // of el_up element. el_up.style.color = color; } function convert(rgb) { rgb = rgb.match(/^rgb\((\d+), \s*(\d+), \s*(\d+)\)$/); function hexCode(i) { // Take the last 2 characters and convert // them to Hexadecimal. return ("0" + parseInt(i).toString(16)).slice(-2); } return "#" + hexCode(rgb[1]) + hexCode(rgb[2]) + hexCode(rgb[3]); } function gfg_Run() { // Taking the input var color = document.getElementById('input').value; getVal(color); // Getting the Color in RGB format var rgb = window.getComputedStyle(el_up).color; el_down.innerHTML = "The HexCode value of " + color +" is "+ convert(rgb); } </script> </body> |
Output:
How to convert Color Names to Hexcode using JavaScript ?
