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

0 1 1 minute read

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>zambiatek</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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!