SASS offre funzioni come lighten() e darken() per modificare i colori. Queste forniscono un approccio pratico alla manipolazione dei colori in CSS. E se volessi ottenere lo stesso risultato in JavaScript?
Considerando quanto popolare sia modificare lo stile dei componenti HTML direttamente JavaScript, quella è ormai una esigenza basica. Ecco perché sono nate diverse librerie per i colori in JavaScript. Il loro obiettivo è rendere più semplice la gestione dei colori in JS. Qui, avrai modo di approfondire color, la più popolare di tutte!
In questo articolo, scoprirai perché hai bisogno di una libreria di manipolazione dei colori in JavaScript, perché color è la migliore e quali funzionalità e metodi offre.
Iniziamo!
Perché manipolare i colori in JavaScript
I colori svolgono un ruolo vitale nel design web, nelle interfacce utenti, nell’accessibilità, nella UX e nella visualizzazione dei dati. Con la giusta libreria JavaScript, puoi manipolare i colori in modo dinamico e programmatico sia nel frontend che nel backend.
Nel dettaglio, ci sono almeno tre scenari reale in cui poter interagire con i colori in JavaScript è fondamentale:
- Settare i colori direttamente da JavaScript: Supponiamo che un’API restituisca informazioni relative allo stile di un componente o che tu debba cambiare colori in base all’interazione dell’utente. In questo caso, non puoi fare affidamento su CSS ma devi invece impostare lo stile degli elementi HTML nel frontend tramite codice JavaScript. Ad esempio, in React questo si traduce nel settare la prop
style. - Convertire i colori: HEX, RGB, RGBA, HLS e HLSA sono i principali formati supportati dalle applicazioni web per la rappresentazione dei colori. Dal momento che il miglior formato cambia da caso d’uso a caso d’uso, potresti aver bisogno di convertire i colori per renderli più facili da comprendere o manipolare.
- Migliorare l’accessibilità: Un esempio è dare agli utenti la possibilità di selezionare un tema specifico e fare in modo che tutti i colori cambino di conseguenza. Questo è un ottimo modo per rendere le tue applicazioni web e i tuoi siti altamente accessibili.
Ora, la domanda è: “c’è una libreria per tutto ciò in JavaScript?” Sì, c’è, e si chiama color!
Cos’è la Libreria JavaScript color?
Color è una libreria JavaScript per la conversione e la manipolazione dei colori. Il pacchetto npm ha più di 15 milioni di download settimanali, rendendola la libreria di gestione dei colori più popolare tra tutte le alternative disponibili.
color espone un costruttore Color() che accetta un colore in diversi formati:
// con stringhe dei colori in CSS
const color = Color("red")
const color = Color("rgb(255, 0, 0)")
const color = Color("#FF0000")
const color = Color("hsl(0, 100%, 50%)")
// con un oggetto
const color = Color({r: 255, g: 0, b: 0})Code language: JavaScript (javascript)Dietro le quinte, i costruttori che accettano stringhe vengono gestiti con il pacchetto color-string.
L’oggetto restituito da Color() espone diversi metodi per la conversione e manipolazione dei colori. Questi metodi sono immutabili poiché restituiscono sempre un nuovo oggetto colore, senza modificare la struttura dati originale.
Utilizzare color in JavaScript
Vediamo ora le funzionalità offerte da color per rendere più semplice le operazioni di manipolazione del colore.
Prima di iniziare
Installa il pacchetto npm color con:
npm install colorSe sei un utente TypeScript, dovrai anche installare la dichiarazione dei tipi con:
npm install @types/colorCode language: CSS (css)Poi, puoi importare color in Node.js con:
const Color = require("color")Code language: JavaScript (javascript)Oppure, come modulo ES con:
import Color from "color"Code language: JavaScript (javascript)Come accennato in precedenza, Color è un costruttore che accetta un color in diversi formati e restituisce un oggetto che espone molti metodi utili. Ora è il momento di vederli in azione!
Lettura consigliata: React, tutto sulla libreria Javascript
Da RGB a HEX e da HEX a RGB
Puoi usare color per convertire un colore da RGB a HEX in JavaScript come nell’esempio qui sotto:
const blueRGB = "rgb(0, 0, 255)"
const blue = Color(blueRGB)
const blueHEX = blue.hex().toString()
console.log(blueHEX) // "#0000FF"Code language: JavaScript (javascript)Il metodo hex() restituisce un oggetto colore con i dati di rappresentazione cromatica memorizzati nel formato HEX. Nello specifico, se provi a loggare blue.hex() con console.log(), otterrai:
{ model: 'rgb', color: [ 0, 0, 255 ], valpha: 1 }Code language: CSS (css)Poi, toString() trasforma quell’oggetto in una stringa con il colore in CSS.
In maniera simile, puoi passare da HEX a RGB in JavaScript con:
const blueHEX = "#0000FF"
const blue = Color(bluHEX)
const blueRGB = blue.rgb().toString()
console.log(blueRGB) // "rgb(0, 0, 255)"Code language: JavaScript (javascript)Qui, devi però fare affidamento sul metodo rgb().
Convertire un colore da uno spazio all’altro
color offre diversi metodi per convertire da uno spazio dei colori a un altro. Al momento della scrittura di questo articolo, i metodi di conversione sono:
rgb(): Per convertire un colore da un qualsiasi spazio dei colori supportato a RGB.hsl(): Per convertire un colore da un qualsiasi spazio dei colori supportato a HSL.hsv(): Per convertire un colore da un qualsiasi spazio dei colori supportato a HSV.hwb(): Per convertire un colore da un qualsiasi spazio dei colori supportato a HWB.cmyk(): Per convertire un colore da un qualsiasi spazio dei colori supportato a CMYK.xyz(): Per convertire un colore da un qualsiasi spazio dei colori supportato a CIE XYZ.lab(): Per convertire un colore da un qualsiasi spazio dei colori supportato a L*a*b.lch():Per convertire un colore da un qualsiasi spazio dei colori supportato a LCH.ansi16(): Per convertire un colore da un qualsiasi spazio dei colori supportato a 16 ANSI.ansi256(): Per convertire un colore da un qualsiasi spazio dei colori supportato a 256 ANSI.hcg(): Per convertire un colore da un qualsiasi spazio dei colori supportato a HCG.apple(): Per convertire un colore da un qualsiasi spazio dei colori supportato allo spazio di colori di Apple.
Verificare se un colore è chiaro o scuro
Per valutare se un colore è chiaro o scuro, puoi semplicemente utilizzare il metodo isLight():
const lightBlue = Color("lightblue")
console.log(lightBlue.isLight()) // trueCode language: JavaScript (javascript)O il metodo opposto isDark():
const darkBlue = Color("darkblue")
console.log(darkBlue.isDark()) // trueCode language: JavaScript (javascript)Nota che se isLight() restituisce true, allora isDark() restituirà false e 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()) // trueCode language: JavaScript (javascript)Dietro le quinde, questi due metodi si basano sull’equazione YIQ per il calcolo del contrasto dei colori.
Manipolare i colori
Altri utili metodi per manipolare i colori offerti da color sono:
lighten(): Per schiarire un colore di una percentuale specificata.
blue.lighten(0.3) // #4D4DFFCode language: JavaScript (javascript)darken(): Per scurire un colore di una percentuale specificata.
blue.darken(0.2) // #0000CCCode language: JavaScript (javascript)lightness(): Per impostare la luminosità di un colore su un valore specifico.
blue.lightness(35) // #0000B3Code language: JavaScript (javascript)saturate(): Per saturare un colore di una percentuale specificata.
blue.saturate(1) // #0000FFCode language: JavaScript (javascript)desaturate(): Per desaturare un colore di una percentuale specificata.
blue.desaturate(0.5) // #4040BFCode language: JavaScript (javascript)whiten(): Per sbiancare un colore di una percentuale specificata.
lightBlue.whiten(0.1) // #BEDCE6Code language: JavaScript (javascript)blacken(): Per annerire un colore di una percentuale specificata.
lightBlue.blacken(1) // #ADC5CDCode language: JavaScript (javascript)rotate(): Per applicare una rotazione hue su un colore di un grado specificato.
blue.rotate(180) // #FFFF00Code language: JavaScript (javascript)fade(): Per sbiadire un colore di una percentuale specificata.
lightBlue.fade(0.2) // #ADD8E6Code language: JavaScript (javascript)opaquer(): Per rendere un colore più o meno opaco in base alla percentuale specificata.
lightBlue.opaquer(0.8) // #ADD8E6Code language: JavaScript (javascript)grayscale(): Per ottenere l’equivalente in scala di grigi del colore corrente.
blue.grayscale() // #1C1C1CCode language: JavaScript (javascript)Incolla il colore risultante nel commento JavaScript in un visualizzatore di colori HEX per vedere gli effetti di ciascun metodo.
Altri metodi getter
Color fornisce anche molti metodi getter per ottenere informazioni specifiche su un colore:
red(): Per ottenere il componente “rosso” del colore nello spazio RGB.green(): Per ottenere il componente “verde” del colore nello spazio RGB.blue(): Per ottenere il componente “blu” del colore nello spazio RGB.alpha(): Per ottenere il componente “alpha” del colore nello spazio RGBA.lightness(): Per ottenere la luminosità del colore secondo lo spazio HSL.keyword(): Per ottenere il nome CSS del colore.cyan(): Per ottenere il componente “ciano” del colore nello spazio CMY.magenta(): Per ottenere il componente “magenta” del colore nello spazio CMY.yellow(): Per ottenere il componente “giallo” del colore nello spazio CMY.black(): Per ottenere il componente “nero” del colore nello spazio CMYK.x(): Per ottenere il componente “x” del colore nello spazio CIE XYZ.y(): Per ottenere il componente “y” del colore nello spazio CIE XYZ.z(): Per ottenere il componente “z” del colore nello spazio CIE XYZ.l(): Per ottenere il componente “L” del colore nello spazio L*a*b.a(): Per ottenere il componente “a” del colore nello spazio L*a*b.b(): Per ottenere il componente “b” del colore nello spazio L*a*b.
Con tutti questi metodi, la manipolazione dei colori in JavaScript non è mai stata così semplice!
Conclusioni
In questo articolo, abbiamo visto quanto sia importante avere la capacità di poter agire sui colori direttamente in JavaScript. Come visto qui, la libreria JavaScript color è dotata di tutto ciò di cui hai bisogno per eseguire la manipolazione e la conversione dei colori.
Attraverso diversi esempi, hai avuto l’opportunità di capire come utilizzare color in scenari pratici e reali. Convertire da HEX a RGB e viceversa è ormai un gioco da ragazzi!
Grazie per aver letto questo articolo! Speriamo che ti sia stato utile!
