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

La etiqueta que utilizaremos para mostrar esta interfaz será <input> con el atributo type a color. Ten en cuenta que el interfaz puede variar dependiendo del sistema operativo:

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:
  <!-- Color verde por defecto HEX(1B, F4, 4A) -->
  <input type="color" name="color" value="#1BF44A" />
</form>

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

Volver Al índice
Acceder a Discord Comunidad de Manz.dev

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev