La etiqueta HTML <input type =”color”> proporciona un elemento de la interfaz de usuario que permite al usuario especificar el color con la ayuda de la interfaz del selector de color visual o ingresando el valor del color en el campo de texto en formato hexadecimal #rrggbb . Solo se permiten colores simples (sin canal alfa), aunque los colores CSS tienen más formatos, por ejemplo, nombres de color, notaciones funcionales y un formato hexadecimal con canal alfa.
Ejemplo:
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>
Producción:
