Convertitore di colori

Come usare il convertitore di colori

1. 1. Inserisci un colore. Incollalo o digitalo in una qualsiasi delle notazioni accettate dalla casella — #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) o un nome CSS come rebeccapurple. Una semplice 51 102 153 viene letta come RGB.
2. 2. Oppure usa il selettore. Il selettore imposta il colore e mantiene la trasparenza che hai già digitato.
3. 3. Copia ciò che ti serve. Ogni notazione ha il proprio pulsante di copia, e Copia CSS fornisce i valori HEX, RGB, HSL e OKLCH come proprietà personalizzate per un foglio di stile.
4. 4. Controlla il nome. Lo strumento mostra la parola chiave CSS quando il tuo colore ne corrisponde esattamente una (rebeccapurple è #663399), e la parola chiave più vicina quando non c'è una corrispondenza esatta.

Come funzionano le conversioni

Tutto viene convertito tramite sRGB, lo spazio colore in cui un browser disegna. Un codice HEX è semplicemente RGB in base 16: #336699 è rosso 0x33 = 51, verde 0x66 = 102, blu 0x99 = 153. Le altre notazioni riordinano gli stessi tre numeri.

• HSL descrive un colore con la tinta (un angolo sulla ruota dei colori, da 0 a 360°), la saturazione e la luminosità. Con il canale più grande max e il più piccolo min (divisi entrambi per 255), la luminosità è (max + min) ÷ 2, e la saturazione è (max − min) ÷ (1 − |2L − 1|). La tinta dipende dal canale più grande.
• HSV (detto anche HSB) mantiene la stessa tinta ma misura il valore come max e la saturazione come (max − min) ÷ max. È il modello che disegna la maggior parte dei selettori di colore.
• HWB è bianco (min) e nero (1 − max) applicati a una tinta pura; è più facile da ragionare rispetto a HSL quando vuoi una tinta chiara o una tinta scura. Se bianco più nero raggiunge il 100%, il risultato è un grigio.
• CMYK è mostrato come semplice conversione di dispositivo: K = 1 − max, poi ciascuno di C, M e Y è (1 − canale − K) ÷ (1 − K). Non coinvolge inchiostri, carta né profili.
• OKLCH è luminosità, croma e tinta nello spazio OKLab di Björn Ottosson, che CSS Color 4 supporta come oklch(). Passi uguali in L appaiono molto più vicini a passi uguali di luminosità di quanto accada in RGB o HSL.

Perché il CMYK qui non è un colore di stampa

Gli schermi aggiungono luce in rosso, verde e blu; le stampanti depositano inchiostri ciano, magenta, giallo e nero sulla carta. I due gamut differiscono, e l'inchiostro sulla pagina dipende dalla carta, dalla macchina da stampa e dal profilo ICC che li descrive. Una formula che lavora solo dall'RGB non può saperlo, quindi il CMYK qui sopra è una notazione, non una previsione: il blu puro dello schermo #0000ff diventa 100% ciano e 100% magenta, che stampa come un viola più spento. Per un poster o una figura stampata, fornisci al tipografo l'elaborato in RGB e chiedi il suo profilo, oppure converti con quel profilo in un'applicazione di grafica.

Arrotondamento, limiti e trasparenza

• Arrotondamento. HEX e rgb() contengono numeri interi da 0 a 255, quindi un colore digitato come hsl(210 50% 41%) viene arrotondato al valore a 8 bit più vicino. Riconvertendo quel valore si ottiene un HSL leggermente diverso — la griglia a 8 bit è più grossolana di quella dell'HSL.
• Canali fuori intervallo. I valori fuori dall'intervallo vengono limitati, come fanno i browser: rgb(300 0 0) è #ff0000, e un canale negativo diventa 0.
• Unità della tinta. Sono accettate deg, grad, rad e turn, e la tinta si ripete: −150° equivale a 210°.
• Alfa. #rrggbbaa, #rgba e / 50% funzionano tutti. L'alfa viene memorizzata a 8 bit nell'HEX a 8 cifre, quindi il 50% diventa 80 e si legge di nuovo come 50,2%.

Domande frequenti

Come si converte HEX in RGB?

Dividi le sei cifre in tre coppie e leggi ogni coppia come numero in base 16: #336699 è 33, 66 e 99, cioè 51, 102 e 153. Incolla il codice HEX nella casella e il valore RGB compare subito, insieme a HSL, HWB, HSV, CMYK e OKLCH.

Qual è la differenza tra HSL e HSV?

Entrambi usano lo stesso angolo di tinta. HSL porta il bianco alla luminosità massima qualunque sia la saturazione, quindi il suo centro è il colore puro; HSV porta il colore puro al valore e alla saturazione massimi, e il bianco a saturazione zero. HSL è ciò che CSS supporta come hsl(), mentre HSV (o HSB) è ciò che mostra la maggior parte dei selettori di colore.

Il valore CMYK è accurato per la stampa?

No. È la conversione semplice dall'RGB, senza inchiostri, carta né profilo ICC, quindi descrive gli stessi numeri in un altro modo invece di prevedere ciò che stamperà una macchina. I colori fuori dal gamut della stampante, come i blu e i verdi brillanti dello schermo, verranno stampati più spenti. Usa il profilo della tua tipografia per tutto ciò che conta.

Che cosa significa il nome CSS più vicino?

CSS definisce 148 parole chiave per i colori. Se il tuo colore ne corrisponde esattamente una, lo strumento la mostra senza riserve. Altrimenti mostra la parola chiave più vicina in OKLab, uno spazio costruito perché la distanza corrisponda alla differenza percepita — utile per dare un nome a un colore in un commento, non come sostituto del codice.

Perché il mio valore HSL cambia leggermente dopo una conversione di andata e ritorno?

HEX e RGB memorizzano ogni canale come uno dei 256 valori, e HSL non corrisponde uno a uno a quella griglia. Un colore digitato in HSL viene arrotondato al valore RGB più vicino, e l'HSL mostrato è calcolato dal valore arrotondato. Partendo da un codice HEX, ogni conversione è esatta fino alla precisione mostrata.

I miei dati sul colore vengono inviati da qualche parte?

No. La conversione è semplice aritmetica nel tuo browser; ciò che digiti non viene caricato né conservato.