HTML5 incluye un nuevo campo de entrada que permite al usuario escoger un color determinado de una forma sencilla y rápida.

En HTML5 se incluye un nuevo campo de entrada de datos para seleccionar un color. Dicho campo facilita un interfaz conocido como colorpicker, que permite al usuario seleccionar un color específico, variando sus parámetros, generalmente desde un esquema de colores RGB.

Este interfaz varía dependiendo del sistema operativo, a continuación algunos ejemplos:

Colorpicker, Chrome (Android y Windows)

La etiqueta que utilizaremos para mostrar esta interfaz será <input> con el atributo type="color":

Tipo de información a obtener Etiqueta a utilizar Ejemplo
Campo de entrada de datos de selección de color <input type="color">

El usuario puede elegir un color en su interfaz de selección de colores y este color es guardado en el campo en formato hexadecimal. También se puede indicar en el atributo value para establecer un color por defecto:

<form name="formulario" method="post" action="http://pagina.com/send.php">
  <!-- Selección de color -->
  Selecciona el color deseado:
  <input type="color" name="color" value="#1BF44A">
  <!-- Color verde por defecto HEX(1B, F4, 4A) -->
</form>

Desgraciadamente, en este momento el soporte de este campo de selección de colores en los diferentes navegadores es bastante pobre:

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).