Color picker en HTML5

Hace poco necesitaba urgentemente un color-picker para un proyecto interno en Onswipe. Estuve a la caza de una implementación que fuera simple y flexible, pero todas las opciones que encontré eran demasiado complejas y pesadas1.

Al final me rendí y terminé diseñando y escribiendo mi propio componente.

color-picker2

Bueno, el caso es que acabo de darme cuenta de que versiones recientes de Chrome incluyen soporte nativo para el control de HTML5 <input type="color"> y me gusta mucho su implementación. Si están en la versión mas reciente de Chrome, pueden verlo en acción aqui abajo.

Solo lo he usado en MacOSX, donde no solo tiene el control una apariencia nativa, sino que utiliza el dialogo nativo del OS. Como es de esperarse, cuando el usuario selecciona un color este se propaga al atributo value del elemento <input>.

osx-picker

Hasta donde recuerdo, Windows no tiene un color-picker nativo, así que no tengo idea como funcioné. Si alguien sabe, comparta un pantallazo.

Hasta ahora es muy limitada la disponibilidad de implementaciones, pero si quieres puedes empezar a usar este control desde hoy para los usuarios que lo soporten y dejar que un polyfill se encargue de los demás pobres imberbes.





  1. El proyecto en cuestión está escrito en Ember.js, que no es precisamente amigable con componentes de terceros. Además que hubiera tenido que hacer muchos hacks para hacerlo compatible con el data-binding de Ember.