Open In App

How to convert Color Names to Hexcode using JavaScript ?

Last Updated : 24 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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 ?


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to convert Hex to RGBA value using JavaScript ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    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?
            

        
    
        
            

                HTML Color Names
            

        
    
        
            

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

        
    
        
            

                How to Drop fill color to change the image color using HTML and CSS ?
            

        
    
        
            

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

        
    
        
            

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

        
    
        
            

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

        
    
        
            

                How to choose background color through color picker?
            

        
    
        
            

                Chakra UI Color and background color
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        PranchalKatiyar                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        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