Paleta de colores interactiva mediante una librería Javascript

Hace un tiempo tuve un problema importante, estaba diseñando un sitio que permitía generar gráficos y, previamente, el usuario debía seleccionar los colores a usar. En este punto fracasaba. Mis opciones eran hacerle colocar el valor hexadecimal o RGB del color al visitante, o darle algunas pocas opciones como ser rojo, azul y demás, acotando muchísimo la posibilidad de elección.

La solución a este inconveniente la terminé encontrando en DhtmlGoodies. Color Picker es una librería JavaScript que nos permite transformar simples campos de texto de un formulario en potentes selectores de colores.

Una vez implementado el script cuando el usuario seleccione para llenar el campo en cuestión le aparecerá un cuadro de colores, donde con unos pocos clics podrá elegir entre más de 16 millones de variantes.

Otro dato interesante es que luego le aparecerá el input con un fondo del color que haya elegido, para fijarse si no se equivocó. A nosotros sencillamente nos entregará el valor del color en hexadecimal para que utilicemos en lo que necesitemos.

Usar Color Picker en nuestros formularios es sumamente simple.

Primero debemos descargar la librería desde aquí, descomprimir el archivo zip y subirlo a nuestro sitio. Les sugiero cambiar la imagen close.jpg, dentro de la carpeta images, por otra similar pero que tenga el texto en castellano.

Luego de esto sólo debemos enlazar el script a nuestra página poniendo el siguiente código dentro del head:

<script type="text/javascript" language="javascript" src="js/colorPicker.js"></script>
<link rel=”stylesheet” href=”css/colorPicker.css” type=”text/css”></link>

Por último, sencillamente debemos agregar lo siguiente en los campos que deseemos que Color Picker funcione:

onclick="startColorPicker(this)" onkeyup="maskedHex(this)"

Por ejemplo:

<input type="text" id="bau" onclick="startColorPicker(this)" onkeyup="maskedHex(this)">

Y con esto ya estará terminado y habremos resuelto nuestro problema de forma fácil, elegante y funcional.

Fuente: DHTML Goodies