Hai trovato il colore perfetto in formato HEX, ma lo strumento di design che stai usando richiede RGB. Oppure un cliente ti ha inviato un colore in RGB e ti serve il valore HSL per il tuo CSS. La conversione dei formati colore è un'attività quotidiana per designer e sviluppatori. Il nostro Convertitore di Colori la rende istantanea.
Cosa ti serve
- Un valore colore in qualsiasi formato (HEX, RGB, HSL o altri)
- Un browser web (Chrome, Firefox, Safari o Edge)
- Nessun account né installazione necessari
Guida passo dopo passo
Inserisci il tuo valore colore
Apri lo strumento Convertitore di Colori. Digita o incolla il tuo valore colore in qualsiasi formato supportato. Ad esempio, inserisci #3B82F6 come valore HEX, rgb(59, 130, 246) come RGB, oppure hsl(217, 91%, 60%) come HSL. Lo strumento riconosce automaticamente il formato.
Visualizza tutte le conversioni
Lo strumento mostra istantaneamente il tuo colore in ogni formato supportato: HEX, RGB, HSL e altri. Puoi vedere un'anteprima dal vivo del colore insieme a tutti i suoi valori equivalenti. Se hai bisogno di regolare il colore, usa il selettore colore per perfezionarlo visivamente.
Copia il formato di cui hai bisogno
Clicca il pulsante copia accanto a qualsiasi formato per copiare il valore negli appunti. Incollalo direttamente nel tuo file CSS, strumento di design o ovunque ti serva. Nessuna riscrittura manuale necessaria.
Buono a sapersi Il Convertitore di Colori funziona interamente nel tuo browser. Funziona offline una volta caricato e non richiede account né installazioni.
Capire i formati colore
Strumenti e contesti diversi utilizzano formati colore diversi. Ecco quando usare ciascuno:
HEX
Il formato più comune sul web. Un colore HEX inizia con # seguito da sei caratteri (lettere e numeri), come #FF5733.
- Usato in: CSS, HTML, strumenti di design (Figma, Sketch, Photoshop)
- Formato:
#RRGGBBdove ogni coppia è un valore esadecimale da 00 a FF - Esempio:
#3B82F6(un blu medio)
RGB
Descrive un colore usando le sue componenti Rosso, Verde e Blu, ciascuna da 0 a 255.
- Usato in: CSS (funzione
rgb()), linguaggi di programmazione, illuminazione LED - Formato:
rgb(rosso, verde, blu) - Esempio:
rgb(59, 130, 246)
HSL
Descrive un colore usando Tonalità (0-360 gradi sulla ruota dei colori), Saturazione (0-100%) e Luminosità (0-100%).
- Usato in: CSS (funzione
hsl()), teoria del colore, sistemi di design - Formato:
hsl(tonalità, saturazione%, luminosità%) - Esempio:
hsl(217, 91%, 60%)
Consiglio HSL è il formato più intuitivo per regolare i colori. Vuoi una tonalità più chiara? Aumenta il valore di luminosità. Vuoi un tono più smorzato? Diminuisci la saturazione. Questo rende HSL ideale per costruire sistemi di colori e creare variazioni di un colore base.
Quando usare quale formato
| Situazione | Formato consigliato |
|---|---|
| Scrivere CSS a mano | HEX (breve e familiare) o HSL (facile da regolare) |
| Specifiche degli strumenti di design | HEX (standard del settore) |
| Manipolazione dinamica dei colori nel codice | HSL (più facile da regolare programmaticamente) |
| Comunicare i colori ai clienti | HEX (il più universalmente riconosciuto) |
| Design per la stampa | CMYK (separato dai formati per schermo) |
Oltre il singolo colore
Una volta convertito il tuo colore, potresti voler esplorare strumenti correlati:
- Generatore di Gradienti: Crea gradienti CSS fluidi usando i tuoi colori. Inserisci due o più colori e ottieni il codice del gradiente pronto da incollare nel tuo foglio di stile.
- Generatore di Palette: Genera palette di colori armoniose basate sul tuo colore di partenza. Ottieni automaticamente schemi di colori complementari, analoghi, triadici e altro.
Questi strumenti funzionano in sinergia con il Convertitore di Colori per aiutarti a costruire un sistema di colori completo per il tuo progetto.
Importante I colori possono apparire diversi su schermi diversi a causa della calibrazione del display, dei profili colore e delle impostazioni di luminosità. Quando la precisione del colore è critica (branding, design per la stampa), verifica sempre i tuoi colori sul supporto finale, non solo sul tuo schermo.
Domande frequenti
Qual è la differenza tra HEX e RGB?
Rappresentano le stesse informazioni in notazioni diverse. HEX usa l'esadecimale (base 16) e RGB usa il decimale (base 10). #FF0000 e rgb(255, 0, 0) sono entrambi rosso puro.
Posso convertire in CMYK per la stampa? I formati colore per schermo (HEX, RGB, HSL) e i formati per la stampa (CMYK) sono modelli di colore fondamentalmente diversi. Esiste una conversione matematica, ma per colori di stampa accurati dovresti usare uno strumento professionale di gestione del colore.
E la trasparenza (alpha)?
HEX supporta l'alpha con due caratteri aggiuntivi (#3B82F680). RGB e HSL la supportano come funzioni rgba() e hsla(). Il Convertitore di Colori gestisce anche questi formati.
Prossimi passi
Con i tuoi colori convertiti, prova il Generatore di Gradienti per creare bellissimi gradienti CSS, oppure usa il Generatore di Palette per costruire uno schema di colori completo attorno al colore che hai scelto.