Miscelatore di colori

Come funziona il mixaggio dei colori

Questo strumento utilizza il mixaggio additivo di colori nello spazio RGB. Le componenti RGB di ciascun colore sono mediate in base ai loro pesi. Simula il mescolarsi della luce (come fasci che si sovrappongono), al contrario del mixaggio sottrattivo (come mescolare la pittura).

Posso mescolare più di due colori?

Sì! Clicca su «+ Aggiungi un colore» per aggiungere fino a 8 colori. Usa i cursori dei pesi per controllare quanto ciascun colore contribuisce al mix.

Come funziona

1. Scegli i colori: usa i selettori per scegliere ogni colore. Clicca su «+ Aggiungi un colore» per aggiungere altri spazi (fino a 8).
2. Imposta il peso di ogni colore: trascina il cursore sotto ciascun colore per controllare quanto contribuisce al mix finale.
3. Visualizza il risultato: il colore mescolato viene mostrato in tempo reale con i suoi valori hex, RGB e HSL.
4. Copia il colore mescolato: clicca per copiare il valore hex o RGB ottenuto, da usare nel tuo design o codice.

Perché usare il mixer di colori?

Mescolare colori è un'operazione fondamentale nel design, creare tinte (mescolando con bianco), sfumature (con nero), toni (con grigio) o colori intermedi armoniosi tra due colori di marca. I designer lo usano per generare varianti di palette, trovare toni intermedi per i punti di un gradient, garantire rapporti di contrasto accessibili tra colori adiacenti e creare stati di hover/focus visivamente legati ai colori di base.

Le tre cose che le persone intendono per "mescolare i colori"

Quando un non specialista dice "mescolare due colori", quasi sempre intende una di tre operazioni completamente diverse. Scegliere il modello sbagliato è la singola maggiore fonte di confusione negli strumenti colore.

Il missaggio additivo è ciò che accade quando i fasci di luce colorata si sovrappongono. Due torce, una rossa e una verde, puntate sullo stesso pezzo di parete bianca, producono una macchia gialla. Una terza torcia blu aggiunta sopra produce il bianco. Il modello di missaggio è "più luce = più luminoso," e i tre primari sono rosso, verde e blu perché i coni umani hanno picchi di sensibilità approssimativamente in quelle bande. Ogni schermo, telefono, monitor, televisore, proiettore, usa il missaggio additivo. Ogni pixel contiene tre subpixel (R, G, B), e portare tutti e tre al massimo produce il bianco. Per questo il modello colore predefinito del web è RGB: il medium è emissivo, e la matematica corrisponde al medium.

Il missaggio sottrattivo è ciò che accade quando i pigmenti assorbono lunghezze d'onda dalla luce bianca. Un inchiostro ciano assorbe la luce rossa e riflette il verde e il blu. Un inchiostro giallo assorbe il blu e riflette il rosso e il verde. Sovrapponi il ciano al giallo e le uniche lunghezze d'onda che sopravvivono a entrambi i filtri sono quelle verdi. Il modello è "più pigmento = più scuro," e i tre primari sottrattivi sono ciano, magenta e giallo. CMY in teoria si mescola al nero a piena intensità, ma in pratica i pigmenti sono imperfetti e il risultato è un marrone fangoso, quindi la stampa commerciale ha aggiunto un inchiostro nero separato (la K in CMYK) per i veri neri. Un mescolatore di colori in esecuzione su uno schermo non può eseguire veramente un missaggio sottrattivo perché lo schermo stesso è additivo; può solo simulare l'aspetto.

La teoria del colore tradizionale degli artisti ci ha insegnato che i colori primari sono rosso, giallo e blu. La tradizione pittorica, e Teoria dei colori di Goethe del 1810, e il manuale Bauhaus del 1961 di Itten L'Arte del Colore, hanno codificato RYB come fondamento delle tavolozze degli artisti. RYB non è fisicamente accurato. I veri primari sottrattivi che massimizzano il gamut sono CMY, non RYB. Ma RYB ha resistito per secoli perché le vere pitture non sono filtri sottrattivi puri: un tubo di rosso di cadmio e un tubo di blu oltremare si mescolano in un viola riconoscibile, e il sistema "funziona" abbastanza bene sul cavalletto da insegnare generazioni di studenti. Questo strumento è un mescolatore additivo RGB, che è ciò che il web fa effettivamente, quindi "rosso più verde" dà giallo, non il marrone che produrrebbe un mescolatore di pitture.

Spazi colore, sRGB, Display P3, Rec. 2020, Adobe RGB

Un modello colore (RGB, CMYK, HSL) ti dice quali dimensioni hai. Uno spazio colore ti dice esattamente a quali colori fisici corrisponde ogni terna numerica: fissa la cromaticità dei primari, il punto bianco e la funzione di trasferimento. Due display che parlano entrambi "RGB" possono produrre rossi visibilmente diversi per lo stesso codice se mirano a spazi colore diversi.

• sRGB (IEC 61966-2-1:1999) è il default del web e lo è dalla fine degli anni '90. Creato da Hewlett-Packard e Microsoft nel 1996 per standardizzare il colore tra monitor PC, scanner e il web iniziale. Approssimativamente il 35% dell'area di cromaticità CIE 1931 visibile. Tutto ciò che non specifica uno spazio colore sul web è sRGB per convenzione.
• Display P3, l'introduzione di Apple a gamut esteso. Apple ha spedito l'iMac con display Retina 5K alla fine del 2015 con un display a gamut esteso che mirava a Display P3, poi progressivamente lo ha distribuito su iPhone (iPhone 7, settembre 2016), iPad Pro e MacBook Pro. ~25% di gamut più ampio di sRGB, particolarmente nei rossi e verdi saturi. CSS Color Module Level 4 ha aggiunto la sintassi color(display-p3 r g b).
• Rec. 2020 (ITU-R Recommendation BT.2020, pubblicato per la prima volta nel 2012) è lo spazio colore per la televisione ultra-alta-definizione e la base per la maggior parte dei flussi di lavoro HDR. ~75% dello spettro visibile con primari che si trovano sul locus spettrale. Quasi nessun display di consumo può riprodurre l'intero gamut Rec. 2020 oggi; è una specifica forward-compatible.
• Adobe RGB (1998) definito da Adobe Systems per dare a fotografi e designer di stampa un gamut più ampio di sRGB. Approssimativamente il 50% più ampio. Non uno spazio colore web, i browser non lo assumono, ma le fotocamere professionali, Lightroom e Photoshop hanno questo come predefinito per i flussi di lavoro di stampa.

Spazi colore percettivi, e perché mescolare in sRGB dà punti medi fangosi

Le coordinate sRGB e HSL in cui la maggior parte degli strumenti web memorizza e manipola il colore non sono percettivamente uniformi. Un passo unitario nel canale L di HSL non corrisponde a un passo unitario in quanto il colore appare luminoso. Questa è la ragione profonda per cui mescolare due colori facendo la media dei loro canali dà risultati contro-intuitivi.

L'esempio canonico: prendi il rosso puro #ff0000 e il verde puro #00ff00. Fai la media dei canali RGB componente per componente: il rosso va da 255 a 127, il verde va da 0 a 127, il blu rimane a 0. Il risultato è #7f7f00, un oliva che appare opaco, scuro e leggermente torbido. Non è affatto come il giallo brillante #ffff00 che otterresti se illuminassi effettivamente lo stesso pezzo di muro con una torcia rossa e una verde. Due problemi che si compongono spiegano questo.

Primo, sRGB è codificato con gamma. Il numero memorizzato come 127 non rappresenta la metà della luce che 255 rappresenta. La funzione di trasferimento è non lineare: 127 in sRGB corrisponde approssimativamente al 21% dell'intensità di luce lineare, non al 50%. Quindi quando fai la media dei valori codificati con gamma stai facendo la media di qualcosa come la radice quadrata dell'intensità, non dell'intensità stessa, e il risultato risulta molto più scuro di quanto dovrebbe. La correzione per quel problema da solo è convertire sRGB in linear-RGB prima di fare la media, poi riconvertire. Con la media di linear-RGB, rosso più verde diviso per due diventa un giallo-verde molto più brillante e più credibile.

Secondo, anche linear-RGB non corrisponde alla percezione. Passi uguali in linear-RGB non sono comunque passi uguali nella luminosità percepita o nella cromaticità. Il punto medio tra rosso e blu in linear-RGB è una lavanda desaturata, non il viola ricco che un designer si aspetta. La correzione per quel problema più profondo è mescolare in uno spazio percettivamente uniforme, Lab, Oklab, OKLCH. Converti entrambi gli estremi in Oklab, interpola linearmente i canali L, a e b, riconverti in sRGB. Il punto medio tra rosso e verde in Oklab è un giallo vivido e credibile. Il punto medio tra rosso e blu è un magenta saturo. Il punto medio tra giallo e blu è un grigio neutro pulito invece del verde paludoso che ottieni da RGB ingenuo.

Questo strumento attualmente fa la media in sRGB codificato con gamma, il modello più semplice e quello che produce quei punti medi fangosi. È corretto per quel caso semplice ma non corrisponde a ciò che la luce fisica o la percezione umana effettivamente fa. Se stai scegliendo punti di gradiente o toni medi di tavolozza e non vuoi la trappola del grigio fangoso, usa la nuova funzione CSS color-mix() descritta sotto o una delle librerie di matematica del colore.

CIE Lab, Oklab, OKLCH, lo stack percettivo

CIE Lab (scritto anche CIELAB) è stato pubblicato dalla Commission Internationale de l'Éclairage nel 1976. Ha tre assi: L* per la luminosità da 0 (nero) a 100 (bianco), a* per l'asse cromatico verde-rosso, e b* per l'asse cromatico blu-giallo. Progettato in modo che differenze numeriche uguali corrispondano a differenze percettive approssimativamente uguali. Per mezzo secolo è stato lo spazio percettivo standard in grafica, scienza della visione e gestione del colore. Punti deboli noti: i blu diventano innaturalmente violacei quando interpolati; l'asse di luminosità non traccia perfettamente la percezione per colori altamente saturi.

CIE LCH è semplicemente CIE Lab espresso in coordinate polari: L per la luminosità, C per la croma (distanza dall'asse neutro), H per l'angolo di tonalità. Più utile dei valori a*/b* grezzi per i designer perché operazioni come "sposta la tonalità di 30 gradi" o "riduci la croma a 0" si mappano direttamente a modelli mentali naturali.

Oklab, di Björn Ottosson, è stato pubblicato nel dicembre 2020 in un saggio intitolato "A perceptual color space for image processing" su bottosson.github.io. Ottosson è un ingegnere svedese che lavorava sul colore nell'industria dei giochi. Oklab corregge la maggior parte delle carenze note di CIE Lab, in particolare lo spostamento blu-viola nell'interpolazione e la sovrastima delle differenze di croma nei colori saturi. Il W3C ha adottato Oklab in CSS Color Module Level 4 entro circa un anno dal post sul blog di Ottosson, una standardizzazione straordinariamente veloce per un nuovo spazio colore. Oggi ogni browser principale supporta nativamente oklab().

OKLCH è Oklab in coordinate cilindriche: L per la luminosità 0-1, C per la croma da 0 a circa 0,4, H per la tonalità 0-360 gradi. Sta diventando lo spazio colore più raccomandato per le tavolozze dei design system precisamente perché le operazioni sui suoi assi si mappano in modo pulito alle intuizioni dei designer, e perché l'interpolazione tra due colori OKLCH produce i gradienti più fluidi e gradevoli di qualsiasi spazio attualmente disponibile in CSS.

La funzione CSS color-mix(), missaggio percettivo senza JS

CSS Color Module Level 5 ha introdotto color-mix(), che prende due colori, uno spazio colore di interpolazione e pesi opzionali, e restituisce il risultato mescolato calcolato interamente dal browser. La sintassi è color-mix(in oklch, red 50%, blue 50%). Puoi cambiare lo spazio (in srgb, in oklab, in lch, in hsl longer hue, ecc.) e la matematica viene eseguita in quello spazio. Il supporto del browser è arrivato all'inizio del 2023:

• Safari 16.2, dicembre 2022 (il primo browser a spedirlo)
• Chrome 111, marzo 2023
• Edge 111, marzo 2023 (stesso rilascio Chromium)
• Firefox 113, maggio 2023

Un mescolatore di colori senza JavaScript, nativo CSS è stato ampiamente disponibile per oltre due anni ormai. Qualsiasi strumento basato su color-mix() ottiene risultati percettivamente corretti "gratuitamente", il browser gestisce lo stack di conversione. CSS Color Module Level 4 stesso ha raggiunto lo stato di Candidate Recommendation nel 2022 ed è supportato ampiamente sui browser moderni.

Librerie JavaScript per la matematica del colore

Tre librerie dominano quando non puoi o non vuoi affidarti a color-mix():

• culori.js di Dan Burzo, la più flessibile. Supporta quasi ogni spazio colore nominato (sRGB, linear-RGB, P3, Rec. 2020, Lab, LCH, Oklab, OKLCH, HSL, HSV, Cubehelix, OKHSL, OKHSV e altri). Tree-shakable, ESM-first. L'implementazione di riferimento per la generazione di tavolozze basate su OKLCH.
• colorjs.io di Lea Verou e Chris Lilley, in un certo senso la libreria degli autori della specifica, dato che Lilley co-edita le specifiche CSS Color Module. Fedele alla semantica della specifica CSS Color, bundle leggermente più grande di culori. Buona quando vuoi risultati che corrispondano esattamente a ciò che il browser calcolerebbe.
• chroma-js di Gregor Aisch, più vecchia, ergonomica, più piccola. Eccellente per scale colore e interpolazione semplice. Supporto Lab e LCH ma niente Oklab dall'ultimo rilascio principale; i fork della comunità l'hanno aggiunto.

Una breve storia della teoria del colore

La teoria del colore occidentale inizia con Isaac Newton nel 1665. Mentre era in quarantena da Cambridge durante la peste, Newton fece passare la luce solare attraverso un prisma e identificò sette colori distinti (rosso, arancione, giallo, verde, blu, indaco, viola). Li dispose poi su un cerchio chiuso, la ruota colore di Newton, collegando gli estremi spettrali (viola e rosso) attraverso un magenta non spettrale. La ruota fu pubblicata nel suo Opticks nel 1704 ma elaborata nel 1665-1666.

Johann Wolfgang von Goethe pubblicò La teoria dei colori (Zur Farbenlehre) nel 1810. Dove Newton era un fisico, Goethe era un poeta che indagava la psicologia del colore: come i colori si sentivano, contrastavano e si combinavano nella mente dell'osservatore. Il suo lavoro era scientificamente sbagliato su molti punti ma introdusse idee sui colori complementari, gli effetti residui del colore e il carattere affettivo delle tavolozze calde e fredde che sono ancora insegnate oggi.

Johannes Itten, un maestro del Bauhaus, pubblicò L'Arte del Colore (Kunst der Farbe) nel 1961. La ruota colore RYB a dodici raggi di Itten e i suoi sette contrasti di colore (tonalità, chiaro-scuro, freddo-caldo, complementare, simultaneo, saturazione, estensione) divennero il framework didattico dominante per l'istruzione del design nella seconda metà del ventesimo secolo.

Pantone fu creata da Lawrence Herbert, che si unì a Pantone Inc. come dipendente nel 1956 e acquistò la società nel 1962. Nel 1963 lanciò il Pantone Matching System (PMS): una libreria standardizzata di inchiostri spot-color identificati da numero, con cataloghi di campioni stampati che permettevano a un designer a New York e a uno stampatore a Hong Kong di specificare e riprodurre esattamente lo stesso colore senza ambiguità. Pantone non è uno spazio colore nel senso tecnico CIE, è un catalogo proprietario di miscele fisiche di inchiostri, ma la sua influenza sui flussi di lavoro professionali del colore è enorme.

HSL e HSV furono introdotti da Alvy Ray Smith nel suo articolo del 1978 "Color Gamut Transform Pairs," pubblicato negli atti SIGGRAPH mentre era a Xerox PARC (Smith in seguito co-fondò Pixar). Cercava coordinate colore che si mappassero più naturalmente all'intuizione degli artisti rispetto a RGB. HSL divenne il modello colore "amichevole per designer" predefinito sul web e rimane la notazione non-RGB più ampiamente riconosciuta in CSS. È, tuttavia, percettivamente non uniforme, OKLCH è il suo successore moderno.

Contrasto e accessibilità, WCAG 1.4.3

Quando un designer mescola due colori per crearne un terzo, uno stato hover, uno sfondo tinto, un punto di gradiente, il colore risultante deve comunque soddisfare i requisiti di contrasto con qualsiasi testo o icona posti sopra. Il criterio di successo WCAG 2.x 1.4.3, "Contrasto (Minimo)," richiede:

• Un rapporto di contrasto di almeno 4,5:1 per il testo di dimensioni normali.
• Un rapporto di contrasto di almeno 3:1 per il testo grande (18pt regolare o 14pt grassetto e superiore) e per gli oggetti grafici e i componenti dell'UI.

Il rapporto di contrasto si calcola utilizzando la luminanza relativa, la conversione linear-RGB descritta sopra e una somma pesata dei canali linearizzati (L = 0,2126·R + 0,7152·G + 0,0722·B). Il rapporto tra due colori è (L_chiaro + 0,05) / (L_scuro + 0,05). Un'implicazione pratica: i punti intermedi lungo un gradiente possono passare i controlli di contrasto agli estremi ma fallire drasticamente nel mezzo. Se un brand mescola un blu navy scuro con un giallo brillante per produrre un'oliva di stato hover, quell'oliva può trovarsi nella zona di fallimento WCAG sia contro il testo bianco che contro il testo nero.

Altre domande

Perché rosso più verde non mi dà marrone?

Perché questo strumento, come ogni schermo, usa il missaggio additivo RGB, e la luce rossa più la luce verde dà giallo. Il marrone è ciò che ottieni quando mescoli pittura rossa e verde, che è sottrattivo: ogni pigmento assorbe lunghezze d'onda diverse e le lunghezze d'onda sopravvissute appaiono marroni. Per simulare accuratamente "mescolare pittura" su uno schermo avresti bisogno di un modello spettrale o consapevole dei pigmenti (Procreate e Adobe Fresco fanno questo per le app artistiche); i mescolatori di colori web generici, incluso questo, sono onesti mescolatori additivi RGB e ti daranno giallo, non marrone.

I miei punti medi sembrano fangosi, qual è la soluzione?

Due livelli di correzione. Il passo minimo di correttezza è il blending in linear-light: converti sRGB in linear-RGB prima di fare la media, poi riconverti. Solo questo fa apparire rosso+verde→giallo molto più brillante e più credibile. La correzione percettiva completa è mescolare in OKLCH o Oklab, converti entrambi gli estremi in OKLCH, interpola, riconverti. CSS color-mix(in oklch, red, green) del browser fa esattamente questo in una riga e funziona in ogni browser spedito dopo maggio 2023. Per pipeline JavaScript, culori.js è la libreria di riferimento.

Qual è lo spazio colore giusto in cui mescolare per le tavolozze dei design system?

OKLCH è la risposta di consenso attuale. È percettivamente uniforme, ha assi puliti che corrispondono all'intuizione del designer (luminosità / croma / tonalità), produce interpolazioni di gradiente senza punti medi fangosi e viene spedito in ogni browser moderno via oklch() in CSS Color 4 e color-mix(in oklch, ...) in CSS Color 5. I design system costruiti nel 2024-2026 stanno sempre più passando dalle tavolozze basate su HSL a quelle basate su OKLCH precisamente per questo motivo.

Il mio colore mescolato passerà i controlli di contrasto WCAG?

Questo strumento attualmente non espone il rapporto di contrasto del risultato, ma puoi calcolarlo: la luminanza WCAG è L = 0,2126·R + 0,7152·G + 0,0722·B dopo aver linearizzato i canali sRGB, e il rapporto di contrasto tra due colori è (L_chiaro + 0,05) / (L_scuro + 0,05). Gli obiettivi sono 4,5:1 per il testo normale e 3:1 per il testo grande o i componenti UI. Il Color Contrast Checker nell'area degli strumenti correlati esegue questo calcolo direttamente.

Strumenti correlati