Farbtastic Color Picker

Name: Farbtastic Color Picker
Brand: Jose Aguilar
SKU: joseaguilarblog-3424
Availability: InStock
Rating: 5 (2 reviews)

Farbtastic es un plugin jQuery que nos permite tener uno o varios selectores de color en una página Web.

Cada widget se vincula a un elemento existente (por ejemplo, un campo de texto) y se actualiza el valor del elemento cuando se selecciona un color.

Para disponer de este selector o color picker tan solo deberemos incluir los estilos necesarios, la librería jQuery, el plugin y su llamada en nuestro <head>:

<link rel="stylesheet" href="farbtastic.css" type="text/css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('#demo').hide();
    $('#picker').farbtastic('#color');
});
</script>

Y luego en nuestro <body>, dentro de un formulario podríamos tener el siguiente código:

<div class="form-item">
    <label for="color">Color:</label>
    <input type="text" id="color" name="color" value="#123456" />
</div>
<div id="picker"></div>

El empleo de este plugin podría ser interesante, por ejemplo, en el caso de que queramos que los usuarios puedan cambiar el color de fondo de su escritorio, empleando este selector de color y depositando su valor en un campo de texto tipo hidden y al pulsar un botón enviar el código del color seleccionado para guardarlo en base de datos o archivo.

Otra gran utilidad que le veo es que el código de los colores es difícil sabérselos de memoria. Podríamos seleccionarlo en este estupendo selector para saber su código. Lo puedes ver en el ejemplo en funcionamiento.