Convertitore fra modelli di colore (RGB, HSL, HSV, CMYK)

Indicate un colore con il codice esadecimale o con il selettore e ottenete contemporaneamente i valori nei quattro sistemi RGB, HSL, HSV (HSB) e CMYK.

Le differenze fra i modelli di colore

Modello	Descrizione	Usi principali
RGB	Modello a sintesi additiva che compone il colore mescolando i tre primari della luce (rosso, verde e blu) con valori da 0 a 255.	Formato di base per display, sviluppo web (CSS) e programmi di fotoritocco.
HSL	Modello che descrive il colore con tonalità (Hue), saturazione (Saturation) e luminosità (Lightness). È vicino all'intuizione umana e rende più semplice regolare una tinta.	La funzione `hsl()` di CSS e la regolazione di tonalità e saturazione negli strumenti per le palette.
HSV/HSB	Modello che descrive il colore con tonalità, saturazione e valore (Value/Brightness). È simile a HSL, ma la definizione del terzo asse è diversa.	I selettori di colore di strumenti di design come Photoshop e Illustrator.
CMYK	Modello a sintesi sottrattiva che compone il colore sovrapponendo i quattro inchiostri ciano, magenta, giallo e nero.	Progettazione di stampati e DTP, cioè la resa cromatica sulla carta.

Che cosa significa convertire fra modelli di colore

Convertire fra modelli di colore significa esprimere uno stesso colore come numeri in sistemi differenti: RGB, HSL, HSV (detto anche HSB) e CMYK. L’RGB segue il modo in cui uno schermo emette luce; HSL e HSV descrivono il colore lungo assi più vicini alla percezione umana – tonalità, saturazione e luminosità o valore; il CMYK segue la sovrapposizione degli inchiostri da stampa. Il colore è il medesimo, ma l’asse da cui lo si guarda è del tutto diverso.

Dia a questo strumento un unico colore, come codice esadecimale oppure tramite il selettore, e lo convertirà in una sola volta in tutti e quattro i sistemi. Ciò si addice alle situazioni che una singola conversione non copre: cambiare la notazione usata nel CSS, conciliare il modo in cui strumenti di progettazione diversi indicano il colore, o verificare i valori CMYK per la stampa – cioè i casi in cui si vogliono confrontare più modelli affiancati.

Come si usa il convertitore

Inserisca un codice esadecimale È accettato con o senza il cancelletto iniziale, così come la forma abbreviata a tre cifre tipo #f60.
Oppure scelga un colore con il selettore Ciò che sceglie viene riportato automaticamente nel campo del codice esadecimale.
Verifichi il colore nell’anteprima Il campione le consente di confermare a vista che il valore inserito è stato interpretato come intendeva.
Consulti i risultati in RGB, HSL, HSV e CMYK I valori di tutti e quattro i sistemi compaiono contemporaneamente.
Usi i valori che le servono Li riporti nella funzione hsl() del CSS, verifichi i valori CMYK per la stampa o quanto altro richieda il lavoro.

Consigli per sfruttarlo al meglio

Nel campo HEX potete scrivere il codice con o senza `#` e anche nella forma abbreviata a tre cifre (per esempio `#f60`).
Il colore scelto con il selettore si riporta automaticamente nel codice HEX, così potete scegliere la tinta a occhio e leggerne subito i valori.
Se in CSS volete indicare uno sfondo o un colore di testo con la funzione `hsl()`, potete usare così com'è il valore HSL calcolato qui, nella forma `hsl(H, S%, L%)`.
Quando preparate file per la stampa, tenete presente che i valori CMYK mostrati sono una conversione semplificata e possono differire leggermente da quelli ottenuti dalla tipografia con i profili ICC.

Quando il convertitore è utile

Cambiare la scrittura di un colore nel CSS

Converta un codice esadecimale indicato in un bozzetto nei valori HSL che le servono quando vuole ritoccare tonalità o saturazione tramite la funzione hsl() del CSS.

Verificare valori CMYK indicativi per la stampa

Prima di riutilizzare su uno stampato una palette scelta per il web, guardare l’equivalente in CMYK rende più facile accorgersi dello scarto fra schermo e carta. Dove conti la fedeltà, confermi la conversione a parte con il profilo ICC della tipografia.

Trasferire un colore fra strumenti di progettazione

Photoshop, Illustrator e programmi simili mostrano spesso il selettore in HSV (HSB): quando i numeri sembrano non concordare con un codice colore per il web, questo strumento mostra la corrispondenza.

Rifinire una palette

Scomporre un colore in tonalità, saturazione e luminosità rende molto più chiara la direzione della regolazione – per esempio mantenere la tonalità e cambiare soltanto la chiarezza. Per costruire palette articolate conviene affiancare un generatore dedicato.

Termini dei modelli di colore

RGB: Modello additivo che esprime il colore miscelando luce rossa, verde e blu. Ogni componente è indicata da un numero da 0 a 255 ed è il modo fondamentale di specificare il colore su schermo e nel CSS.
HSL: Modello che esprime il colore tramite tonalità, saturazione e luminosità. Rispetto ai numeri nudi dell’RGB, rende assai più intuitivo regolare chiarezza e vivacità.
HSV (HSB): Modello che esprime il colore tramite tonalità, saturazione e valore o luminosità. Somiglia all’HSL ma definisce diversamente il terzo asse, ed è largamente adottato nei selettori di programmi come Photoshop.
CMYK: Modello sottrattivo che esprime il colore sovrapponendo quattro inchiostri: ciano, magenta, giallo e la lastra chiave, cioè il nero. È il modello con cui lavora la progettazione per la stampa.
Tonalità: Il tipo di colore – rosso, verde, blu e così via – indicato come angolo da 0 a 360 gradi. È l’asse condiviso da HSL e HSV e percorre un cerchio dal rosso al giallo, al verde, al blu e al viola, tornando al rosso.
Saturazione: Grado di vivacità di un colore. Vicino allo 0 per cento si avvicina al grigio; vicino al 100 per cento diventa un colore puro e brillante.
Luminosità e valore: La luminosità dell’HSL descrive quanto nero o bianco vi sia mescolato, mentre il valore dell’HSV descrive quanto nero sia mescolato al colore. È l’esempio classico di uno stesso colore che assume numeri diversi a seconda del modello.
Lastra chiave (K): La componente di inchiostro nero nel CMYK. Con ciano, magenta e giallo soltanto è arduo ottenere un nero profondo, perciò in stampa si stende inchiostro nero a parte perché testi e aree scure risultino nitidi.

Domande frequenti

RGB compone il colore mescolando i tre primari della luce — rosso, verde e blu — ciascuno con un valore da 0 a 255, ed è il formato di base con cui i computer trattano il colore. HSL riesprime lo stesso colore su tre assi più vicini alla percezione umana, tonalità, saturazione e luminosità, il che rende molto più intuitivo dire «un po' più chiaro» o «un po' più acceso».

HSV e HSL condividono tonalità (H) e saturazione (S), ma definiscono in modo diverso il terzo asse. La luminosità (Lightness) di HSL esprime quanto nero e quanto bianco sono mescolati, mentre il valore (Value) di HSV esprime solo quanto nero è presente. Per scegliere tinte accese vicine al colore puro HSV risulta più intuitivo, ed è per questo adottato da molti strumenti di design come Photoshop.

In teoria sovrapponendo in parti uguali ciano, magenta e giallo si dovrebbe ottenere il nero, ma gli inchiostri reali non sono colori puri e la mescolanza dà piuttosto un bruno slavato. Per questo l'industria della stampa aggiunge un inchiostro nero dedicato, la lastra chiave (K), che permette di stampare testi e neri ben definiti.

Un display crea il colore mescolando luce rossa, verde e blu, cioè per sintesi additiva, e si presta quindi al modello RGB basato sui primari della luce. La stampa sovrappone invece inchiostri sulla carta e crea il colore assorbendo luce, per sintesi sottrattiva: da qui il CMYK, i tre primari degli inchiostri più il nero. Poiché i principi sono diversi, nasce quella differenza di gamma cromatica per cui il colore visto a schermo non coincide mai del tutto con quello stampato.

A proposito — storia e uso dei modelli di colore

L'idea della sintesi additiva RGB risale alla teoria dei colori dell'Ottocento, ma si diffuse nella grafica computerizzata dagli anni Settanta. I televisori a colori e i display dell'epoca funzionavano eccitando i fosfori del tubo catodico nei tre colori rosso, verde e blu: RGB fu adottato come modello numerico che corrispondeva direttamente a quella struttura fisica.

HSL e HSV furono concepiti fra gli anni Settanta e Ottanta da ricercatori di computer grafica per risolvere un problema preciso: regolare direttamente i valori RGB non è intuitivo. HSV in particolare fu formalizzato in un articolo pubblicato nel 1978 da Alvy Ray Smith, che sarebbe poi stato fra i fondatori di Pixar.

Il CMYK si è sviluppato insieme alla tecnologia della stampa e deriva dalla quadricromia. La lastra del nero fu aggiunta proprio per risolvere la difficoltà tipografica di ottenere un nero profondo con i soli tre inchiostri C, M e Y, e ancora oggi il CMYK resta lo standard della stampa offset, delle stampanti a getto d'inchiostro e di molte altre tecnologie.

Vedi tutte le curiosità