How to convert Color Names to Hexcode using JavaScript ? - GeeksforGeeks

31 Dec, 2019
Given a color name and the task is to get the HexCode of the color name. There are few of the most 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 list of color object and if match found then it returns the respective HexCode of the color and if match not found then it returns false.
Example: This example implements the above approach.
<!DOCTYPE HTML> <html>   <head>     <title>         How to Convert Color Names to        Hexcode using JavaScript ?    </title></head>   <body style = "text-align:center;">           <h1 style = "color: green">         GeeksForGeeks     </h1>          <p id = "GFG_UP" style =        "font-size: 20px; font-weight: bold;">    </p>          Type Valid Color:         <input id = "input" type = "text"/>          <br><br>          <button onclick = "gfg_Run()">         Click Here    </button>          <p id = "GFG_DOWN" style = "color:green;        font-size: 26px; font-weight: bold;">    </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 = {                "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"            };                              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>   </html>
Output:
Before clicking on the button:
After clicking on the button:
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.
<!DOCTYPE HTML> <html>   <head>     <title>         How to Convert Color Names to        Hexcode using JavaScript ?    </title></head>   <body style = "text-align:center;">           <h1 style = "color: green">         GeeksForGeeks     </h1>          <p id = "GFG_UP" style =        "font-size: 20px; font-weight: bold;">    </p>          Type Valid Color:         <input id = "input" type = "text"/>          <br><br>          <button onclick = "gfg_Run()">         Click Here    </button>          <p id = "GFG_DOWN" style = "color:green;        font-size: 26px; font-weight: bold;">    </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>   </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript