Controles: Selección de color

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.

Interfaz del ColorPicker

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>

El soporte de este campo de selección de colores en los diferentes navegadores es el siguiente:

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.