Selettore di colori e convertitore di codici colore – Color Picker

Sì, il Color Picker è gratuito e non richiede registrazione. Tutte le conversioni avvengono direttamente nel tuo browser: nessun caricamento, nessun log, nessuna richiesta al server. Solo l'URL della pagina include il colore attuale come ?color=, così puoi condividerlo tramite link o salvarlo nei preferiti.

Clicca sul riquadro colorato accanto a «Colore CSS più vicino:», scegli saturazione e luminosità nel quadrato e la tonalità sotto. Il codice HEX appare in alto nel risultato e puoi copiarlo con l'apposito pulsante. Se conosci già il colore in RGB, HSL, HSV o CMYK, inserisci il valore nel campo corrispondente. Per un colore da una foto o uno screenshot, usa Image Color Picker: questo strumento non legge le immagini. Vai a Image Color Picker

Digita o incolla il valore nel campo RGB, ad esempio 24, 232, 136 o rgb(24, 232, 136). Il campo HEX mostra subito #18e888 e anche HSL, HSV e CMYK si aggiornano. Per la conversione inversa, inserisci il codice nel campo HEX, con o senza #. Entrambe le notazioni descrivono lo stesso colore dello schermo: HEX rappresenta i tre valori RGB da 0 a 255 come coppie esadecimali da 00 a ff.

RGB descrive un colore attraverso le componenti luminose rossa, verde e blu, come vengono combinate da uno schermo. HSL (tonalità, saturazione e luminosità) e HSV (tonalità, saturazione e valore) sono due diverse conversioni dello stesso valore RGB, più intuitive per le persone: HSL è utile per schiarire o scurire un colore, mentre HSV permette di comporlo tramite tonalità, saturazione e valore. CMYK (ciano, magenta, giallo e nero) non descrive invece la combinazione della luce, ma quella di inchiostri o toner usata nella stampa.

Il valore CMYK è un'approssimazione semplificata, calcolata senza profilo colore e arrotondata a percentuali intere. Ti aiuta a valutare un colore dello schermo per la stampa, ma non sostituisce una prova di stampa con il profilo della tipografia. Puoi inserire CMYK, ad esempio, come 0%, 61%, 72%, 0% o cmyk(0%, 61%, 72%, 0%).

Sì. Con il cursore dell'opacità imposti un valore da 0 a 100 %; il risultato mostra il colore come rgba() e hsla(), pronti da copiare. Se inserisci un valore con alfa, ad esempio un codice HEX a 4 o 8 cifre (#rrggbbaa), rgba() o hsla(), il cursore ne acquisisce l'opacità quando esci dal campo. Il codice HEX nel risultato resta a sei cifre.

Misura, da 1:1 a 21:1, quanto due colori, ad esempio testo e sfondo, si distinguono tra loro. Le soglie nello strumento sono: AAA da 7:1, AA da 4.5:1 per il testo normale e AA (testo grande) da 3:1 per il testo grande o in grassetto. Il Color Picker mostra il rapporto tra il tuo colore e il nero o il bianco. Per combinazioni arbitrarie di testo e sfondo, usa il Contrast Checker. Vai al Contrast Checker

Accanto al riquadro del colore, lo strumento mostra il colore CSS più vicino. Calcola la distanza euclidea tra il tuo colore e ogni colore CSS con nome nello spazio RGB e indica quello più vicino, ad esempio tomato per #ff6347. Se la corrispondenza non è esatta, compare «simile». Puoi copiare il nome e usarlo in CSS al posto del codice HEX, ma se è «simile» si tratta solo di un'approssimazione.