En HTML5 se ha incluido un nuevo campo de entrada <input> que permite al usuario seleccionar un color específico. Dicho campo facilita una interfaz de usuario conocida como color picker, es decir, una ventana de diálogo selectora de colores que permite al usuario elegir un color específico de una rueda de colores o un sistema alternativo, generalmente dentro de uno de los diferentes modelos de colores de CSS.

El atributo type="color"

La etiqueta que utilizaremos para mostrar esta interfaz será <input>, utilizando el atributo type al valor color. Ten en cuenta que el interfaz del color picker puede variar dependiendo del sistema operativo. Mientras en Windows saldrá de una forma, en dispositivos Apple o Android saldrá de otra:

El usuario puede elegir un color en su interfaz de selección de colores y este color es guardado en el atributo value en formato hexadecimal.

<form method="post" action="/send/">
  Selecciona el color deseado:
  <input type="color">
</form>

Color por defecto

También se puede indicar un atributo value para establecer un color por defecto. Este valor debe estar en formato hexadecimal, con o sin #. Sin embargo, otros esquemas de color como palabras clave (red, tomato, green, etc...), RGB, HSL, HWB, OKLCH u otras no serán válidas:

<form method="post" action="/send/">
  Selecciona el color deseado:
  <input type="color" value="#1BF44A">
</form>

Este campo puede ser potenciado combinándose con la etiqueta HTML <datalist>. Lo veremos en otro artículo más adelante, donde explicaremos como funciona.

El soporte de este campo de selección de colores en los diferentes navegadores es muy bueno hoy en día: