Convertitore di colori

Capire i formati di colore

Un convertitore che gestisce HEX, RGB, HSL, HSV e CMYK sta toccando cinque modi piuttosto diversi di descrivere lo stesso fenomeno percettivo. Sono stati inventati da persone diverse, in decenni diversi, per macchine diverse, e con priorità diverse. Far scorrere un valore da una notazione all'altra sembra aritmetica banale, e in superficie di solito lo è, ma le storie spiegano perché ogni notazione esista, e la matematica spiega perché il round-trip tra di esse non è sempre lossless.

HEX, abbreviazione in base 16 per le triplette sRGB

La notazione esadecimale dei colori precede CSS di alcuni anni su workstation e in formati di file grafici, ma il suo significato universale sul web è stato fissato dalla Raccomandazione CSS1 che il W3C ha pubblicato il 17 dicembre 1996. CSS1 è stato il lavoro di Håkon Wium Lie e Bert Bos: Lie aveva proposto i Cascading Style Sheets mentre era al CERN nell'ottobre 1994, e Bos si è unito al progetto all'INRIA nel luglio 1995. Prima di CSS, HTML 1.0 non aveva alcuna nozione di colore, il suo insieme iniziale di 18 tag era strettamente strutturale. Un colore hex è un intero a tre byte (o quattro byte, con alpha) che il browser divide nei canali red, green e blue. La forma a 6 cifre #RRGGBB dà a ogni canale un valore a 8 bit, 0-255, codificato in due cifre hex. L'abbreviazione a 3 cifre #RGB è esattamente equivalente alla forma a 6 cifre con ogni cifra duplicata, quindi #F0A e #FF00AA sono lo stesso colore. Il CSS Color Module Level 4 ha formalmente aggiunto forme a 4 cifre (#RGBA) e a 8 cifre (#RRGGBBAA) con un canale alpha, dove 00 è completamente trasparente e FF è completamente opaco. Il supporto del browser è arrivato in Chrome 62, Firefox 49, Safari 10 e Edge 79, quindi al 2026 è essenzialmente universale. Hex è popolare perché è corto, copiabile-incollabile, e non ambiguo, background: #1e90ff sopravvive al copia/incolla tra Figma, VS Code, Slack ed email senza che nessuno debba pensare a spazi bianchi o virgole.

RGB, il principio dei tre colori di Maxwell, reso digitale

L'idea "RGB", che qualsiasi colore l'occhio veda può essere abbinato mescolando quantità controllate di tre luci primarie, precede la fotografia a colori. James Clerk Maxwell l'ha proposta per la prima volta nel suo articolo del 1855 "Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness," presentato alla Royal Society of Edinburgh. Sei anni dopo, il 17 maggio 1861, Maxwell ha dimostrato il principio in pubblico: ha fatto fare al fotografo Thomas Sutton tre lastre in bianco e nero di un nastro tartan, ognuna scattata attraverso un filtro rosso, verde o blu, e poi ha proiettato le tre lastre di nuovo attraverso gli stessi filtri su uno schermo. Le proiezioni sovrapposte hanno prodotto un'immagine riconoscibilmente colorata, la prima fotografia a colori del mondo per sintesi additiva. L'RGB additivo di Maxwell è diventato la fondazione di ogni display elettronico da allora. L'RGB web moderno significa specificamente sRGB, lo spazio di colore "standard RGB" proposto da Hewlett-Packard e Microsoft nel 1996 (autori Michael Stokes e Ricardo Motta di HP, Matthew Anderson e Srinivasan Chandrasekar di Microsoft) e standardizzato come IEC 61966-2-1:1999. La motivazione era prosaica: il web iniziale aveva bisogno di uno spazio di colore abbastanza semplice da assumere di default, abbastanza robusto da apparire accettabile su CRT economici, e abbastanza piccolo da non gonfiare i file immagine. Venticinque anni dopo è ancora lo spazio di lavoro predefinito di ogni browser, ogni JPEG e ogni PNG che non porta un profilo ICC incorporato. In CSS, RGB si scrive rgb(255, 0, 153) (sintassi legacy con virgole) o rgb(255 0 153) (moderna separata da spazi, secondo CSS Color Level 4).

HSL e HSV, gli assi percettivi di Alvy Ray Smith

RGB è eccellente per l'hardware (un display ha letteralmente sub-pixel red, green e blue) e inutile per l'intuizione umana. Nessuno regola un design web ragionando di volere "dodici unità in più di green e sette in meno di red". I designer pensano in termini di hue (quale colore), saturazione (quanto vivido), e luminosità (quanto chiaro). La conversione è stata formalizzata da Alvy Ray Smith nel suo articolo SIGGRAPH 1978 "Color Gamut Transform Pairs," pubblicato nel numero di agosto 1978 di Computer Graphics, pagine 12-19. Smith era al New York Institute of Technology Computer Graphics Lab, avendo precedentemente lavorato allo Xerox PARC. L'articolo notava che la trasformazione RGB-to-HSV era già stata "usata con successo per circa quattro anni" nei programmi di pittura su frame-buffer al momento della pubblicazione, Smith stava documentando la pratica funzionante, non inventando da zero. Gli è stato conferito il SIGGRAPH Computer Graphics Achievement Award nel 1990 per, tra le altre cose, "il modello di spazio colore HSV (aka HSB)". HSL e HSV condividono un asse hue (un angolo, 0°-360°, attorno a una ruota di colori: 0° red, 120° green, 240° blue) e un asse saturazione (0% grigio fino a 100% puro), ma differiscono nel loro terzo asse. HSV (Hue, Saturation, Value) tratta V come il massimo dei canali RGB, il bianco puro richiede V=100% E S=0%, il rosso puro è V=100%, S=100%; sia il bianco che il rosso vivono in cima al cilindro. HSL (Hue, Saturation, Lightness) tratta L come il punto medio dei canali più chiaro e più scuro, il bianco puro è L=100% indipendentemente da S, il rosso puro è L=50%, S=100%; il bianco vive in cima al cilindro, i colori più vividi vivono all'equatore. HSL è stato scelto specificamente per CSS perché la sua simmetria attorno a L=50% corrisponde a come i designer pensano alle tinte e alle ombre.

CMYK, il modello sottrattivo dello stampatore

Mentre i monitor emettono luce (additivo: di più è più luminoso, tutti e tre al massimo = bianco), l'inchiostro assorbe la luce (sottrattivo: di più è più scuro, tutti e tre al massimo = nero, in teoria). La stampa a quattro colori, cyan, magenta, yellow, più una lastra "key" black, è stata usata commercialmente per la prima volta negli anni 1890 per illustrazioni di giornali a colori. L'Eagle Printing Ink Company è generalmente accreditata con il primo vero processo a quattro colori con inchiostro umido nel 1906. La "K" viene da "key" (la lastra che registra tutte le altre, tradizionalmente la lastra di dettaglio nera), non da "black", motivo per cui il modello è CMYK e non CMYB. La lastra key esiste per quattro motivi pratici: combinare 100% C, M e Y in inchiostro reale produce un marrone scuro fangoso, non un vero nero, perché i pigmenti reali non sono perfettamente puri; i neri a tre colori sprecano inchiostro e rallentano l'asciugatura; i neri a tre colori umidi fanno piegare e strappare la carta; e il testo e i contorni fini hanno bisogno di una singola lastra ad alto contrasto per la nitidezza.

La matematica di conversione, in breve

HEX ↔ RGB è banale, dividi la stringa hex in tre sottostringhe di due caratteri e parsa ognuna come intero base-16 con parseInt(hex, 16); inverti con n.toString(16).padStart(2, '0'). RGB → HSL è matematica max/min: chroma = max(R,G,B) − min(R,G,B); lightness = (max + min) / 2; saturazione = chroma / (1 − |2L − 1|); hue è calcolato tramite una formula a tratti che sceglie il canale dominante e traduce la sua posizione in un angolo in uno di sei settori di 60° del cerchio hue. (Alcune implementazioni usano atan2, ma l'articolo di Smith del 1978 ha deliberatamente evitato la trigonometria per motivi di prestazioni, atan2 era un'istruzione costosa su un frame buffer degli anni 1970, e la formula a tratti è rimasta perché dà la stessa risposta più velocemente.) HSL → RGB inverte il processo tramite una mappatura lineare a tratti con chroma e un offset che traduce la tripletta chroma sul punto giusto dell'asse lightness. RGB ↔ HSV usa lo stesso scheletro ma con un asse verticale diverso: V = M invece di L = (M+m)/2, e S = Δ/M invece del divisore lightness-aware. RGB ↔ CMYK usa la formula semplice K = 1 − max(R,G,B), poi C, M, Y come (1 − canale − K) / (1 − K). Questo è matematicamente auto-consistente ma non descrive come qualsiasi stampa reale riprodurrà il colore, vedi l'avviso sulla stampa qui sotto.

Il problema del round-trip

Converti #7A3D5C (HEX) → HSL → HEX. Non otterrai necessariamente #7A3D5C. Le ragioni sono interamente pedonali. Troncamento di interi: i canali HEX sono interi 0-255; le conversioni HSL producono float; arrotondare (1, 121.987, 47.512) in interi perde informazioni sub-pixel che il round-trip non può recuperare. Imprecisione Float64: l'unico tipo numerico di JavaScript è il float binario a doppia precisione IEEE 754, con una mantissa a 52 bit che dà circa 15-17 cifre decimali significative, sufficienti per una singola conversione ma si accumula se concateni molte operazioni. Mappe asimmetriche: più triplette (R,G,B) distinte possono mappare alla stessa tripletta (H,S,L) quando il chroma è zero (qualsiasi grigio ha hue indefinito; le convenzioni scelgono H = 0 o preservano il precedente H). Per uno strumento browser pragmatico, va bene, l'utente ha digitato #7A3D5C, vede (322°, 32%, 36%) in HSL, e riceve #7A3D5C (o #7A3E5D, sbagliato di uno) indietro. Finché lo swatch visualizzato corrisponde a ciò che l'occhio si aspetta, il viaggio è buono. Ma vale la pena essere onesti: il round-trip lossless non è garantito.

Spazi colore CSS moderni oltre sRGB

Per decenni, "colore web" significava sRGB e solo sRGB. Quell'assunzione si è rotta nel 2015, quando Apple ha distribuito l'iMac di fine 2015 come "il primo computer consumer con un display wide-gamut integrato" che supportava lo spazio colore Display P3 di Apple. P3 è nato come DCI-P3, definito nel 2005 dal Digital Cinema Initiative per la proiezione cinematografica. La variante Display P3 di Apple ha mantenuto le primarie del DCI ma ha cambiato il punto bianco a D65 (corrispondente a quello di sRGB) e ha adottato la curva di riproduzione tonale di sRGB per renderlo adatto alla visualizzazione desktop/mobile piuttosto che a sale buie. Il gamut di Display P3 è circa il 25% più ampio per superficie rispetto a sRGB e permette a telefoni e laptop di mostrare rossi e verdi misurabilmente più vividi. Per permettere a CSS di descrivere colori al di fuori di sRGB, il CSS Color Module Level 4 del W3C ha introdotto la funzione color() con un parametro esplicito di spazio colore: color(srgb 1 0.5 0.2), color(display-p3 1 0.5 0.2), color(rec2020 1 0.5 0.2). Gli spazi colore predefiniti includono srgb, srgb-linear, display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, xyz, xyz-d50 e xyz-d65. Su un normale display sRGB, un colore P3 fuori-gamut viene mappato al gamut all'equivalente sRGB più vicino che il display può mostrare.

CSS Color Level 4 ha anche aggiunto le funzioni first-class lab(), lch(), oklab(), e oklch(). lab() e lch() usano lo spazio colore CIE 1976 L*a*b*, standardizzato dalla Commission Internationale de l'Éclairage nel 1976, il primo spazio colore percettivamente uniforme ampiamente distribuito, con gli assi a* e b* corrispondenti alle coppie di opposti rosso-verde e blu-giallo che corrispondono a come il sistema visivo umano codifica effettivamente il colore. Nel dicembre 2020, lo sviluppatore svedese Björn Ottosson ha pubblicato "A perceptual color space for image processing" sul suo blog e ha introdotto Oklab. Ottosson aveva passato anni nell'industria dei giochi facendo semplici manipolazioni di colore e ha concluso che ogni spazio colore esistente falliva in esse in qualche modo. Oklab è messo a punto specificamente per operazioni di image-processing: i gradienti tra due colori Oklab rimangono percettivamente lisci, e le regolazioni di lightness in Oklab si sentono come regolazioni di lightness all'occhio umano. La forma cilindrica, OKLCH, è ciò che la maggior parte dei designer scrive effettivamente. Oklab è stato aggiunto a CSS Color Level 4 un anno dopo il post del blog, nel dicembre 2021, ed è ora lo spazio di interpolazione predefinito per i gradienti CSS nei browser che implementano Color Level 4. La palette colori Tailwind CSS v4 è generata dalle coordinate OKLCH. La funzione color-mix() (CSS Color Module Level 5) è arrivata in Safari 16.2 (dicembre 2022), Chrome 111 (marzo 2023) e Firefox 113 (maggio 2023), rendendola disponibile come baseline su tutti i browser da maggio 2023.

Mini-storia della teoria dei colori

I convertitori di colore web si trovano alla fine di un arco di 360 anni di tentativi di comprendere il colore sistematicamente. Le pietre miliari notevoli: Newton (1665-66) ha usato un prisma di vetro per dividere la luce solare nello spettro visibile e ha identificato sette colori nel suo Opticks. Goethe (1810) ha pubblicato Teoria dei colori, un trattato anti-newtoniano più interessato alle dimensioni percettive ed emotive del colore che alla sua fisica, sbagliato sulla scienza ma giusto che la percezione conta. Maxwell (1855/1861) come trattato sopra. Itten (1961) ha pubblicato L'arte del colore al Bauhaus, codificando la ruota dei colori a 12 hue e i sette tipi di contrasto cromatico ancora insegnati nelle scuole di design oggi. Pantone (1963) ha introdotto il Pantone Matching System (PMS), trasformando la comunicazione del colore tra designer e stampatori in un catalogo numerato, un numero Pantone significava esattamente lo stesso colore presso qualsiasi stampatore al mondo che si abbonava al sistema. Lo stack di colori web eredita da tutte queste tradizioni: Newton ci dà lo spettro visibile, Maxwell le primarie additive, Itten il vocabolario delle scuole di design degli schemi complementari e analoghi, Pantone il fatto pratico che un numero può rappresentare un'esperienza percettiva.

Accessibilità: contrasto WCAG su qualunque colore tu scelga

Una volta che hai un colore, devi sapere se puoi metterci sopra del testo. WCAG 2.1 Success Criterion 1.4.3 (Contrast, Minimum) richiede un rapporto di contrasto 4.5:1 per il testo normale e 3:1 per il testo grande (definito come 18pt / 24 pixel CSS normale, o 14pt / 19 pixel CSS bold). Il rapporto di contrasto è calcolato dalla luminanza relativa: (L1 + 0.05) / (L2 + 0.05), dove L1 è la luminanza del colore più chiaro e L2 quella più scura, e la luminanza è una somma pesata dei canali R, G, B gamma-decodificati con pesi 0.2126, 0.7152 e 0.0722 (corrispondenti alla sensibilità dell'occhio umano a quelle lunghezze d'onda). WCAG 2.1 SC 1.4.6 (Enhanced) alza l'asticella a 7:1 normale / 4.5:1 grande per la conformità AAA. WCAG 2.1 SC 1.4.11 copre il contrasto non-testo (componenti UI, indicatori di focus, oggetti grafici necessari per la comprensione) a 3:1. Il più nuovo APCA (Advanced Perceptual Contrast Algorithm) è un sostituto in fase di ricerca che corrisponde meglio al contrasto percepito per il testo del corpo ed è in fase di valutazione per WCAG 3, restituisce un valore Lc direzionale dove ±60 è l'equivalente approssimativo del 4.5:1 di WCAG. Controlla sempre le coppie di colori contro la formula di contrasto effettiva, non il tuo occhio; i designer sopravvalutano costantemente quanto siano leggibili gli accoppiamenti a basso contrasto.

L'avviso onesto sulla stampa: il CMYK ingenuo non è un vero CMYK

La semplice formula K = 1 − max(R,G,B) che ogni convertitore browser usa è matematicamente auto-consistente, il round-trip RGB → CMYK → RGB restituisce lo stesso RGB esattamente, modulo floating-point. Ma non descrive come qualsiasi stampa reale riprodurrà quel colore sulla carta. Una vera conversione RGB-a-CMYK necessita di tre cose che questo strumento non può spedire: un profilo ICC target (che definisce la combinazione stampante + carta, la carta patinata assorbe l'inchiostro diversamente da quella non patinata, e le presse commerciali di fascia alta eseguono profili diversi dalle stampanti inkjet da scrivania), un intento di rendering (percettivo, colorimetrico relativo, saturazione, colorimetrico assoluto, fanno trade-off su come i colori fuori-gamut vengono compressi all'interno), e un vero modello colorimetrico (CIE Lab come strato intermedio device-independent, con tabelle di lookup di profilo ICC completo su ogni lato). Questo è ciò che Adobe Photoshop fa dietro il suo menu di conversione CMYK e ciò che il software di prepress professionale (Esko, Heidelberg Prinect, Caldera) fa per il lavoro di produzione. La formula ingenua va bene per capire la relazione tra modelli di colore additivi e sottrattivi, e utile per esplorazione di colore di primo passaggio, ma se stai inviando file a uno stampatore commerciale, fai la conversione in Photoshop (o nello strumento preferito del tuo stampatore) con il profilo ICC corretto caricato, la differenza visibile può essere sostanziale.

Colori nominati e la storia di rebeccapurple

CSS3 distribuisce 147 colori nominati (148 se conti l'alias aqua = cyan), ereditati da una miscela degli originali 16 colori nominati HTML 4 e dell'elenco più lungo del X11 Window System. Il colore nominato più recente aggiunto ha una storia. Il 7 giugno 2014, la figlia del sostenitore degli standard web Eric Meyer, Rebecca, è morta di una forma aggressiva di cancro al cervello il giorno dopo il suo sesto compleanno. Il colore preferito di Rebecca era il viola. In pochi giorni, membri del CSS Working Group, guidati dall'editor Tab Atkins Jr., hanno proposto di aggiungere rebeccapurple (#663399) alla specifica CSS Color Level 4 come colore nominato, in sua memoria. Il colore è stato aggiunto nel giugno 2014 ed è arrivato nei browser poco dopo. Il valore hex è stato specificamente scelto come il valore che Eric Meyer stesso aveva usato sul suo sito web. rebeccapurple è ora nella tabella dei colori nominati di ogni browser, l'unico colore commemorativo nella specifica CSS, e un promemoria che le specifiche tecniche aride del web sono scritte da persone che notano quando uno di loro sta soffrendo.

Domande frequenti

Quale formato usare in CSS?

Tutti e tre funzionano in CSS moderno. HEX è il più compatto e diffuso. RGB è utile quando devi calcolare valori in codice. HSL è il migliore per creare variazioni di colore · regola semplicemente la luminosità o la saturazione mantenendo la tonalità.

Qual è la differenza tra #FFF e #FFFFFF?

L'hex a tre cifre è una scorciatoia dove ogni cifra è raddoppiata: #FFF = #FFFFFF, #09C = #0099CC. Entrambi sono validi in CSS, ma a sei cifre è più esplicito e copre tutti i 16 milioni di colori.

Posso convertire colori con trasparenza (alpha)?

Questo strumento converte colori opachi. Per l'alpha, il CSS supporta rgba(r,g,b,a) e hsla(h,s%,l%,a), così come l'hex a 8 cifre (#RRGGBBAA). Potremo aggiungere il supporto dell'alpha in un futuro aggiornamento.

La mia conversione CMYK corrisponderà a quello che esce dalla stampante?

Probabilmente non esattamente. La matematica semplice che questo strumento usa è colorimetricamente auto-consistente (RGB → CMYK → RGB restituisce lo stesso RGB) ma non tiene conto del profilo ICC della tua specifica combinazione stampante + carta, dell'intento di rendering (percettivo, colorimetrico relativo, ecc.), o della caratteristica di dot-gain della pressa. Per lavori destinati alla stampa, fai la conversione CMYK finale in Photoshop o nello strumento preferito del tuo stampatore con il profilo ICC corretto caricato, la differenza visibile tra una conversione ingenua e una profile-aware può essere sostanziale, specialmente per rossi e blu saturi al bordo del gamut CMYK.

E OKLCH e gli spazi colore CSS moderni?

Il CSS moderno supporta oklab(), oklch(), lab(), lch() e color(display-p3 ...) per il lavoro di colore wider-gamut e percettivamente uniforme. Il supporto del browser per quelli è baseline dal 2023 circa (Safari 16.4, Chrome 111, Firefox 113 per oklch(); color() con spazi nominati è arrivato leggermente prima in Safari). Non sono ancora mostrati in questo convertitore, in parte perché la matematica è più difficile da visualizzare in forma compatta (Lab ha assi con segno che non mappano a uno slider 0-100%) e in parte perché la maggior parte dei flussi di produzione attuali punta ancora a sRGB. Se stai lavorando in un sistema di design moderno che usa OKLCH (Tailwind CSS v4, per esempio), usa il tooling di quel sistema per la generazione di colori; questo convertitore è la risposta giusta per il lavoro legacy sRGB.

I miei dati vengono inviati da qualche parte?

No. La conversione di colore è pura aritmetica, non c'è nulla che il server possa fare che il tuo browser non possa. Ogni conversione gira localmente in JavaScript. Puoi verificare nel tab Network di DevTools mentre cambi il colore: non ci sono richieste in uscita. Porta la pagina offline (modalità aereo) dopo che si carica e il convertitore funzionerà ancora.

Strumenti correlati