Vai al contenuto
TextArray
100% locale

Convertitore di colori

Converti i colori tra HEX, RGB e HSL, con alfa e una tavolozza di tinte.

Ingresso
4

Convertitore di colori

Incolla un colore in qualsiasi notazione compresa dai CSS — #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) — e gli altri due torneranno immediatamente. L'esadecimale breve come #f00 viene espanso, l'hash iniziale è facoltativo e sia la vecchia sintassi della virgola che la nuova sintassi dello spazio vengono lette senza che ti venga detto quale hai utilizzato. Metti un colore per riga e un'intera tavolozza viene convertita in una volta, che è esattamente ciò che desideri quando il trasferimento di un progetto arriva come una colonna di codici esadecimali e il tuo foglio di stile è scritto in HSL.

Alpha sopravvive al viaggio comunque lo scrivi: rgba(59, 130, 246, 0.5), rgb(59 130 246 / 50%) e l'esadecimale a 8 cifre #3b82f680 descrivono tutti lo stesso blu semitrasparente e ciascuno si converte negli altri. Disattiva "Mantieni canale alfa" quando desideri solo il colore opaco. Il menu del formato di output restringe il risultato solo a esadecimale, RGB o HSL - utile per elenchi collettivi - e il menu di sintassi decide tra rgb(255, 0, 0) e rgb(255 0 0 / 0.5), quindi ciò che copi si incolla direttamente nella base di codice che già hai. L'esadecimale maiuscolo è a una casella di controllo di distanza.

Attiva la tavolozza delle tinte e ogni colore ottiene una tabella di varianti più chiare e più scure, mescolate uniformemente verso il bianco e verso il nero. È un modo rapido per ricavare stati al passaggio del mouse, bordi e stili disabilitati da un colore di marca senza aprire uno strumento di progettazione. Scegli da uno a otto passaggi per lato; il colore di base si trova al centro allo 0%.

Tutto viene eseguito nel tuo browser: nessun caricamento, nessun andata e ritorno sul server, nessun account. I colori del marchio inediti rimangono sulla tua macchina. Le righe che non sono colorate vengono lasciate al loro posto come commento CSS e conteggiate nel conteggio, quindi un errore di battitura non nasconde mai il resto di un lungo elenco. I colori CSS con nome come Rebeccapurple non sono supportati; convertili prima in esadecimale.

FAQ

Quali notazioni di colore legge?
Esadecimale a 3, 4, 6 e 8 cifre, con o senza cancelletto iniziale; rgb() e rgba(); hsl() e hsla(). La sintassi della virgola e dello spazio funzionano entrambe e la tonalità accetta deg, rad, grad e turn. I colori con nome come Rebeccapurple non sono supportati.
Come viene gestito il canale alfa?
L'alfa viene letto dal quarto argomento, dalla forma della barra e da un esadecimale di 8 cifre, quindi ristampato nella notazione scelta. Disattiva "Mantieni canale alfa" per ottenere invece il colore opaco.
Perché un colore cambia di una cifra quando lo riconverto?
HSL viene stampato come gradi interi e percentuale intera, quindi leggere nuovamente il valore arrotondato può arrivare al colore a 8 bit vicino: hsl(217, 91%, 60%) ritorna come #3c83f6, non #3b82f6. I browser girano allo stesso modo. Mantieni esadecimale come fonte di verità quando il byte esatto conta.
Cosa fa la tavolozza dei colori?
Mescola il colore verso il bianco e verso il nero con passaggi di luminosità uniformi ed elenca ciascuna variante, in modo da poter creare sfumature al passaggio del mouse, del bordo e disabilitate da un colore di base. Scegli da uno a otto passaggi per lato.
Il mio testo è caricato da qualche parte?
No. La conversione viene eseguita interamente nel tuo browser e nulla di ciò che incolli lascia il tuo dispositivo.