🎨 Selettore di Colore

1. Clicca il quadrato colorato per aprire il selettore colore nativo del sistema e scegli un qualsiasi colore visivamente. In alternativa, digita un codice HEX a sei cifre nel campo HEX, con o senza cancelletto iniziale.
2. Mentre cambi il colore, il campione di anteprima si aggiorna istantaneamente e i valori HEX, RGB e HSL vengono ricalcolati in tempo reale.
3. Esamina i tre valori mostrati sotto l'anteprima. Ciascuno è nel formato esatto pronto per essere incollato in CSS o in uno strumento di design.
4. Clicca il pulsante Copia accanto al formato di cui hai bisogno per inviare quel valore negli appunti, poi incollalo nel tuo foglio di stile, componente o documento. Puoi cambiare colore tutte le volte che vuoi e ogni valore resta perfettamente sincronizzato.

Qual è la differenza tra HEX, RGB e HSL?

HEX esprime un colore come una stringa esadecimale a sei cifre come #FF5733, dove ogni coppia di cifre rappresenta i canali rosso, verde e blu. RGB elenca quegli stessi tre valori di canale come numeri decimali da 0 a 255, ad esempio rgb(255, 87, 51). HSL descrive un colore per tonalità, saturazione e luminosità, il che spesso risulta più intuitivo perché puoi scurire o saturare un colore regolando un singolo valore.

Posso inserire un codice HEX manualmente?

Sì. Digita qualsiasi codice HEX valido a sei cifre, con o senza cancelletto iniziale, nel campo HEX e lo strumento aggiorna istantaneamente l'anteprima mostrando i valori RGB e HSL corrispondenti. Anche la notazione abbreviata a tre cifre come #3b5 viene accettata ed espansa nella sua forma a sei cifre.

Quale formato dovrei usare nel mio CSS?

Tutti e tre i formati sono validi nel CSS moderno, quindi la scelta è per lo più una questione di comodità. HEX è compatto e ampiamente usato nei fogli di stile. RGB è chiaro quando devi regolare l'opacità con la notazione rgba(). HSL è particolarmente utile quando vuoi creare tinte e ombre della stessa tonalità, perché puoi cambiare solo la luminosità mantenendo fisse tonalità e saturazione.

I valori convertiti sono precisi?

Sì. Le conversioni usano matematica standard degli spazi colore, quindi i valori HEX, RGB e HSL sono accurati e coerenti tra i browser. Poiché questi formati descrivono tutti lo stesso spazio colore sRGB, convertire tra di essi non perde mai informazioni.

Quando costruisci una palette di colori, parti da un singolo colore di brand e usa la lettura HSL per generare varianti armoniose regolando luminosità e saturazione mantenendo costante la tonalità, ottenendo tinte e ombre che sembrano appartenere insieme. Per interfacce accessibili, controlla sempre il rapporto di contrasto tra il colore scelto e il testo o lo sfondo su cui poggia, perché un colore appariscente può comunque non superare gli standard di leggibilità. Ricorda che una luminosità HSL del cinquanta percento non equivale alla brillantezza percettiva, quindi gialli molto chiari e blu molto scuri alla stessa luminosità HSL possono apparire molto diversi. Se consegni i colori a uno sviluppatore, fornisci il codice HEX come valore canonico e includi gli equivalenti RGB e HSL come riferimento. Infine, memorizza la palette finale in un file di token condiviso così ogni membro del team fa riferimento agli stessi valori, evitando la deriva sottile che avviene quando i colori vengono copiati a occhio da uno strumento all'altro.