Selettore di colori

Il Selettore di colori è uno strumento gratuito che ti permette di scegliere un colore nel browser e ottenerne il valore nel formato desiderato.

Che cosa restituisce un selettore di colori?

Un selettore di colori restituisce una rappresentazione numerica del colore scelto sulla ruota cromatica. Lo stesso colore visibile può essere espresso in diversi formati, in genere esadecimale, RGB, RGBA, HSL o HSLA.

Questi formati descrivono il colore in modi diversi. I formati esadecimale e RGB specificano i valori dei canali rosso, verde e blu. HSL usa tonalità, saturazione e luminosità, facilitando le regolazioni sistematiche. I formati con un canale alfa descrivono anche l'opacità.

• I valori esadecimali usano un cancelletto seguito da cifre esadecimali, come #336699.
• I valori RGB esprimono generalmente ogni canale con un numero da 0 a 255, come rgb(51, 102, 153).
• I valori HSL descrivono la tonalità con un angolo e usano valori percentuali per saturazione e luminosità, come hsl(210, 50%, 40%).
• RGBA e HSLA aggiungono la trasparenza. Un valore alfa pari a 0 indica la trasparenza completa, mentre 1 indica l'opacità completa.

CSS supporta anche i colori con nome, ma i nomi disponibili appartengono a un insieme predefinito e sono meno adatti per definire token di progettazione precisi. I valori numerici generati sono generalmente più facili da trasferire tra sistemi di progettazione, fogli di stile e codice applicativo.

Come si usa il selettore di colori?

Seleziona il campo Colore, scegli il punto desiderato sulla ruota cromatica, quindi usa il valore ottenuto nel formato richiesto dalla tua applicazione. L'intera operazione avviene nel browser e il colore inserito non viene mai caricato su un server.

Se stai lavorando su un'interfaccia esistente, parti dal formato già usato nel codice. Eviterai conversioni superflue e renderai più semplice la revisione delle pull request. Quando esamini dati di terze parti, verifica se i valori includono l'opacità prima di sostituirli con un colore apparentemente equivalente.

Prima della distribuzione, puoi selezionare o riprodurre il colore desiderato, copiare la notazione appropriata e verificarla nello stato effettivo del componente. Controlla separatamente gli stati normale, passaggio del mouse, focus e disabilitato, perché l'opacità e gli stili ereditati possono modificare il risultato finale visualizzato.

Come leggere il risultato

Interpreta il risultato in base al relativo modello di colore e controlla l'eventuale componente alfa prima di copiarlo nel codice. Nel modello RGB, il valore di ogni canale determina l'intensità del rispettivo componente rosso, verde o blu. Nel modello HSL, la tonalità percorre una ruota cromatica, la saturazione controlla l'intensità del colore e la luminosità regola l'equilibrio tra nero e bianco.

Quando viene usata in CSS o nei dati strutturati, la sintassi dei colori deve essere rispettata con precisione. Tra gli errori più comuni durante la modifica manuale rientrano:

• omettere il cancelletto iniziale da un valore CSS esadecimale;
• usare cinque o sette cifre esadecimali, lunghezze non valide nel formato esadecimale standard;
• inserire percentuali quando un'implementazione RGB richiede valori numerici per i canali;
• dimenticare le virgole nella sintassi RGB tradizionale oppure combinare sintassi vecchie e moderne incompatibili;
• copiare un valore con canale alfa in un software che accetta solo valori esadecimali a sei cifre;
• usare una virgola decimale, come 0,5, quando CSS richiede un punto decimale, come 0.5.

Il selettore genera valori di colore, ma non svolge la funzione di validatore CSS generico. Non garantisce che la dichiarazione circostante, il documento JSON o il file del tema siano validi. Gli errori di sintassi esterni al valore del colore devono quindi essere verificati con il parser o lo strumento di sviluppo appropriato.

Esempi di conversione dei colori

In un colore esadecimale a sei cifre, ogni coppia di cifre corrisponde rispettivamente al rosso, al verde e al blu. Per esempio, le rappresentazioni seguenti descrivono lo stesso colore opaco.

Valore esadecimale #336699

Equivalente RGB rgb(51, 102, 153)

Equivalente HSL hsl(210, 50%, 40%)

Il formato esadecimale a tre cifre è una forma abbreviata. Ogni cifra viene ripetuta per ottenere un valore a sei cifre.

Valore esadecimale breve #fff

Valore esadecimale esteso #ffffff

Equivalente RGB rgb(255, 255, 255)

Il formato esadecimale a otto cifre include il canale alfa dopo le coppie relative a rosso, verde e blu. Presta attenzione ai sistemi che adottano un ordine diverso per i canali o non accettano la notazione a otto cifre. Anche un colore pieno visivamente identico può produrre un risultato diverso quando viene applicata l'opacità sopra un altro sfondo.

Quale formato di colore conviene scegliere?

Scegli la notazione già prevista dalla destinazione, a meno che non ci sia un motivo preciso per cambiarla. Il formato esadecimale a sei cifre è compatto e comune nelle variabili CSS e nei file dei token di progettazione. RGB è pratico quando il software espone direttamente i valori dei canali, mentre HSL è utile per creare colori correlati modificando luminosità o saturazione.

• Usa il formato esadecimale a sei cifre per un colore web opaco quando servono concisione e ampia leggibilità.
• Usa il formato esadecimale a otto cifre solo se l'ambiente di destinazione supporta esplicitamente il canale alfa in questa notazione.
• Usa RGB o RGBA quando lavori separatamente con i canali rosso, verde e blu.
• Usa HSL o HSLA per generare variazioni programmatiche di un tema basate su tonalità, saturazione o luminosità.
• Usa il Convertitore di colori se hai già un valore e devi convertirlo, anziché scegliere visivamente un nuovo colore.

Non considerare un valore RGB visualizzato sullo schermo come una specifica per la stampa. La stampa professionale può richiedere valori CMYK, un profilo colore ICC, prove colore e un accordo con il tipografo. Una semplice conversione matematica non può garantire che il colore stampato corrisponda a quello di uno schermo retroilluminato.

Quando non serve selezionare o convertire un colore?

Non è necessario selezionare o convertire un colore se il valore esistente è già nel formato richiesto dalla destinazione. Conversioni ripetute possono introdurre differenze di arrotondamento, un uso incoerente di maiuscole e minuscole o modifiche superflue ai file sorgente.

Può anche essere preferibile mantenere un token di progettazione denominato, come una variabile del tema, invece di sostituirlo con un valore letterale. I token conservano le relazioni tra i componenti e consentono di modificare un colore da un unico punto. Allo stesso modo, un colore usato esclusivamente da una macchina non richiede una rappresentazione più leggibile per le persone, a meno che qualcuno non debba esaminarlo o gestirlo.

Nessun selettore di colori può stabilire autonomamente se una scelta offre un contrasto sufficiente, rispetta le specifiche di un marchio o rimane distinguibile per le persone con deficit della visione dei colori. Verifica le combinazioni tra primo piano e sfondo con uno strumento dedicato al contrasto ed esamina l'interfaccia nel suo contesto.

Domande frequenti

Posso usare il risultato nelle variabili CSS?

Sì, purché la notazione scelta sia valida in CSS per i browser e gli strumenti di compilazione che supporti. Salva il valore completo in una proprietà personalizzata, quindi richiamalo con la funzione var(). Se il progetto gestisce i canali separatamente, può essere più pratico memorizzarli seguendo la convenzione già adottata nel progetto.

Perché lo stesso colore appare diverso su un altro schermo?

Gli schermi differiscono per calibrazione, luminosità, tecnologia del pannello e supporto della gamma cromatica. Anche la gestione del colore nel browser e il profilo dello schermo configurato nel sistema operativo possono influire sulla resa. Di conseguenza, valori numerici identici non garantiscono lo stesso aspetto fisico su ogni dispositivo.

Le lettere maiuscole o minuscole nei valori esadecimali cambiano il colore?

No. Le cifre esadecimali da A a F non distinguono tra maiuscole e minuscole, quindi #AABBCC e #aabbcc rappresentano lo stesso colore. Segui la convenzione adottata nel repository per evitare modifiche puramente formali.

Un valore di colore può contenere caratteri accentati o non latini?

Le notazioni standard esadecimale, RGB e HSL usano cifre, lettere e segni di punteggiatura ASCII. I caratteri accentati o non latini non fanno parte di queste sintassi numeriche dei colori. Possono però comparire nei nomi delle variabili o nei metadati circostanti, se il linguaggio e la codifica del file utilizzati lo consentono.

Un colore trasparente equivale all'assenza di colore?

No. Un colore completamente trasparente conserva i valori dei canali, anche se da soli non sono visibili. Questi canali nascosti possono essere rilevanti durante animazioni, interpolazioni, composizioni o successive modifiche dell'opacità. Mantienili quindi quando l'applicazione dipende da questi comportamenti.

Devo arrotondare i valori decimali dei canali?

Arrotonda i canali di colore decimali e i valori alfa solo alla precisione accettata dalla destinazione e necessaria per ottenere risultati coerenti. Una precisione eccessiva rende i valori più difficili da controllare, mentre un arrotondamento troppo marcato può produrre una lieve differenza cromatica. Dopo l'arrotondamento, verifica il componente visualizzato sullo sfondo previsto e nei diversi stati di interazione.