Come convertire i colori tra HEX, RGB e HSL
Risposta rapida
Per convertire un colore: apri Color Converter, inserisci un colore in qualsiasi formato (HEX, RGB, HSL) e lo strumento visualizzerà immediatamente l'equivalente in tutti gli altri formati. Tutte le conversioni avvengono localmente nel tuo browser: nessun dato viene caricato.
Introduzione
I colori possono essere rappresentati in più formati: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) e altri. Strumenti e contesti diversi utilizzano formati diversi: CSS spesso utilizza HEX o RGB, gli strumenti di progettazione possono utilizzare HSL e APIs può utilizzarne uno qualsiasi. La conversione tra formati consente di utilizzare un colore definito in un sistema in un contesto che ne richiede un altro. Questa guida ti mostra come convertire i colori nel tuo browser.
Passo dopo passo
-
Apri lo strumento Convertitore colore
Vai alla pagina dello strumento Convertitore di colore. Lo strumento supporta i formati HEX, RGB, HSL, HSV e CMYK.
-
Inserisci il tuo colore
Digita o incolla un valore di colore in qualsiasi formato supportato. Esempi: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. Lo strumento rileva automaticamente il formato di input.
-
Esamina tutti i formati equivalenti
Lo strumento visualizza il colore in tutti i formati contemporaneamente: HEX, RGB, HSL, HSV e CMYK. Mostra anche un campione di anteprima del colore in modo da poter verificare che la conversione sia corretta.
-
Copia il formato che ti serve
Fai clic sul pulsante Copia accanto a qualsiasi formato per copiare quel valore negli appunti. Usalo nel tuo CSS, strumento di progettazione o applicazione.
-
Regola il colore (opzionale)
Alcuni strumenti ti consentono di regolare il colore con i cursori (per HSL: tonalità, saturazione, luminosità) e vedere tutti i formati aggiornati in tempo reale. Ciò è utile per trovare colori o sfumature correlati.
Esempi
HEX a RGB e HSL
Ingresso: #ff6600
Produzione: __TENERE_34__: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
da RGB a HEX
Ingresso: RGB(0, 128, 255)
Produzione: HEX: #0080ff
HSL: hsl(210, 100%, 50%)
da HSL a HEX
Ingresso: hsl(120, 100%, 50%)
Produzione: HEX: #00ff00
__TENERE_34__: rgb(0, 255, 0)
Problemi comuni
- HEX con vs senza #: alcuni strumenti richiedono il prefisso #, altri no. Il nostro convertitore accetta entrambi.
- 3 cifre contro 6 cifre HEX —#f60 è l'abbreviazione di #ff6600. Entrambi sono validi; il convertitore si normalizza a 6 cifre.
- HSL gamma di tonalità: la tonalità è 0-360 gradi (un cerchio). 0 e 360 sono entrambi rossi. I valori superiori a 360 vanno bene.
- Le differenze nello spazio colore —HEX, RGB e HSL sono tutte sRGB. CMYK è uno spazio colore diverso (stampa) e la conversione è approssimativa.
Suggerimenti
- Utilizza HSL per creare variazioni di colore: regolare tonalità, saturazione o luminosità è più intuitivo di RGB.
- Utilizza HEX per CSS: è il formato più compatto e ampiamente supportato nei fogli di stile.
- Usa RGB quando devi impostare la trasparenza alfa —rgb(255, 102, 0, 0.5) per un'opacità del 50% (o usa HEX a 8 cifre: #ff660080).
- Utilizza il nostro Convertitore di colori per una conversione istantanea e privata tra tutti i formati di colore.