input type="color"

La etiqueta <input> en html tiene como valor "color" en su atributo type, input type="color", esto simboliza a un campo de entrada de un color. En la actualidad en los navegadores modernos los controles de color en su mayoría son representados por controles que permiten a los usuarios finales cambiar su color gráficamente.

Para el caso de envío del contenido del formulario, los navegadores hacen el mecanismo de conversión de la información a una cadena que simboliza un color. A continuación mostramos las reglas para componer un color válido.

Colores

Básicamente está formado por los códigos.

• Hexadecimal
• Hue saturation lightness
• Nombre de color en HTML
• RGB

Para mayor información sobre los colores hexadecimal, Hue saturation lightness, entre otros más diríjase a Códigos de colores HTML.

Ejemplos

En este presente ejemplo crearemos un formulario con el campo de color, usted verá las funcionalidades de este control en el presente ejemplo.

<form style="background-color: #3f6a9e;">
       <fieldset>

           <legend><b>Campo de color</b></legend>
           <p> Color por defecto: <input type="color"> </p><br>
           <input type="submit">
       </fieldset>
   </form>

Adentrándonos más sobre input type="color", en este ejemplo facilitaremos una lista de colores propuestas para que el usuario final elige el color que más desea, además de selección de color predeterminada. Para ello usaremos etiqueta <datalist>, para ello haremos un enlazado entre el id de la lista y él atributo list del campo.

<form>
    <fieldset>
        <legend><b>Colores</b></legend>
        <p>

            Color <input type="color" list="listacolor">

            <input type="submit">

        </p>
    </fieldset>
</form>

<datalist id="listacolor">
    <option value="#ff0000">
    <option value="#00ff00">
    <option value="#ffff00">
    <option value="#000080">
</datalist>

Siguiendo con input type="color" cumplimentaremos un poco más. Para ello  este último ejemplo mostraremos su valor en hexadecimal en un campo de texto una vez seleccionada un color que usted sea ver en código hexadecimal.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend>Colores</legend>
        <input type="color" id="get" onchange="fetch()">
        <label><b> Valor en Hexadecimal </b></label>
        <input type="text" id="put">
    </fieldset>
</form>

 

Nota: Para las personas que desean recoger datos de colores RGB o hexadecimal y los demás se encuentra en este control input type="color", en su mayoría de los casos se utiliza a la hora de darle estilos a nuestro pagina, como para darle color al texto, color de fondo de la pagina, color de pie de pagina, entre otras mas.