Strumento Selettore Colori - Converti Codici Colore RGB, Hex, CMYK e HSV

Che cos'è un selettore di colori?

Un selettore di colori è uno strumento per scegliere un colore e leggerne il valore in diversi formati. Questo mostra contemporaneamente un colore in RGB (rosso, verde, blu), esadecimale, CMYK (ciano, magenta, giallo, nero) e HSV (tonalità, saturazione, valore). Modificando uno qualsiasi dei formati, gli altri si aggiornano immediatamente.

Come usare il selettore di colori

Esistono tre modi per scegliere un colore.

Fai clic in qualsiasi punto del riquadro dello spettro per scegliere tonalità e saturazione. La posizione orizzontale imposta la tonalità, cioè la famiglia cromatica, come il rosso o il blu. La posizione verticale imposta la saturazione, ovvero quanto il colore appare vivido o sbiadito. Un cursore sotto lo spettro controlla la luminosità, dal nero a sinistra alla luminosità massima a destra.

È possibile anche inserire valori esatti. Il campo esadecimale accetta codici come #2ECC71, con o senza #. I campi RGB accettano ciascuno un numero intero da 0 a 255. I campi CMYK accettano ciascuno un numero intero da 0 a 100. Un valore inserito oltre l'intervallo consentito viene limitato al massimo.

Ogni formato di colore ha un pulsante di copia accanto. Facendo clic, il valore viene copiato negli appunti e viene mostrato per breve tempo il messaggio «Copiato!».

Spiegazione dei modelli di colore

RGB

RGB descrive un colore come una combinazione di luce rossa, verde e blu, gli stessi tre colori che uno schermo usa per creare ogni pixel. Ogni canale varia da 0 a 255. RGB(255, 0, 0) è rosso puro, mentre RGB(0, 0, 0) è nero. Browser, app e software video usano tutti RGB, perché corrisponde al funzionamento degli schermi.

Esadecimale

Un codice esadecimale scrive un colore RGB in base 16 invece che in base 10. #2ECC71 contiene tre coppie di caratteri: 2E per il rosso, CC per il verde e 71 per il blu. Ogni coppia va da 00 a FF. I codici esadecimali sono comuni nel web design, perché CSS li accetta direttamente e sono più brevi da digitare di rgb(). Esiste anche una forma abbreviata di tre caratteri: #0F0 significa la stessa cosa di #00FF00.

CMYK

CMYK viene usato per la stampa. Una stampante crea il colore sovrapponendo inchiostri ciano, magenta, giallo e nero sulla carta bianca, quindi funziona sottraendo luce invece di aggiungerla. Ogni canale è una percentuale da 0 a 100. CMYK(0, 0, 0, 0) indica l'assenza totale di inchiostro e lascia visibile la carta bianca. CMYK non può riprodurre ogni colore mostrabile da uno schermo; alcuni colori brillanti dello schermo, soprattutto determinati blu e verdi, appaiono più spenti una volta stampati.

HSV

HSV descrive separatamente tonalità, saturazione e valore. La tonalità è la famiglia cromatica, indicata in gradi da 0° a 360°, dove 0° è il rosso, 120° è il verde e 240° è il blu. La saturazione indica quanto è vivido il colore, da 0% (grigio) a 100% (completamente colorato). Il valore indica quanto è luminoso, da 0% (nero) a 100% (luminosità massima). HSV è vicino al modo naturale in cui le persone descrivono i colori, perciò lo spettro e il cursore della luminosità di questo strumento si basano su di esso.

Formula di conversione da RGB a esadecimale

Ogni canale RGB, un numero da 0 a 255, viene convertito in un numero esadecimale di due cifre, poi le tre coppie vengono unite con # davanti.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Formula di conversione da RGB a CMYK

Per prima cosa ogni canale RGB viene convertito in una frazione compresa tra 0 e 1. Il nero (K) viene ricavato dal canale con il valore più alto. Ciano, magenta e giallo vengono quindi calcolati a partire dai canali rimanenti e da K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Quando K è uguale a 1, cioè quando il colore è nero puro, C, M e Y vengono tutti impostati su 0 per evitare la divisione per zero.

Formula di conversione da RGB a HSV

RGB viene prima convertito in frazioni comprese tra 0 e 1. Sia $C_{max}$ il maggiore dei tre valori, $C_{min}$ il minore e $\Delta$ la differenza tra loro.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ altrimenti } \frac{\Delta}{C_{max}}\times 100\%$

La tonalità dipende dal canale con il valore più alto:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Esempio svolto Si parte da RGB(46, 204, 113), una tonalità di verde. **Esadecimale:** 46 in esadecimale è `2E`, 204 è `CC` e 113 è `71`, ottenendo `#2ECC71`. **CMYK:** Dopo la conversione in scala, R′ = 0,180, G′ = 0,800, B′ = 0,443. Il valore maggiore è G′, quindi K = 1 − 0,800 = 0,20, cioè 20% di nero. Quindi C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77%, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0% e Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45%. Il risultato è CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (verde), $C_{min}$ = 0,180, quindi Δ = 0,620. Il valore è 80%. La saturazione è 0,620 / 0,800 × 100 ≈ 77%. Poiché il verde è il valore maggiore, H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Il risultato è HSV(145°, 77%, 80%). ## Rendere accessibili le scelte dei colori Circa 1 su (2,5 cm) 12 uomini e circa 1 su (2,5 cm) 200 donne presentano una qualche forma di deficit della visione dei colori, più comunemente una ridotta capacità di distinguere il rosso dal verde. Un design che affida solo al colore la trasmissione del significato, come un messaggio di errore rosso senza icona né etichetta, non funziona per questi utenti. Aggiungere un'etichetta testuale, un'icona o un motivo insieme al colore risolve il problema. Anche il testo deve avere un contrasto sufficiente rispetto allo sfondo. Le Web Content Accessibility Guidelines (WCAG) raccomandano un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Per misurarlo è necessario uno strumento dedicato al controllo del contrasto, poiché questo strumento non calcola autonomamente i rapporti di contrasto. ## Domande frequenti **Qual è la differenza tra RGB e CMYK?** RGB è destinato agli schermi e crea i colori aggiungendo luce rossa, verde e blu. CMYK è destinato alla stampa e crea i colori sovrapponendo inchiostro sulla carta, sottraendo invece la luce. RGB può produrre colori più brillanti di CMYK, perché l'inchiostro non può riprodurre l'intera gamma di colori emessi da uno schermo. **Perché i colori stampati sono diversi da quelli sullo schermo?** Uno schermo emette direttamente la luce; una pagina stampata riflette soltanto la luce che la colpisce. Anche l'inchiostro CMYK copre una gamma di colori più ristretta rispetto alla luce RGB, quindi alcuni colori brillanti dello schermo non possono essere riprodotti esattamente sulla carta. **Che cosa significa il simbolo # in un codice esadecimale?** Indica che i caratteri successivi costituiscono un codice colore esadecimale, secondo una convenzione risalente alle prime versioni di HTML e CSS. Senza di esso, un browser non riconosce il valore come colore. **Perché alcuni codici esadecimali hanno solo tre caratteri?** Un codice di tre caratteri è l'abbreviazione di uno di sei caratteri, in cui ogni coppia ripete la stessa cifra. `#0F0` si espande in `#00FF00`. **Le conversioni tra i formati sono esatte?** La conversione da RGB a esadecimale è esatta, perché si tratta degli stessi numeri scritti in una base diversa. La conversione da RGB a CMYK è approssimativa, perché converte tra luce e inchiostro, che sono processi fisici diversi con gamme cromatiche differenti. **Questo strumento può scegliere direttamente un colore da un'immagine o da una pagina web?** No. Un'estensione del browser o il selettore di colori integrato nel sistema operativo, come Digital Color Meter su macOS, può leggere un colore dallo schermo; il valore risultante può poi essere inserito in questo strumento per convertirlo.