Open In App
Related Articles

How to convert Color Names to Hexcode using JavaScript ?

Improve Article
Improve
Save Article
Save
Like Article
Like

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




<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 ?
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














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<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 ?
How to convert Color Names to Hexcode using JavaScript ?


                                            
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


                                                                

                                                                    

                                        Last Updated : 
                                        24 Jan, 2023
                                    

                                                                

                                    Like Article
                                    
                                

                                

                                    Save Article
                                    
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        How to stop event propagation with inline onclick attribute in JavaScript ?
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to use map() on an array in reverse order with JavaScript ?
                                    

                                

                            
                            

                          



                            

                            
                            
                                     
                        


                        
                                                    

                                

                                    

                                        Similar Reads                                    
                                    

                                    
      
                                        
        
            

                How to convert 3-digit color code to 6-digit color code using JavaScript ?
            

        
    
        
            

                How to change text color depending on background color using JavaScript?
            

        
    
        
            

                How to replace the names of multiple object keys with the values provided using JavaScript ?
            

        
    
        
            

                How to change an element color based on value of the color picker value using onclick?
            

        
    
        
            

                How to get the javascript function parameter names/values dynamically ?
            

        
    
        
            

                How to count number of occurrences of repeated names in an array of objects in JavaScript ?
            

        
    
        
            

                How to get an array of function property names from own enumerable properties of an object in JavaScript ?
            

        
    
        
            

                What characters are valid for JavaScript variable names ?
            

        
    
        
            

                How to use dynamic variable names in JavaScript ?
            

        
    
        
            

                How to convert rgb() color string into an object in JavaScript ?
            

        
                                        

                                

                            

                                                                                

                                    

                                        

                                            Complete Tutorials                                  
                                        

                                        

                                            
        
            

                JavaScript Project Ideas with Source Code
            

        
    
        
            

                Learn Data Structures with Javascript | DSA Tutorial
            

        
    
        
            

                Onsen UI
            

        
    
        
            

                React Material UI
            

        
    
        
            

                NuxtJS
            

        
                                            

                                    

                                

                                                
                        

                            

                                

                                    
                                                                    

                            


                        

                        

                            
                            

                                

                                    
Article Contributed By :

                                    

                                        
P

        

            
        

        

        

            

                PranchalKatiyar
            

            

                PranchalKatiyar
            

            

                                    

                                

                                

                                    
Vote for difficulty

                                                                        

                                        

                                            
                                            
                                            
                                            
                                            
                                        

                                        

                                    

                                

                            

                            

                                                                    

                                        
Improved By : 

                                                                            

                                                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                            

                                

                                    

                                    
                                        Report Issue 
                                    
                                

                                
                            

                            

                              

                            

                            
                        


                    



                

            

        

        

        

            
			
		
	            
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
    
    







   Lightbox