Selettore e convertitore di colori — RGB, HEX, HSL
Preleva qualsiasi colore da qualsiasi punto dello schermo o converti all'istante tra HEX, RGB e HSL.
Suggerimento: in Chrome o Edge qui compare un contagocce "preleva dallo schermo", che può campionare qualsiasi pixel del display, anche fuori dal browser.
#071E93rgb(7, 30, 147)hsl(230, 91%, 30%)HEX (#RGB o #RRGGBB), rgb(), hsl() o un semplice "r, g, b", fino a 500 righe. Ogni riga viene mostrata in HEX, RGB e HSL; le righe che non sono colori vengono segnalate e le altre vengono comunque convertite.
Hai trovato un problema o qualcosa che potrebbe andare meglio? Leggiamo ogni messaggio e sistemiamo le cose in fretta.
Converti qualsiasi colore tra HEX, RGB e HSL all'istante. Scegli un colore visivamente, incolla un codice HEX, inserisci valori RGB o HSL, oppure usa il contagocce per prelevare qualsiasi pixel del display, anche in un'altra app. Tutti i formati restano sincronizzati, con stringhe CSS pronte da copiare per ciascuno.
Hai un'intera palette? Incolla un elenco di colori, uno per riga, nella casella di conversione in blocco: ogni riga viene convertita in HEX, RGB e HSL in un'unica tabella che puoi scaricare in CSV.
Come si usa
- Scegli un colore con il selettore visivo, scrivi in uno dei campi (HEX, RGB o HSL) oppure fai clic su “Preleva un colore dallo schermo” e poi su un pixel qualsiasi del display, anche fuori dal browser.
- Tutti gli altri formati si aggiornano all'istante.
- Fai clic su Copia accanto al formato che ti serve: i valori sono pronti da incollare nel CSS.
- Per convertire molti colori, incollali uno per riga nella casella di conversione in blocco sotto il convertitore e scarica la tabella in CSV.
Domande frequenti
Qual è la differenza tra HEX, RGB e HSL?
Descrivono gli stessi colori in modi diversi. HEX (#071E93) è compatto ed è la notazione più comune sul web. RGB (rgb(7, 30, 147)) esprime le componenti rosso, verde e blu: utile quando aggiungi trasparenza con rgba(). HSL (hsl(229, 91%, 30%)) esprime tonalità, saturazione e luminosità: è il più intuitivo per regolare un colore, per esempio renderlo più chiaro o più spento.
Quando conviene usare HSL nel CSS?
Usa HSL quando ti servono varianti di un colore: mantenendo fisse tonalità e saturazione e cambiando la luminosità ottieni tinte e ombre coerenti di un colore del brand, molto più facilmente che indovinando valori HEX.
Supporta i codici HEX a 3 cifre?
Sì: le forme abbreviate come #fff o #1a9 vengono espanse automaticamente nella forma completa a 6 cifre (#ffffff, #11aa99).
Le conversioni da RGB a HEX sono esatte?
Sì: HEX è semplicemente RGB scritto in base 16, quindi la conversione tra i due è esatta in entrambe le direzioni. Le conversioni di andata e ritorno con HSL possono spostare un valore di ±1 a causa degli arrotondamenti, una differenza impercettibile nella pratica.
Posso convertire più colori in una volta?
Sì. Incolla fino a 500 colori nella casella “Conversione in blocco”, uno per riga: funzionano HEX (#fff o #071E93), rgb(), hsl() o una semplice terna “r, g, b”. Ogni riga compare in una tabella con i suoi valori HEX, RGB e HSL e un campione di colore, le righe che non sono colori vengono segnalate senza bloccare le altre e “Scarica CSV” salva l'intera tabella.
Come funziona il contagocce per lo schermo?
Usa l'API EyeDropper nativa del browser: fai clic sul pulsante, il cursore diventa una lente d'ingrandimento e cliccando su un pixel qualsiasi (in questa pagina, in un'altra scheda o in un'applicazione completamente diversa) catturi esattamente quel colore. Nulla viene registrato o caricato; l'API restituisce solo il singolo colore su cui hai cliccato. Supportato in Chrome ed Edge; Firefox e Safari non lo hanno ancora introdotto.
Riferimento rapido: le tre notazioni dei colori
• HEX (#071E93): sei cifre esadecimali, due per canale. La notazione più compatta e quella predefinita nella maggior parte degli strumenti di design e dei codebase CSS.
• RGB (rgb(7, 30, 147)): ogni canale va da 0 a 255. Usa rgba() o la sintassi moderna rgb(r g b / a) quando ti serve la trasparenza alfa.
• HSL (hsl(229, 91%, 30%)): tonalità sulla ruota dei colori (0–360°), saturazione e luminosità. La notazione più facile da modificare a mano: cambi un numero e ottieni una versione più chiara, più scura o più spenta della stessa tonalità.
Un flusso di lavoro pratico: definisci i colori del brand in HEX, modificali in HSL (tinte e ombre spostando la luminosità) e usa RGB quando una libreria o l'API canvas richiede canali numerici.
Strumenti gratuiti correlati
- Convertitore di immagini — Converti tra AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP e SVG. La maggior parte delle conversioni non esce mai dal browser.
- Ritaglia immagini — Ritaglia le immagini in qualsiasi dimensione o proporzione nel tuo browser: quadrato, 16:9, 4:3 o a mano libera.