Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 23 Jun, 2020
Improve Article
Save Article

The HTML tag <input type =”color”> provides a user interface element, that let the user specify the color with the help of the visual color picker interface or by entering the color value into the text field in #rrggbb hexadecimal format. Only simple colors (without alpha channel) are allowed though CSS colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel.

Example:

html




<!DOCTYPE html>
<html>
    <body>
          
<p>GeeksforGeeks</p>
  
        <label for="colors">Color:</label>
        <input type="color" value="#ff0000" id="colors" />
          
<p>A Computer Science Portal For Geeks.</p>
  
        <script>
            var colors;
            var defaultColor = "#0000ff";
            window.addEventListener("load", startup, false);
            function startup() {
                colors = document.querySelector("#colors");
                colors.value = defaultColor;
                colors.addEventListener("input", updateFirst, false);
                colors.addEventListener("change", updateAll, false);
                colors.select();
            }
            function updateFirst(event)
            {
                var p = document.querySelector("p");
                if (p) 
                {
                    p.style.color = event.target.value;
                }
            }
            function updateAll(event) {
                document.querySelectorAll("p").forEach(function (p) 
                {
                    p.style.color = event.target.value;
                });
            }
        </script>
    </body>
</html>


Output: 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!