Skip to content
Related Articles
Open in App
Not now

Related Articles

How to convert Color Names to Hexcode using JavaScript ?

Improve Article
Save Article
  • Last Updated : 24 Jan, 2023
Improve Article
Save Article

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 ?


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!