Top 5: los mejores complementos de selector de color de javascript y jQuery

Top 5: los mejores complementos de selector de color de javascript y jQuery

Una herramienta de color, un selector de color o un selector de color en una aplicación, es una utilidad que generalmente, pero no necesariamente, se encuentra dentro de las aplicaciones de gráficos. Se utilizan para elegir colores o crear combinaciones de colores. Normalmente, te permiten elegir un color en su representación RGB-A, HEX o HSL-A.

En esta parte superior, compartiremos con usted 5 de los complementos de selector de color más importantes, útiles y fáciles de implementar para aplicaciones web.

5. Tinycolorpicker

Github 

Tiny Colorpicker es una biblioteca de navegador cruzado que crea una entrada de selector de color (formulario). Es una manera fácil de agregar selectores de color a sus formularios o interfaz de usuario.

  • Soporte para iOS, Android y Windows Phone.
  • Disponible como complemento de jQuery y como microlib de JavaScript vanilla.
  • Compatibilidad con AMD, Node, requirejs y commonjs.
  • Fácil de personalizar
  • Se puede utilizar en formas interiores o exteriores.
  • Ligero
  • Le permite seleccionar un color de una imagen predefinida

Tinycolorpicker

4. Espectro (mantenido en 2020)

Como desarrollador, es posible que ya haya visto este complemento en alguna parte, ¡el antiguo selector de color de Google Chrome! Este complemento formaba parte de los navegadores web más conocidos. Es muy fácil de usar y ligero.
CSS de espectro

3.  Elija un color

Github

Pick-a-Color es un selector de color jQuery fácil de usar para Twitter Bootstrap. Permite a los usuarios manipular la saturación, el espectro y el tono para obtener cualquier color, es compatible con dispositivos móviles y de escritorio.

Elige un color

2.  Eyecon Colorpicker

Este complemento es un componente simple para seleccionar el color de la misma manera que selecciona el color en Adobe Photoshop. Es personalizable y tiene las siguientes características:

  • Modo plano: como elemento en la página
  • Potentes controles para la selección de colores
  • Fácil de personalizar el aspecto cambiando algunas imágenes.
  • Encaja en la ventana gráfica (semi-sensible)

Selector de colores Eyecon

1. Farbtastic

Farbtastic es un complemento de jQuery que puede agregar uno o más widgets de selección de color en una página a través de JavaScript. Luego, cada widget se vincula a un elemento existente (por ejemplo, un campo de texto) y actualizará el valor del elemento cuando se seleccione un color.

Farbtastic

Menciones honoríficas

Huebee

Github

Demostración de Huebee

Huebee es una biblioteca de JavaScript para crear selectores de color centrados en el usuario. Huebee muestra un conjunto limitado de colores para que los usuarios vean todos los colores de un vistazo, tomen decisiones claras y seleccionen un color con un solo clic. Si está creando una aplicación de código abierto con una licencia compatible con la licencia GNU GPL v3 , puede utilizar Huebee según los términos de la GPLv3. Obtenga más información sobre las licencias de código abierto de Huebee .

Colpick

Ejemplo de Colpick

Colpick es un complemento de selector de color jQuery ligero con campos RGB, HSB y HEX, varias máscaras y diseños.

  • ¡Sin imágenes! Solo un archivo JS y CSS
  • Interfaz muy intuitiva similar a Photoshop
  • Máscaras CSS3 claras y oscuras fáciles de personalizar
  • 28 KB en total cargados por el navegador
  • Funciona y se ve bien incluso en IE7
  • Extremadamente fácil de implementar

El repositorio de esta parte superior es una bifurcación del complemento colpicker original, porque el repositorio original ya no se mantiene. Esta versión tiene las siguientes mejoras:

  • Polyfill: nueva opción 'polyfill' para trabajar con campos de entrada de colores nativos
  • Color automático: obtenga el color predeterminado del atributo 'valor' de un elemento usando la función jQuery .val ()
  • Padre personalizado: Nueva opción 'appendTo' para especificar a qué elemento agregar el selector ( PR # 44 )
  • Estilos CSS: nueva opción 'estilos' para especificar estilos adicionales que se establecerán en el selector ( PR # 44 )
  • Compatibilidad con UMD: utiliza un cierre de estilo UMD para poder cargarlo con cargadores AMD (require.js) o CommonJS
  • Soporte hexadecimal de 3 caracteres: Se agregó soporte para ingresar códigos hexadecimales de tres caracteres como se especifica en la especificación CSS 2.1 ( PR # 43 )
  • Problemas resueltos: # 16 , # 17 , PR # 58

Selector de color

Github

Complemento selector de color

Selector de color es un complemento de selector de color simple escrito en JavaScript puro, para navegadores modernos, con soporte para eventos táctiles.

Iro.js

Github

Selector de color de Iro.js

Iro.js es una biblioteca de selección de color JavaScript basada en SVG sin dependencias. Ofrece:

  • IU personalizable basada en SVG
  • Convierta colores entre RGB, HSV, HSL y RGB hexadecimal
  • Actualice dinámicamente los estilos CSS cuando cambie el color seleccionado
  • Ligero, alrededor de 13 KB minificado (o ~ 5 KB minificado + gzip)
  • Cero dependencias (ni siquiera jQuery o hojas de estilo / imágenes adicionales)

Colorjoe

Github

Color Joe Colorpicker JavaScript

Colorjoe es un selector de color escalable. Colorjoe se inspiró de alguna manera en ColorJack y RightJS Colorpicker. A diferencia de esos, escala bastante bien. Básicamente, esto significa que podrá definir sus dimensiones y diseño reales utilizando un poco de CSS. De esta manera, el widget se adapta bien a diseños receptivos. Además, es relativamente fácil implementar la funcionalidad faltante (campos RGB, todo eso) gracias a la API simple que proporciona.

Espectro (sin mantenimiento)

Como desarrollador, es posible que ya haya visto este complemento en alguna parte, ¡el antiguo selector de color de Google Chrome! Este complemento formaba parte de los navegadores web más conocidos. Es muy fácil de usar y ligero.
CSS de espectro

Selector de color de rueda

El complemento Wheel Color Picker agrega la funcionalidad de selector de color al elemento HTML en el estilo de rueda de color redonda. El Selector de color de rueda se puede mostrar como un cuadro de diálogo emergente cuando los usuarios enfocan la entrada o incrustado en línea. 
Selector de color de rueda para jQuery

¿Conoces otro selector de color hermoso y útil? No seas tímido y compártelo con la comunidad en el cuadro de comentarios.

Esto podria interesarte

Conviertete en un programador más sociable