How to convert Color Names to Hexcode using JavaScript ?

Last Updated : 24 Jan, 2023

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 ?

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 create Hex color generator using HTML CSS and JavaScript?

PranchalKatiyar

Improve

Article Tags :

How to convert Color Names to Hexcode using JavaScript ?

Similar Reads

Thank You!

What kind of Experience do you want to share?