Fornisce un contagocce pixel-preciso per selezionare colori da qualsiasi elemento.
Estrarre valori di colore esatti da una pagina web è un'operazione comune — abbinare un colore del brand, fare riferimento a un design, o controllare una tonalità usata sul sito di un concorrente. I DevTools del browser mostrano i colori nel pannello Styles, ma solo per elementi con proprietà CSS di colore esplicite — non per immagini, gradienti o colori ereditati.
Il contagocce di Color Picker lavora a livello di pixel — legge il colore effettivamente renderizzato di qualsiasi pixel sotto il cursore, indipendentemente da come quel colore sia stato ottenuto. Clicca su un cielo blu in un'immagine hero, sul punto medio di un gradiente, o su un overlay semitrasparente, e ottieni il valore di colore composito esatto. Tutti e tre i formati di output (HEX, RGB, HSL) sono mostrati simultaneamente — clicca su qualsiasi formato per copiarlo. Le tue ultime scelte vengono salvate in una striscia di cronologia colori in basso.
La trasparenza alpha viene preservata nell'output — selezionare un overlay semitrasparente restituisce un valore rgba() o hsla() con il canale alpha corretto, non solo l'RGB appiattito che otterresti da uno strumento di screenshot. Su macOS e Windows, il selettore può usare la capacità di contagocce nativo del browser quando disponibile, permettendoti di campionare il colore da qualsiasi punto dello schermo, anche completamente al di fuori della finestra del browser — utile quando devi abbinare un colore da un file di design aperto in un'altra applicazione.
Un cerchio di anteprima ingrandito mostra i pixel intorno al cursore con mirino per selezione esatta.
HEX, RGB e HSL mostrati tutti contemporaneamente.
Clicca su qualsiasi riga formato per copiare quel valore.
I colori selezionati recentemente sono salvati in una striscia visiva.
Il colore selezionato è mostrato come campione grande per verifica facile.
Seleziona colori da CSS, gradienti, immagini, canvas, video e sovrapposizioni.
Seleziona il colore esatto dal sito di un'azienda.
Seleziona colori direttamente da foto e illustrazioni.
Il bottone dovrebbe essere #7c3aed? Seleziona e verifica.
Seleziona colori che ti piacciono mentre navighi — la cronologia costruisce una palette.
Seleziona colori in punti diversi di un gradiente CSS.
Apri il dock e clicca l'icona.
Muovi il cursore sulla pagina per vedere l'anteprima ingrandita.
Clicca per catturare il colore in quel pixel.
Clicca sulla riga HEX, RGB o HSL per copiare.
Continua a cliccare. Ogni selezione si aggiunge alla cronologia.
Installa DevSuite Pro gratuitamente e sblocca più di 64 strumenti per sviluppatori per il tuo browser.
