Selettore colori

Scegli un colore e ottieni tutti i suoi codici

A volte riconosci il colore che vuoi quando lo vedi, non come numero. Il selettore colori ti permette di sceglierlo a occhio e poi ti dà il suo valore nei formati usati da designer e sviluppatori, HEX, RGB, HSL e CMYK, così puoi incollarlo direttamente in CSS, Figma, Canva, PowerPoint o nel tuo website builder.

Scegli un colore con il selettore, regolalo finché non ti convince e copia il codice che ti serve.

È un aiuto rapido quando scegli i colori del brand, crei una tavolozza, definisci lo stile di un pulsante o vuoi riprodurre un colore che hai visto.

Come usare il selettore colori

1. Clicca sul campo colore e scegli un colore.
2. Regolalo finché non ti sembra giusto.
3. Leggi i valori in ciascun formato.
4. Copia il codice che ti serve nel tuo progetto.

Esempi

Pervinca del brand

Input: Scegli #8997BB

Risultato: HEXA #8997BB

Per un colore completamente opaco il valore HEXA è il normale codice a sei cifre. Le caselle RGBA, HSLA, HSVA e CMYK si aggiornano sullo stesso colore.

Una sovrapposizione semitrasparente

Input: #8997BB con il cursore dell'opacità al 50%

Risultato: HEXA #8997BB80

Vengono aggiunte due cifre per la trasparenza (80 corrisponde a circa il 50%) e l'RGBA termina con 0.5. Usa l'uno o l'altro nel CSS per mantenere la trasparenza.

Usi comuni

• Scegliere i colori del brand, dei pulsanti e degli sfondi di un sito.
• Creare una tavolozza per un logo, delle slide o grafiche social.
• Ottenere i valori CSS mentre definisci lo stile di una pagina.
• Trovare varianti più chiare e più scure per gli stati hover.
• Insegnare la teoria del colore e i modelli di colore.
• Scegliere un colore del testo accessibile, poi verificarne il contrasto con lo sfondo.

Consigli e cose da sapere

• Controlla il contrasto tra testo e sfondo: le WCAG raccomandano almeno 4,5:1 per il testo normale.
• Crea una tavolozza da un unico colore di base cambiando solo la luminosità in HSL.
• Converti tra tutti i formati con il convertitore di colori, oppure usa da HEX a RGB e da RGB a HEX per conversioni rapide.
• Gli schermi mostrano i colori in modo diverso; prova i colori importanti del brand su più dispositivi.

Casi particolari e limiti

• Il valore CMYK è una semplice conversione matematica, non un profilo di stampa con gestione del colore. Per la stampa del brand chiedi i valori esatti alla tipografia.
• Per prelevare un colore da un'immagine o da un'altra app usa il contagocce del browser o del sistema operativo, poi incolla qui il codice per ottenere gli altri formati.
• I colori appaiono diversi su schermi diversi. Controlla i colori importanti del brand su più di un dispositivo.

Domande frequenti

Come trovo il codice HEX di un colore?

Scegli il colore qui e copia il valore HEX, che inizia con #.

Quale formato di colore devo usare nel CSS?

Vanno bene HEX, rgb()/rgba() o hsl()/hsla(). L'HEX è il più diffuso; l'HSL è il più facile da regolare.

Come prelevo un colore da un'immagine?

Il sistema operativo o il browser possono includere uno strumento contagocce. Una volta ottenuto il valore, incollalo nel convertitore di colori.

Che differenza c'è tra RGB e CMYK?

L'RGB è per gli schermi (luce), il CMYK è per la stampa (inchiostro). Converti con attenzione quando progetti per la stampa.

Strumenti correlati

• Convertitore di colori: Converti il tuo colore in molti altri formati.
• Da HEX a RGB: Converti facilmente i colori HEX in RGB con questo semplice convertitore.
• Da RGB a HEX: Converti facilmente i colori RGB in HEX con questo semplice convertitore.
• Ottimizzatore di immagini: Comprimi e ottimizza le immagini per ridurne il peso mantenendo un'alta qualità.
• Lettore EXIF: Carica un'immagine ed estrai i dati che contiene.