Selettore colori: HEX, RGB, HSL e CMYK
Scegli qualsiasi colore e copia il suo codice in tutti i formati più comuni. Preleva colori da una foto o direttamente dallo schermo, trova tonalità più chiare e più scure e controlla che il testo resti leggibile.
----Tonalità, dal chiaro allo scuro
Colori abbinabili: complementare, complementari adiacenti, analoghi, triade
- Su bianco
- -
- Su nero
- -
Scegli un colore per iniziare.
Come usare il selettore colori
Clicca sul riquadro del colore per aprire il selettore del dispositivo, oppure scrivi un codice HEX come #1E90FF nel campo accanto. Il campione grande si aggiorna e tutti i codici sotto cambiano insieme. Premi Copia accanto a un formato per copiarlo negli appunti, pronto da incollare in un CSS, un’app di grafica o un documento.
Per prendere un colore da una foto o da un logo, scegli Preleva da un’immagine, carica il file e tocca il punto che vuoi. L’immagine resta sul tuo dispositivo. In Chrome ed Edge sul computer hai anche Preleva dallo schermo, un contagocce che preleva qualsiasi pixel dello schermo, anche fuori dal browser.
HEX, RGB, HSL e CMYK spiegati
- HEX è il codice a sei cifre usato sul web, come #FF5733. Ogni coppia di cifre indica la quantità di rosso, verde e blu, da 00 a FF.
- RGB dà le stesse tre quantità come numeri da 0 a 255. Gli schermi creano ogni colore mescolando luce rossa, verde e blu.
- HSL descrive un colore con tonalità (la posizione sulla ruota dei colori, da 0 a 360°), saturazione (quanto è vivace) e luminosità. È il formato più semplice per schiarire, scurire o smorzare un colore a mano.
- CMYK è la miscela di inchiostri ciano, magenta, giallo e nero usata in stampa. I valori qui sono una conversione diretta; le tipografie usano profili colore, quindi chiedi una prova se il colore esatto è importante.
Tonalità e colori abbinabili
La riga delle Tonalità mantiene tinta e saturazione e varia la luminosità dal molto chiaro al molto scuro, utile per stati al passaggio del mouse, bordi e sfondi della stessa famiglia. La riga dei Colori abbinabili applica le regole della ruota dei colori: il complementare opposto al tuo, i due complementari adiacenti, due vicini analoghi e due colori in triade a un terzo di giro. Tocca un campione per farlo diventare il colore principale.
Contrasto e leggibilità
I riquadri del contrasto mostrano quanto è leggibile il tuo colore come testo su bianco e su nero, secondo il rapporto di contrasto WCAG. Un rapporto di 4,5:1 supera il livello AA per il testo normale, 3:1 supera l’AA per il testo grande come i titoli, e 7:1 supera il livello più severo, AAA. Se il colore del tuo marchio non supera il test su bianco, usa una delle tonalità più scure per il testo e tieni l’originale per pulsanti e dettagli.
I colori su schermi diversi
Lo stesso codice può apparire un po’ diverso da uno schermo all’altro, perché cambiano luminosità, gamma di colori e calibrazione. I telefoni con schermi OLED a gamma estesa mostrano spesso colori più vivaci di un monitor da ufficio. Se la fedeltà del colore è importante, controlla il progetto su più di un dispositivo.
Selettore colori: domande frequenti
Come trovo il codice HEX di un colore?
Scegli il colore con il riquadro del colore, oppure carica un’immagine e tocca il colore che vuoi. Il codice HEX compare in cima alla lista, pronto da copiare.
Posso prelevare un colore dallo schermo?
Sì, in Chrome ed Edge su Windows, Mac e Linux. Premi Preleva dallo schermo e clicca su un pixel qualsiasi. Gli altri browser non supportano ancora il contagocce; usa Preleva da un’immagine.
Come converto HEX in RGB?
Scrivi o incolla il codice HEX nel campo. I valori RGB, HSL e CMYK si aggiornano subito.
L’immagine che carico resta privata?
Sì. L’immagine viene letta nel browser e non viene mai caricata.
Che contrasto serve per il testo?
Almeno 4,5:1 per il testo normale e 3:1 per il testo grande per rispettare lo standard WCAG AA.
I valori CMYK sono esatti per la stampa?
Sono una conversione diretta. Le tipografie adattano a carta e inchiostro con i profili colore, quindi chiedi una prova quando il colore esatto è importante.