Come funziona
Fissa ciascun canale a 0-255, arrotondalo, quindi scrivi due cifre esadecimali per canale dietro #. HSL deriva dai rapporti RGB: tonalità dal canale dominante, saturazione dalla distanza tra massimo e minimo, luminosità dalla loro media.
- HEX accetta 3 o 6 cifre; i valori sono limitati a 0–255.
Perché è importante
Gli strumenti di progettazione esportano diversi formati e i CSS ne prevedono di specifici. La conversione a mano comporta errori di arrotondamento e lo stesso colore scritto in tre modi è facile da verificare una volta viste tutte le rappresentazioni affiancate.
Un esempio pratico
rgb(99, 91, 255) è #635BFF e hsl(244, 100%, 68%). Il formato HEX è quello che gli autori CSS incollano più spesso; HSL è più facile da scurire o desaturare senza indovinare nuovi canali.
Errori comuni
- Supponendo che lo stesso HEX appaia identico ovunque senza gestione del colore.
- Dimenticando che l'HEX a tre cifre espande ogni bocconcino due volte.
- Modifica dei canali RGB quando volevi regolare la luminosità.
Consigli pratici
Progetta in HSL quando hai bisogno di tinte e sfumature sistematiche: mantieni tonalità e saturazione, varia la luminosità gradualmente. Memorizza l'HEX per l'output, ma conserva le note HSL nel file di progettazione per modifiche future.
Come usarlo
- Apri lo strumento. Tutto viene eseguito nella scheda del tuo browser.
- Incolla o digita il tuo input, quindi scegli l'azione che ti serve.
- Controlla il risultato e copialo con un clic.
Domande comuni
Perché il mio valore HEX è diverso in un altro strumento?
I valori vengono fissati a 0-255 e arrotondati, quindi scritti in maiuscolo HEX. Alcuni strumenti mantengono l'input in minuscolo o non valido.
Cos'è l'HSL?
Una rappresentazione alternativa: tonalità in gradi, saturazione e luminosità in percentuale. È utile per regolare i colori.
Controlla il contrasto?
No. Converte i formati di colore; il controllo del contrasto è uno strumento diverso.
Questo strumento è davvero gratuito?
SÌ. Non esiste alcun account, nessun paywall e nessun limite di utilizzo. L'app Tools è finanziata da aumenso, lo studio dietro di essa.
Tutto ciò che inserisco è stato caricato?
No. Lo strumento viene eseguito nella scheda del browser; ciò che inserisci non ci viene mai inviato e mai archiviato.