CodeKitHubChe cos'è questo strumento?
Un selettore di colori trasforma una scelta visiva — questa tonalità di blu, quel preciso pixel in un logo — nei codici numerici comprensibili al software. Lo stesso colore ha diverse notazioni equivalenti: l’HEX (#3b82f6) è predominante nei CSS e nei file di consegna dei progetti di design, mentre l’RGB (59, 130, 246) corrisponde al modo in cui gli schermi e il codice rappresentano il colore, mentre HSL (217°, 91%, 60%) descrive tonalità, saturazione e luminosità in un modo comprensibile per l’essere umano.
La seconda parte dello strumento è un campionatore di colori. Carica uno screenshot, un logo o una foto e clicca in un punto qualsiasi per campionare il colore sotto il cursore: il modo standard per rispondere alla domanda "di che colore esatto si tratta?". Se il browser supporta l’API EyeDropper, viene utilizzata la lente di ingrandimento nativa; negli altri browser lo strumento legge il valore dei pixel da una copia dell’immagine salvata su un canvas. In entrambi i casi l’elaborazione avviene localmente: l’immagine non viene mai caricata.
Perché usarlo?
- Tre formati contemporaneamente: ogni colore selezionato viene visualizzato contemporaneamente nei formati HEX, RGB e HSL, ciascuno con un pulsante per copiarlo con un solo clic — senza bisogno di una fase di conversione separata.
- Seleziona un'immagine: carica una foto qualsiasi e clicca per campionare il colore esatto del pixel — ideale per estrarre i colori del marchio da un logo o per abbinare un colore presente in uno screenshot.
- Utilizza il contagocce nativo del browser con la lente di ingrandimento, quando disponibile, e in tutti gli altri casi ricorre alla lettura precisa dei pixel della tela.
- Un campione di anteprima in tempo reale mostra il colore corrente a colpo d'occhio, così puoi verificare la selezione prima di copiarla.
- Gratuito, immediato e completamente locale: i colori vengono calcolati e le immagini vengono lette direttamente nel tuo browser — nulla viene caricato, archiviato o registrato.
Come si usa
- Scegli un colore utilizzando il campo colore oppure incolla o modifica direttamente un valore.
- Per prelevare un campione da un'immagine, carica un'immagine e clicca sul punto di cui desideri il colore.
- Leggi i valori HEX, RGB e HSL, visualizzati insieme a un campione di anteprima in tempo reale.
- Clicca sul pulsante "Copia" accanto al formato che ti serve: HEX per i CSS, RGB o HSL per il codice.
Esempio
Input
Clicking the blue area of an uploaded logoRisultato
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Tutte e tre le notazioni indicano lo stesso colore. Usa il formato HEX nei fogli di stile e negli strumenti di progettazione, il formato RGB quando il codice richiede valori per i canali e il formato HSL quando vuoi ottenere varianti più chiare o più scure modificando solo l'ultimo numero.
Quale formato di colore per quale lavoro
Il CSS moderno accetta tutti e tre i formati ovunque sia consentito l'uso del colore, quindi la scelta dipende dal flusso di lavoro, non dalla compatibilità. I team in genere adottano lo standard HEX nei token di design, per poi utilizzare l'HSL durante l'esplorazione delle varianti: basta modificare la luminosità di 10–15 punti per ottenere uno stato al passaggio del mouse utilizzabile senza alterare la tonalità.
| Formato | Esempio | Ideale per |
|---|---|---|
| Esagono | #3b82f6 | CSS, strumenti di progettazione, condivisione dei colori nella chat e specifiche tecniche |
| Rosso, verde, blu | Rosso, verde, blu (59, 130, 246) | Codice che gestisce i canali, il disegno su canvas e la trasparenza con rgba() |
| HSL | hsl(217, 91%, 60%) | Creazione di varianti più chiare/più scure/al passaggio del mouse, creazione di tavolozze |
Dal colore scelto al codice CSS definitivo
La selezione di un colore è solitamente il primo passo in un progetto di styling. Se hai bisogno dello stesso colore in altri formati — CMYK per la stampa o un valore OKLCH per i CSS a gamma estesa — il Color Converter prende il posto di questo selettore.
Il colore scelto spesso si traduce direttamente in un effetto visivo: il Box Shadow Generator accetta un valore HEX per creare ombre realistiche, mentre le schede arrotondate realizzate con il Border Radius Generator completano il look.
→ Convertitore di colori · Generatore di ombreggiatura dei riquadri · Generatore di raggio di bordo
Domande frequenti
Qual è la differenza tra HEX, RGB e HSL?
Si tratta di tre notazioni che descrivono lo stesso modello di colore. Il formato HEX codifica i canali rosso, verde e blu in sei cifre esadecimali (#3b82f6) ed è la forma più diffusa nei CSS e negli strumenti di progettazione. RGB elenca gli stessi tre canali come numeri decimali compresi tra 0 e 255. HSL ridefinisce il colore in termini di tonalità (0–360°), saturazione e luminosità — un approccio molto più intuitivo quando si desidera «lo stesso colore, ma più chiaro». La conversione tra questi formati non modifica mai il colore.
Come funziona la selezione di un colore da un'immagine?
L'immagine caricata viene disegnata su una tela invisibile nel tuo browser. Quando clicchi, lo strumento rileva i valori di rosso, verde e blu del pixel in quella posizione esatta e li converte in HEX, RGB e HSL. Nei browser che supportano l'API EyeDropper (Chrome ed Edge su desktop), si apre invece una lente di ingrandimento nativa che ti permette di selezionare con precisione al pixel qualsiasi punto dello schermo.
La mia immagine è stata caricata da qualche parte?
No. L'immagine viene aperta direttamente dal browser e letta localmente da un canvas; nessun file e nessun dato relativo ai colori viene mai trasmesso o memorizzato. È possibile caricare la pagina, passare alla modalità offline e sia il selettore che il campionatore di colori continueranno a funzionare — il che rende questa soluzione sicura per i progetti non ancora pubblicati e gli screenshot interni.
Perché il colore selezionato non corrisponde esattamente a quello che vedo sullo schermo?
Due motivi comuni. Anti-aliasing: i pixel ai bordi del testo e delle forme si fondono con lo sfondo, quindi cliccando su un pixel fuori dal contorno si ottiene un colore intermedio — prelevate invece il campione dalla parte centrale a colore pieno di un’area. Gestione del colore: i file JPG/PNG con profili di colore insoliti possono essere visualizzati in modo leggermente diverso a seconda dei monitor; lo strumento riporta il valore del pixel così come è memorizzato nel file, che è il valore desiderato per il lavoro di progettazione.
Quale formato dovrei copiare per i CSS?
HEX è l’impostazione predefinita più sicura: tutti i browser e gli strumenti lo accettano. Usa HSL quando prevedi di creare varianti per l’effetto hover o la modalità scura, poiché regolando solo la componente di luminosità si mantengono costanti la tonalità e la saturazione. Il formato RGB è utile soprattutto quando il codice genera i colori a partire da canali numerici o quando si aggiunge trasparenza: in questi casi, rgba(59, 130, 246, 0.5) risulta più chiaro di un codice HEX a otto cifre.