BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Color Picker jQuery simple y liviano para tus webs

28/AGO/2013 3.922 visitas Ver comentarios
Color Picker jQuery simple y liviano para tus webs

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Muchas veces nos encontramos en la necesidad de incorporar a nuestros CMS o gestores de contenido, un selector de color para que el usuario personalice determinadas secciones o colores de nuestra web.

Si alguna vez utilizaste un editor de texto wysiwyg (what you see is what you get), sabrás que todos traen opciones para personalizar el color de texto y de fondo, del mismo modo que un procesador de texto como Word o incluso la ventana de componer un nuevo correo de gmail o cualquier otro gestor de correo.

Pues bien, Colpick Color Picker nos permite, en unos 35 kb (sin contar jQuery antes que me salten al cuello) agregar un moderno selector de color en el formato que más nos interese, ya sea en RGB, HEX o HSB.

Su autor nos promete que es muy customizable, que su apariencia es similar a la del selector de Adobe Photoshop, que no requiere el uso de jQuery UI y que funciona, incluso, en Internet Explorer 7.

Entre las principales opciones está la de mostrar el selector en modo inline, lanzarlo al hacer click en un campo de texto (input text) o cualquier otro elemento, puede incluir un botón para seleccionar el color deseado o tomarlo automáticamente al ir seleccionando los distintos colores pero, además, tiene la opción de previsualizar en el campo que lo llama, el color elegido incorporando un pequeño fondo con el color a modo de vista previa.

También incluye numerosos eventos que pueden ejecutarse tanto antes, en el momento de utilizarlo o incluso una vez seleccionado el color.

No pasará mucho tiempo para que lo pruebe y, si tienes algún otro que pese menos y sea tan completo como éste, no dejes de compartirlo en los comentarios.

Código 1 - HTML
<button id="picker">Show Color Picker</button>
Código 2 - JAVASCRIPT
$('#picker').colpick();

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018