Miscelatore Colore

Un mixer di colori fonde due colori in uno nuovo e ti mostra il risultato in HEX, RGB e HSL Gli dai un primo colore e un secondo colore in qualsiasi sintassi comune (un codice esadecimale come #4466EE, un valore rgb () o hsl () o un nome CSS come corallo), scegli quanto del secondo colore piegare e calcola istantaneamente il colore misto Costruisce anche un gradiente di passaggi intermedi tra i due colori, in modo da poter vedere l'intera transizione anziché un singolo punto medio.

Il mix diretto è una media ponderata: con un rapporto del 50% ogni colore contribuisce equamente e lo strumento interpola linearmente ciascun canale rosso, verde e blu tra i due ingressi. Fai scorrere il rapporto verso 0 e mantieni il primo colore; fatelo scorrere verso 100 e atterrerete sul secondo. Questo è lo stesso CSS matematico utilizzato per un gradiente a due stop, motivo per cui il punto medio di un gradiente dal rosso al blu è il viola riportato da questo strumento.

Al di là di una semplice miscela, il mixer offre le modalità di fusione separabili definite nella specifica di composizione e fusione del W3C: moltiplica, schermo, sovrapposizione, oscuramento, schiarimento, differenza e media Queste sono le stesse operazioni che gli editor di immagini come Photoshop e GIMP applicano tra i livelli Moltiplica sempre si scurisce (il rosso per il blu è nero), lo schermo si schiarisce sempre (il rosso sul blu è magenta) e la differenza ti dà la distanza canale per canale tra due colori Il rapporto agisce quindi come l'opacità del livello, controllando quanto fortemente il risultato miscelato viene applicato sul primo colore.

Tutto viene eseguito lato client nel browser I colori immessi non escono mai dalla scheda e, poiché la matematica dei colori è aritmetica semplice, lo strumento funziona offline una volta caricata la pagina, I progettisti raggiungono un mixer per trovare un colore a metà strada tra un marchio primario e un neutro, per costruire scale di tinta e accento o per visualizzare in anteprima come due livelli si combineranno prima di impegnarsi in un file di progettazione Gli sviluppatori lo usano per generare stop gradienti, calcolare gli stati di passaggio del mouse e tradurre un risultato misto direttamente in un valore HEX o HSL che possono incollare in CSS.