La Mejor librería de Manipulación de Colores en JavaScript

Lee esta guía y descubre lo que el paquete «color» de npm tiene para ofrecer a través de ejemplos de código.

SASS viene con funciones para modificar colores de forma programática, como lighten() y darken(). Estas ofrecen un enfoque práctico para la manipulación de colores en CSS. Pero, ¿qué pasa si quisieras lograr el mismo resultado en JavaScript puro?

Considerando lo popular que se ha vuelto el estilo de componentes HTML en JavaScript, esa es ahora una necesidad básica. Como resultado, han surgido varias opciones de librerías de colores en JavaScript. Su objetivo es facilitar el manejo de colores en JS. Aquí, profundizamos en color, la más popular de todas.

En este artículo, descubrirás por qué necesitas una librería de colores en JavaScript, por qué color es la mejor opción y qué características y métodos ofrece.

¡Vamos a sumergirnos!

Por qué Manipular Colores en JavaScript

Los colores desempeñan un papel vital en el diseño web, la interfaz de usuario, la accesibilidad, la experiencia del usuario y la visualización de datos. Con la librería de colores adecuada en JavaScript, puedes manipular colores de manera dinámica y programática en el frontend o backend.

En detalle, existen al menos tres escenarios del mundo real por los cuales tratar con colores en JavaScript es importante:

• Establecer colores en código JavaScript: Supongamos que una API devuelve información de estilo sobre un componente específico, o que necesitas cambiar colores según la interacción del usuario. En este caso, no puedes depender de CSS. En su lugar, debes aplicar el estilo de los elementos HTML en el frontend mediante código JavaScript. Por ejemplo, en React, esto se traduce en establecer el prop «style» de manera programática.
• Convertir colores: HEX, RGB, RGBA, HLS y HLSA son los principales formatos que las aplicaciones web admiten para la representación de colores. El mejor formato a adoptar varía de caso en caso. Por lo tanto, es posible que necesites convertir colores para que sean más fáciles de comprender o manipular.
• Mejorar la accesibilidad: Dar a los usuarios la capacidad de seleccionar un tema específico y hacer que todos los colores se actualicen en consecuencia. Esta es una excelente manera de hacer que las aplicaciones y los sitios web sean muy accesibles.

Ahora, la pregunta es: «¿Existe una librería para todo esto en JavaScript?» Sí, existe, ¡y se llama color!

¿Qué es la librería de Color en JavaScript?

Color es una librería de JavaScript para convertir y manipular colores. El paquete npm tiene más de 15 millones de descargas semanales, convirtiéndose en la librería de manipulación de colores más popular entre todas las alternativas disponibles.

color expone un constructor F5F5F5 que acepta un color en varios formatos:

// CSS color strings
const color = Color("red")
const color = Color("rgb(255, 0, 0)")
const color = Color("#FF0000")
const color = Color("hsl(0, 100%, 50%)")

// object
const color = Color({r: 255, g: 0, b: 0})Lenguaje del código: JavaScript (javascript)

Tras bastidores, los constructores de cadenas son gestionados con el paquete color-string.

El objeto devuelto por Color() expone varios métodos de conversión y manipulación de colores. Estos son inmutables, ya que siempre devuelven un nuevo objeto de color sin cambiar la estructura de datos original.

Usando color en JavaScript

Ahora veamos las características que ofrece color para implementar operaciones de manipulación de colores sin esfuerzo.

Comenzar

Instala el paquete npm color con

npm install color

Si eres usuario de TypeScript, también deberás instalar la declaración de tipos con:

npm install @types/colorLenguaje del código: CSS (css)

Luego, puedes importar color en Node.js con:

const Color = require("color")Lenguaje del código: JavaScript (javascript)

O, como un módulo ES con:

import Color from "color"Lenguaje del código: JavaScript (javascript)

Como se mencionó anteriormente, Color es una función constructora que acepta una representación de color en muchos formatos y devuelve un objeto que expone varios métodos útiles. ¡Es hora de verlos en acción!

RGB a HEX y HEX a RGB

Puedes convertir un color de RGB a HEX en JavaScript usando color, como se muestra en el ejemplo a continuación:

const blueRGB = "rgb(0, 0, 255)"
const blue = Color(blueRGB)
const blueHEX = blue.hex().toString()
console.log(blueHEX) // "#0000FF"Lenguaje del código: JavaScript (javascript)

El método hex() devuelve un objeto de color con los datos almacenados en formato HEX. En particular, si registras blue.hex() con console.log(), verás:

{ model: 'rgb', color: [ 0, 0, 255 ], valpha: 1 }Lenguaje del código: CSS (css)

Luego, toString() transforma ese objeto en una cadena de color CSS legible para los humanos.

De manera similar, puedes ir de HEX a RGB en JavaScript con:

const blueHEX = "#0000FF"
const blue = Color(blueHEX)
const blueRGB = blue.rgb().toString()
console.log(blueRGB) // "rgb(0, 0, 255)"Lenguaje del código: JavaScript (javascript)

Aquí, necesitas confiar en el método rgb() en su lugar.

Convertir un Color a un Espacio Diferente

color ofrece varios métodos para convertir de un espacio de color a otro. Hasta la fecha de esta redacción, estos son los métodos de conversión de espacio de color disponibles:

rgb(): To convert a color from any supported color space to RGB.

hsl(): To convert a color from any supported color space to HSL.

hsv(): To convert a color from any supported color space to HSV.

hwb(): To convert a color from any supported color space to HWB.

cmyk(): To convert a color from any supported color space to CMYK.

xyz(): To convert a color from any supported color space to CIE XYZ.

lab(): To convert a color from any supported color space to L*a*b.

lch(): To convert a color from any supported color space to LCH.

ansi16(): To convert a color from any supported color space to 16 ANSI.

ansi256(): To convert a color from any supported color space to 256 ANSI.

hcg(): To convert a color from any supported color space to HCG.

apple(): To convert a color from any supported color space to the Apple color space.

Comprobar si un Color es claro u oscuro

Para evaluar si un color es claro u oscuro, simplemente puedes usar el método isLight():

const lightBlue = Color("lightblue")
console.log(lightBlue.isLight()) // trueLenguaje del código: JavaScript (javascript)

O el método opuesto isDark():

const darkBlue = Color("darkblue") 
console.log(darkBlue.isDark()) // trueLenguaje del código: JavaScript (javascript)

Ten en cuenta que si isLight() devuelve true, isDark() devolverá false y viceversa:

const lightBlue = Color("lightblue") 
console.log(lightBlue.isLight()) // true
console.log(lightBlue.isDark()) // false
const darkBlue = Color("darkblue")
console.log(darkBlue.isLight()) // false
console.log(darkBlue.isDark()) // trueLenguaje del código: JavaScript (javascript)

Bajo el capó, estos dos métodos se basan en la ecuación YIQ para calcular el contraste de color.

Manipular Colores

Otros métodos útiles para manipular colores ofrecidos por color son:

lighten(): Para aclarar un color en un porcentaje específico.

blue.lighten(0.3) // #4D4DFFLenguaje del código: JavaScript (javascript)

darken(): Para oscurecer un color en un porcentaje específico.

blue.darken(0.2) // #0000CCLenguaje del código: JavaScript (javascript)

lightness(): Para establecer la luminosidad de un color en un valor específico.

blue.lightness(35) // #0000B3Lenguaje del código: JavaScript (javascript)

saturate(): Para saturar un color en un porcentaje específico.

blue.saturate(1) // #0000FFLenguaje del código: JavaScript (javascript)

desaturate(): Para desaturar un color en un porcentaje específico.

blue.desaturate(0.5) // #4040BFLenguaje del código: JavaScript (javascript)

whiten(): Para blanquear un color en un porcentaje específico.

lightBlue.whiten(0.1) // #BEDCE6Lenguaje del código: JavaScript (javascript)

blacken(): Para oscurecer un color en un porcentaje específico. 

lightBlue.blacken(1) // #ADC5CDLenguaje del código: JavaScript (javascript)

blue.rotate(180) // #FFFF00Lenguaje del código: JavaScript (javascript)

fade(): Para desvanecer un color en un porcentaje específico.

lightBlue.fade(0.2) // #ADD8E6Lenguaje del código: JavaScript (javascript)

opaquer(): Para hacer que un color sea más o menos opaco según el porcentaje especificado.

lightBlue.opaquer(0.8) // #ADD8E6Lenguaje del código: JavaScript (javascript)

grayscale(): Para obtener el equivalente en escala de grises del color actual.

blue.grayscale() // #1C1C1CLenguaje del código: JavaScript (javascript)

Pega el color resultante en el comentario de JavaScript en un visualizador de colores HEX para ver los efectos de cada método.

Los Métodos Getters

color también proporciona muchos métodos getters para obtener información específica sobre un color:

red(): Para obtener el componente «rojo» del color en el espacio RGB.

green(): Para obtener el componente «verde» del color en el espacio RGB.

blue(): Para obtener el componente «azul» del color en el espacio RGB.

alpha(): Para obtener el componente «alfa» del color en el espacio RGBA.

lightness(): Para obtener la luminosidad del color según el espacio HSL.

keyword(): Para obtener el nombre CSS del color.

cyan(): Para obtener el componente «cian» del color en el espacio CMY.

magenta(): Para obtener el componente «magenta» del color en el espacio CMY.

yellow(): Para obtener el componente «amarillo» del color en el espacio CMY.

black(): Para obtener el componente «negro» del color en el espacio CMYK.

x(): Para obtener el componente «x» del color en el espacio CIE XYZ.

y(): Para obtener el componente «y» del color en el espacio CIE XYZ.

z(): Para obtener el componente «z» del color en el espacio CIE XYZ.

l(): Para obtener el componente «L» del color en el espacio Lab.

a(): Para obtener el componente «a» del color en el espacio Lab.

b(): Para obtener el componente «b» del color en el espacio Lab.

Con todos estos métodos, ¡tratar la manipulación de colores en JavaScript nunca ha sido tan fácil!

Conclusión

En este artículo, has visto lo importante que es tener la capacidad de manejar colores directamente en JavaScript. Como se ha visto aquí, la librería de colores en JavaScript viene equipada con todo lo que necesitas para realizar manipulación y conversión de colores.

A través de varios ejemplos, has tenido la oportunidad de comprender cómo usar color en escenarios del mundo real. ¡Convertir de HEX a RGB y viceversa ahora es pan comido!

¡Gracias por leernos! ¡Esperamos que hayas encontrado útil este artículo!

Únete a nuestra comunidad

¿Te apasiona el Desarrollo multiplataforma? ¿Quieres cambiar tu trayectoria laboral? En nuestra plataforma de Talent puedes encontrar la forma de llevar tu carrera al siguiente nivel. Entra en nuestra web y encuentra tu trabajo ideal- Échale un vistazo.

Ser parte de la comunidad de Codemotion te permitirá potenciar tu experiencia y enfrentar nuevos desafíos que impulsarán tu carrera. Aprenderás nuevas habilidades técnicas y crecerás junto a otros miembros mediante el intercambio de opiniones y la creación conjunta. Tenemos dos comunidades para ti según tu experiencia:

1. Si eres wanna-be-dev,  junior-dev o early-mid-dev nuestra comunidad de Discord es para ti. Allí encontrarás recursos, eventos, formación, muchos compañeros de viaje y beneficios exclusivos. Súmate aquí.
2. Si eres late-mid-dev, senior-dev, Tech Lead o CTO nuestra comunidad de Telegram es para ti. Allí encontrarás el mejor networking, artículos high-tech, debates de tendencias tech y beneficios exclusivos. Súmate aquí.