Los elementos<input> del tipo «color» proporciona un elemento de interfaz de usuario que permite a los usuarios especificar un color, bien mediante una interfaz visual de selección, bien a través de un cuadro de texto donde ingresar un valor hexadecimal en el formato «#rrggbb». Solo se permiten colores simples (sin canal alfa). Los valores son compatibles con CSS.

La presentación del elemento puede variar considerablamente entre navegadores y plataformas: podría ser un campo de entrada sencillo que valida automáticamente que la entrada esté en el formato adecuado, o podría lanzar un selector de colores estándar de la plataforma, o incluso podría abrir una ventana de colores personalizada.

Pruébalo

<p>Choose your monster's colors:</p><div>  <input type="color" name="head" value="#e66465" />  <label for="head">Head</label></div><div>  <input type="color" name="body" value="#f6b73c" />  <label for="body">Body</label></div>

p,label {  font:    1rem "Fira Sans",    sans-serif;}input {  margin: 0.4rem;}

Valor

Elvalue de un elemento<input> del tipo «color» es siempre unaDOMString que contiene una cadena de siete caracteres en la que se especifica un color RGB de manera hexadecimal. Aunque es posible introducir el color tanto en mayúsculas como en minúsculas, este se almacena en minúsculas. El valor nunca presenta otra forma y nunca está vacío.

Uso de las entradas de color

Las entradas del tipo «color» son sencillas debido al número limitado de atributos que admiten.

Proporcionar un color predeterminado

Puede actualizar el ejemplo simple anterior para definir un valor predeterminado, de manera que el botón muestrario de colores tenga precargado ese color y el selector de colores (si lo hay) se abra con ese color preseleccionado también:

<input type="color" value="#ff0000" />

Si no especifica un valor, se utilizará «#000000», negro, de manera predeterminada. El valor debe especificarse en la notación hexadecimal de siete caracteres; esto es, el carácter «#» seguido de dos dígitos para representar el rojo, el verde y el azul: «#rrggbb». Si utiliza colores especificados en cualquier otro formato (como los nombres de colores CSS o las funciones cromáticas de CSS comorgb() orgba()), deberá convertirlos en valores hexadecimales antes de definirvalue.

Llevar un seguimiento de los cambios de color

Como sucede con otros tipos de<input>, existen dos sucesos que pueden emplearse para detectar cambios en el valor de color:input ychange. El sucesoinput se desencadena en el elemento<input> siempre que cambia el color. El sucesochange se desencadena cuando el usuario cierra el selector de colores. En ambos casos, puede determinar el valor nuevo del elemento al examinar suvalue.

Este ejemplo vigila los cambios del valor de color en el tiempo:

colorPicker.addEventListener("input", actualizarPrimero, false);colorPicker.addEventListener("change", watchColorPicker, false);function watchColorPicker(event) {  document.querySelectorAll("p").forEach(function (p) {    p.style.color = event.target.value;  });}

Seleccionar el valor

Si la implementación del elemento<input> del tipo «color» en el navegador del usuario no admite un botón muestrario, y es en cambio un campo de texto para escribir directamente la cadena de color, podrá utilizar el métodoselect() para seleccionar el texto actualmente presente en el campo editable. Si el navegador utiliza en su lugar un botón muestrario,select() no hace nada. Debe tener presente este comportamiento para que su código pueda responder adecuadamente en cada caso.

muestrario.select();

Validación

El valor de una entrada de colores se considera no válido si eluser agent no es capaz de convertir la entrada del usuario en la notación hexadecimal de siete caracteres minúsculos. Cuando se da esta situación, se aplica la pseudoclase:invalid al elemento.

Ejemplo

Creemos un ejemplo que realice algo más con la entrada de color a través de la monitorización de los sucesoschange yinput para tomar el color nuevo y aplicarlo a cada uno de los elementos<p> del documento.

HTML

El código HTML es bastante sencillo: un par de párrafos de material descriptivo con un<input> del tipo «color» con el identificador «muestrario», el cual utilizaremos para modificar el color del texto de los párrafos.

<p>  Este ejemplo demuestra la utilización del control  <code>&lt;input type="color"&gt;</code>.</p><label for="muestrario">Color:</label><input type="color" value="#ff0000" /><p>  Observe cómo el color de los párrafos cambia cuando manipula el selector de  colores. A medida que realiza cambios en el selector, el color del primer  párrafo cambia, a manera de previsualización (esto usa el suceso  <code>input</code>). Cuando cierra el selector, se desencadena el suceso  <code>change</code> y podemos detectarlo para cambiar todos los párrafos al  color elegido.</p>

JavaScript

Primero hay que realizar un poco de configuración. Aquí estableceremos algunas variables, una de las cuales contendrá el color que definiremos en el botón muestrario durante la primera carga y, a continuación, configurará un manejador paraload para realizar el trabajo de inicialización cuando termine de cargarse la página.

var muestrario;var colorPredeterminado = "#0000ff";window.addEventListener("load", startup, false);

Inicialización

Una vez que se haya cargado la página, se realizará una llamada a nuestro manejador del sucesoload,startup():

function startup() {  muestrario = document.querySelector("#muestrario");  muestrario.value = colorPredeterminado;  muestrario.addEventListener("input", actualizarPrimero, false);  muestrario.addEventListener("change", actualizarTodo, false);  muestrario.select();}

Esto obtiene una referencia al elemento de color<input> en una variable denominadamuestrario y, acto seguido, define el valor de la entrada de color al valor decolorPredeterminado. Después, el sucesoinput de la entrada de color se configura para llamar a nuestra funciónactualizarPrimero() y el sucesochange se configura para llamaractualizarTodo(). Ambos pueden apreciarse a continuación.

Por último, llamamosselect() para seleccionar el contenido de texto de la entrada de color input en caso de que el control se haya implementado como un cuadro de texto (lo cual no producirá ningún efecto si se ha brindado una interfaz de selección de colores en su lugar).

Reaccionar a cambios de color

Proveemos dos funciones que se ocupan de los cambios de color. La funciónactualizarPrimero() se llama en respuesta al sucesoinput. Esta modifica el color del primer elemento de párrafo del documento para que corresponda con el nuevo valor de la entrada de color. Como los sucesosinput se desencadenan cada vez que se realiza un ajuste al valor (por ejemplo, si se aumenta el brillo del color), estos se producirán repetidamente mientras se manipule el selector de colores.

function actualizarPrimero(event) {  var p = document.querySelector("p");  if (p) {    p.style.color = event.target.value;  }}

Cuando se cierre el selector de colores, señalando que el valor dejará de cambiar (a menos que el usuario vuelva a abrir el selector), se envía el sucesochange al elemento. Manejamos ese suceso a través de la funciónactualizarTodo(), sirviéndonos deEvent.target.value para obtener el color final seleccionado:

function actualizarTodo(event) {  document.querySelectorAll("p").forEach(function (p) {    p.style.color = event.target.value;  });}

Esto define el color de cada uno de los bloques<p> de manera que sus atributoscolor coincidan con el valor actual de la entrada de color, a la cual se hace referencia conevent.target.

Resultado

El resultado final es el siguiente:

Especificaciones

Compatibilidad entre navegadores

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace