Trascorro una quantità sorprendente della mia giornata da qualche parte tra un file di design e un foglio di stile, spingendo un colore verso un altro finché uno stato di hover, un bordo o una fermata sfumata sembra giusto Per anni ho fatto l'aritmetica nella mia testa o l'ho visto in un raccoglitore, il che va bene finché non hai bisogno del colore esatto a metà tra un blu di marca e un neutro caldo e ne hai bisogno come codice esadecimale che puoi incollare Così ho costruito un miscelatore colore innanzi Toolz.dev che fonde due colori con un rapporto che controlli, offre le stesse modalità di fusione utilizzate da un editor di immagini e ti consegna il risultato in HEX, RGB e HSL. Questa è la guida ad esso e a ciò che & quot; mixare colori" significa su uno schermo.
tl; dr: Un mixer di colori fonde due colori in uno Il Toolz miscelatore colore interpola due colori con un rapporto regolabile, supporta le modalità di fusione separabili W3C (moltiplica, schermo, sovrapposizione, oscuramento, schiarimento, differenza, media), costruisce un gradiente di passaggi intermedi tra i colori e restituisce ogni risultato come HEX, RGB e HSL. Accetta nomi di colori esadecimali, rgb (), hsl () e CSS e funziona interamente lato client.
Come si mescolano due colori su uno schermo?
La risposta semplice è una media ponderata dei due colori' canali rossi, verdi e blu Per mescolare il rosso (255, 0, 0) e blu (0, 0, 255) in parti uguali, si fa la media di ogni canale: il rosso diventa (255+0)/2 = 128, soggiorni verdi 0, il blu diventa (0+255)/2 = 128, dando (128, 0, 128), che è l'esagono #800080, un viola solido Spostare il peso verso un lato e si scorre lungo la linea tra i due colori Questo è esattamente ciò che fa il cursore del rapporto: allo 0 per cento si mantiene il primo colore, al 100 per cento si atterra sul secondo, e il 50 per cento è la divisione pari.
Questa è la stessa interpolazione utilizzata da un gradiente CSS a due stop, motivo per cui il punto medio di linear-gradient(red, blue) è quel viola Il mixer rende esplicita la relazione disegnando anche il gradiente tra i tuoi due colori come una striscia di campioni, ognuno dei quali puoi copiare come stop intermedio Se hai mai desiderato & quot; tre colori equidistanti tra questi due, & quot; la striscia sfumata è il modo più veloce per ottenerli.
Un avvertimento onesto, perché sorprende le persone: la media dei canali RGB non è il modo in cui i pigmenti si mescolano Su uno schermo, i colori sono leggeri e si combinano in modo additivo; in un set di vernici, sono pigmentati e si combinano in modo sottrattivo Mescolando le tendenze della luce rossa e verde verso un'oliva opaca piuttosto che il giallo vivido che otterresti dalla vernice, perché stai facendo la media dei valori di luce, non mescolando pigmenti Questo non è un bug nello strumento, è la natura di sRGB e la soluzione quando vuoi un risultato più vivace è mescolare tonalità che si trovano più vicine tra loro sulla ruota Il convertitore colore è utile accanto al mixer quando desideri vedere lo stesso colore espresso nei formati mentre motivi la tonalità.
Qual è la differenza tra Mix e le modalità di miscela?
Mix è la media ponderata sopra descritta: atterra sempre da qualche parte sulla linea retta tra i due colori Le modalità di fusione sono tutt'altra cosa Sono le operazioni di fusione dei livelli degli editor di immagini, standardizzate per il web nel W3C Compositing e miscelazione Livello 1 specifica, e ognuno combina i canali con una formula diversa piuttosto che con una media semplice.
| modo | Formula per canale (valori da 0 a 1) | Effetto |
|---|---|---|
| Miscelare | b (ponderato per rapporto) |
Media ponderata, atterra tra i due colori |
| Moltiplicare | a x b |
Sempre più scuro; il bianco lascia un colore invariato, il nero forza il nero |
| Schermo | a + b - a x b |
Sempre più leggero; l'inverso della moltiplicazione |
| Sovrapposizione | moltiplica o scherma per base | Aumenta il contrasto |
| Oscurare | min(a, b) |
Mantiene il canale più scuro |
| Alleggerire | max(a, b) |
Mantiene il canale più leggero |
| Differenza | abs(a - b) |
Distanza del canale; colori identici danno il nero |
| Media | (a + b) / 2 |
La media non ponderata di entrambi |
L'intuizione che vale la pena portare: moltiplicare si scurisce sempre perché moltiplicando due frazioni si ottiene una frazione minore, quindi rosso per blu è nero (a ogni colore manca il canale dell'altro) Lo schermo si schiarisce sempre perché viene applicato in moltiplicazione ai valori invertiti La differenza ti dà la distanza canale per canale, motivo per cui mescolare un colore con se stesso sotto differenza produce nero puro Nel mixer, il cursore del rapporto si comporta quindi come un'opacità di strato: sfuma il risultato miscelato nel primo colore, in modo da poter comporre l'effetto da sottile a pieno.
Che cosa controlla il cursore del rapporto?
Il rapporto imposta quanto fortemente il secondo colore, o il risultato miscelato della modalità scelta, viene applicato sul primo colore Pensatelo come opacità sullo strato superiore Allo 0 percento, lo strato superiore è invisibile e vedete il primo colore intatto Al 100 percento, lo strato superiore è completamente opaco e si ottiene la miscela completa per quella modalità Al 50 percento, si ottiene una divisione uniforme Per il mix semplice, questo si riduce alla media ponderata familiare; per una modalità come Multiply, ti consente di applicare un delicato oscuramento anziché l'effetto completo.
Quel modello unificato è deliberato, perché significa che uno slider fa lo stesso lavoro concettuale in ogni modalità In pratica uso rapporti bassi per spingere leggermente un colore verso un altro (uno stato di hover che è & quot; il pulsante, ma il 15% verso black") e rapporti alti quando voglio la miscela completa Il generatore gradiente riprende da dove si interrompe il mixer quando si desidera trasformare un paio di colori misti in un gradiente CSS multi-stop completo.
Come faccio ad ottenere il colore esatto a metà strada tra due colori?
Imposta la modalità su Mix e il rapporto su 50, e il risultato è il punto medio esatto Puoi anche leggerlo direttamente dalla striscia sfumata: il campione centrale è il colore a metà Quando hai bisogno di diversi colori equidistanti tra due punti finali, aumenta il conteggio dei passi sfumati e copia gli swatch nelle posizioni che desideri Questo è il compito quotidiano per cui è stato costruito il mixer, sia che tu stia generando tinte per una tavolozza, distanziando i colori di visualizzazione dei dati o trovando il neutro che si trova tra due colori del marchio.
Per costruire intere famiglie di un unico colore anziché fonderne due, il generatore di sfumature di colore è la soluzione migliore, poiché mescola un colore al bianco, al nero e al grigio per produrre tinte, sfumature e toni. E quando scegli i colori per il testo o l'interfaccia utente, esegui il risultato raccoglitore colore e un controllo del contrasto, perché un colore che si mescola magnificamente può ancora non superare una soglia di leggibilità Il flusso di lavoro più ampio, dal prelievo al controllo alla spedizione, è disposto nel Toolkit per sviluppatori web guida.
Perché i miei colori misti a volte sembrano fangosi o scuri?
Due cose causano questo, ed entrambi riguardano lo spazio colore piuttosto che lo strumento Il primo è il disadattamento additivo contro sottrattivo già menzionato: la media delle tonalità distanti nelle derive RGB verso il grigio, quindi i colori opposti sulla ruota si mescolano a qualcosa di opaco Il secondo è che i valori sRGB sono codificati gamma, non luce lineare Una vera media fisica della luce si convertirebbe prima allo spazio lineare, alla media, quindi si convertirebbe indietro, il che mantiene i punti medi più luminosi La maggior parte degli strumenti, i gradienti CSS e gli editor di immagini si interpolano direttamente in sRGB codificato gamma perché è veloce, prevedibile e corrisponde a ciò che i progettisti si aspettano da un gradiente, quindi questo mixer fa lo stesso Se desideri una miscela più brillante, mescoli tonalità più vicine, si appoggino alla modalità Schermo o raggiungano uno spazio percettivamente uniforme come OKLCH nel tuo CSS finale. strumenti online per la privacy dei dati guida spiega perché, punti medi fangosi o meno, fare questi calcoli nel browser anziché su un server è il giusto valore predefinito per il lavoro di progettazione che preferiresti mantenere locale.
Domande frequenti
Come si mescolano due colori?
Per mescolare due colori si mediano i loro canali rosso, verde e blu, ponderati in base a quanto di ciascun colore si desidera Un mix 50/50 di rosso (255, 0, 0) e blu (0, 0, 255) fa la media di (128, 0, 128), che è viola Questo strumento fa quell'interpolazione per te e ti consente di spostare il peso con il cursore del rapporto, in modo da poter atterrare ovunque tra i due colori invece che solo il punto medio esatto.
Qual è la differenza tra Mix e Multiply?
Mix è una media ponderata che atterra tra i due colori, quindi mescolando rosso e blu si ottiene il viola Moltiplicali li combina come fanno i filtri di inchiostro o luce sovrapposti, moltiplicando i valori del canale, quindi produce sempre un colore scuro come o più scuro di entrambi gli input Moltiplicando rosso e blu si ottiene il nero, perché a ciascun colore manca il canale dell'altro Moltiplica è una modalità di fusione dalla modifica delle immagini, non una media semplice.
Perché mescolare due colori vivaci a volte dà un risultato fangoso?
Perché la media dei canali RGB sposta il risultato verso il grigio ogni volta che i due colori si trovano distanti sulla ruota dei colori Il rosso e il verde hanno una media di un marrone oliva opaco anziché di un giallo vivido, poiché i colori dello schermo si mescolano come chiari mentre il giallo vivido che ci si potrebbe aspettare deriva dalla miscelazione dei pigmenti Per una miscela più vivace, mescola i colori che sono più vicini nella tonalità o prova la modalità Schermo, che mantiene i risultati più luminosi.
Posso mescolare i colori in HSL invece che in RGB?
Questo mixer interpola in RGB, che è ciò che i gradienti CSS e gli editor di immagini fanno per impostazione predefinita, e riporta il risultato anche in HSL Mixing in RGB è prevedibile e corrisponde a come viene eseguito un rendering a gradiente CSS a due stop La tonalità interpolante in HSL può percorrere molto la ruota dei colori e produrre tonalità intermedie inaspettate, motivo per cui l'interpolazione RGB è l'impostazione predefinita più sicura per una miscela generica.
Cosa cambia il cursore del rapporto?
Il rapporto imposta quanto fortemente il secondo colore, o il risultato miscelato, viene applicato sul primo Con lo 0 percento si ottiene il primo colore invariato, con il 100 percento si ottiene il secondo colore completo o la miscela completa per la modalità scelta e con il 50 percento si ottiene una divisione uniforme Per le modalità di fusione si comporta come l'opacità del livello in un editor di immagini, sbiadendo il colore miscelato sopra la base.
Come faccio ad ottenere il colore a metà tra due colori?
Imposta la modalità su Mix e il rapporto al 50 percento, e il risultato è il punto medio esatto Puoi anche leggerlo fuori dalla striscia sfumata, dove il campione centrale è il colore a metà Per un controllo più preciso, aggiungi più passaggi al gradiente e copia qualunque campione intermedio corrisponda alla posizione che ti serve tra i due colori.
A cosa servono le modalità di fusione come Screen e Overlay?
Sono le modalità di fusione dei livelli degli editor di immagini, definite per il web nella specifica di composizione e fusione del W3C Lo schermo si schiarisce e viene utilizzato per bagliori e luci, Moltiplica si oscura e viene utilizzato per ombre e tinte e Sovrapposizione aumenta il contrasto combinando i due L'anteprima di essi in un mixer consente di prevedere come si combineranno due livelli colorati prima di applicarlo in CSS o in uno strumento di progettazione.
Quali formati di colore accetta il mixer?
Il mixer accetta i codici esadecimali (tre, sei o otto cifre), i valori rgb () e rgba (), i valori hsl () e hsla () e i nomi dei colori CSS comuni come corallo o rebeccapurple Ogni input ha un campione di colore nativo su cui puoi fare clic per scegliere visivamente e ogni risultato viene mostrato in HEX, RGB e HSL in modo da poter copiare qualunque formato il tuo foglio di stile abbia bisogno.
Il mixer colore è gratuito e privato?
Sì. Il mixer colori è completamente gratuito senza iscrizione, filigrane e senza limiti di utilizzo e ogni calcolo avviene nel browser I colori immessi non vengono mai caricati, quindi nulla di ciò che mescoli lascia il tuo dispositivo e, poiché la matematica viene eseguita localmente, lo strumento continua a funzionare se perdi la connessione dopo che la pagina è stata caricata.
