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