Convertitore di colori

Un colore, tre dialetti

In una normale giornata lavorativa lo stesso colore arriva in tre costumi: la guida del brand ti fornisce un codice HEX, un canvas o una libreria per grafici vuole i numeri RGB, e il CSS moderno è più piacevole da regolare in HSL. Questa pagina mantiene tutti e tre allineati: digita nel campo che corrisponde a ciò che ti è stato dato e gli altri due si riscrivono da soli mentre digiti, con il campione che mostra come i numeri appaiono davvero. Funziona anche l'HEX abbreviato: incolla #f80 e si espande in #ff8800, esattamente come lo leggerebbe un browser. Non c'è un selettore di colore con cui combattere; il punto qui è tradurre con precisione un valore che hai già.

Costruire una palette con HSL

HSL si guadagna da vivere nel momento in cui ti servono variazioni di un colore piuttosto che il colore stesso. Mantieni fissa la tonalità e sposta solo la luminosità: abbassala di dieci punti per uno stato hover, alzala di quaranta per uno sfondo tinteggiato, e ogni variante resta riconoscibilmente lo stesso colore — qualcosa quasi impossibile da fare modificando direttamente le cifre HEX. Abbassare la saturazione dà la versione smorzata e grigiastra che funziona per i pulsanti disabilitati e i bordi sottili. Poiché i campi si aggiornano l'un l'altro in tempo reale, un flusso di lavoro rapido è: incolla l'HEX del tuo brand, leggi l'HSL, regola un numero, e ricopia fuori l'HEX aggiornato — una piccola palette in meno di un minuto, senza alcun software di design coinvolto.

Limiti onesti, e un trucco vicino

Due cose che questo convertitore deliberatamente non fa. Non ha un canale alfa — il campo RGB parla in rgb(), non rgba() — quindi la trasparenza è qualcosa che aggiungi dopo nel tuo CSS, dove appartiene. E i valori HSL sono arrotondati a numeri interi per leggibilità, il che significa che un giro completo HEX → HSL → HEX può derivare di un singolo punto; invisibile a schermo, ma vale la pena saperlo se confronti file di stile. Lo strumento è gratuito senza limiti, come tutti i nostri strumenti per sviluppatori. Un abbinamento da ricordare: una volta che questa pagina ti ha detto esattamente di che colore è lo sfondo di un logo, il nostro strumento di trasparenza immagine può rimuovere esattamente quel colore dall'immagine — un comodo passaggio in due tempi quando prepari grafiche per un sito web.

Tre modi per descrivere lo stesso colore

HEX e RGB descrivono un colore in base all'intensità della luce rossa, verde e blu (solo con notazioni diverse) — HSL lo descrive invece tramite tonalità, saturazione e luminosità, il che spesso risulta più intuitivo per scegliere o regolare una tonalità a mano.