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.

Consigli per l'uso

  • 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.

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.
Tool-kun

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.

Leggi le curiosità collegate

Vedi tutte le curiosità

Chi consulta questo strumento guarda anche

Convertitore di Codice Colore RGB ⇄ Hex — Gratuito, Senza Registrazione

Converti all'istante i valori RGB in decimale in codici colore esadecimali e viceversa. Pratico per CSS, strumenti di design e verifica rapida dei codici colore — gratuito, senza registrazione.

Verifica del rapporto di contrasto (criteri WCAG)

Indicate due colori per calcolare il rapporto di contrasto secondo le WCAG (Web Content Accessibility Guidelines) e verificare la conformità ai livelli AA e AAA.

Simulatore di daltonismo (deficit della visione dei colori)

Strumento gratuito che simula in modo approssimato come viene percepito un colore da chi ha una protanopia, una deuteranopia o una tritanopia.

Raccolta di palette di colori — colori web standard e Material Design pronti da copiare

Elenco delle palette di uso più comune nel design — colori web standard, sistema cromatico Material Design, scale di grigi — con il relativo codice HEX. Basta un clic per copiarlo.

Estrai i colori da un'immagine (estrattore di colori dominanti)

Caricate un'immagine per estrarre automaticamente i colori dominanti presenti in una fotografia o in un'illustrazione. Tutta l'elaborazione avviene nel browser e l'immagine non viene inviata a un server.

Da RGBA a RGB (fusione con il colore di sfondo)

Indicate un colore di primo piano semitrasparente (RGBA) e un colore di sfondo per calcolare, tramite fusione alfa, il colore RGB opaco che ne risulta. Utile per creare colori di ripiego negli ambienti che non supportano...