|
|
|
|
| HOME ◊ .php ◊ .html ◊ .pdf ◊ GoogleDrive | Cromatologia ◊ Colore ◊ Tinta ◊ Inchiostro |
Scale e gradienti cromatici | P. Forster |
| |
| a cura di Daniela Rüegg |
Ricercando un metodo per la simulazione numerica di tinte pigmentose e le loro interazioni sono incappato in diverse correlazioni che tengo utile documentare.
Questa pagina illustra le basi su scale e gradienti cromatiche e abbozza le problematiche. Spero sia utile a chi intende dedicarsi al tema.
Uso della pagina:
, questa appare ingrandita in un tabulatore nuovo. Si chiude il tabulatore con il relativo tasto X.
Convertitore di dati cromatici:
Per lo studio di questa pagina è utile avere a portata di mano un convertitore di dati cromatici . Cliccando sul tasto sotto l'immagine, si apre un PopUp (pagina miniaturizzata autonoma).
Una scala cromatica è una traiettoria continua tra due qualsiasi colori in passi definiti.
I due colori (iniziale b e finale e) sono determinati nelle tre dimensioni tonalità H°, saturazione S% e luminanza K%.
Il compito è di determinare i singoli punti tramezzo i due nelle tre dimensioni H, S e K.
H = valore tonalità °
S = valore saturazione %
K = valore luminanza %
b = valore iniziale
e = valore finale
n = passi desiderati
i = incremento (da 1 ... n-1 passi
Per calcolare i singoli valori bisogna:
◦⦆─────⦅◦
Il calcolo in se è banale con l'unico problema, che non ho trovato una notazione HSK (quindi con luminanza K assoluta invece della luminosità relativa L).
b-hsk(Hb,Sb,Kb) ; e-hsk(He,Se,Ke) ; i-hsk(Hi,Si,Ki)
Hi = Hb+((He-Hb)/n*i) ; Si = Sb+((Se-Sb)/n*i) ; Ki = Kb+((Ke-Kb)/n*i)
I calcoli luminosità⇄luminanza non sono facilmente risolvibili. Ho quindi aggiunto una calcolatrice, che permette di trasformare #hex ⇄ rgb ⇄ HSL ⇄ HSK ⇄ HySK e viceverso.
Esempio: determinare la scala in 4 passi tra b-hsk(210,100,30) e e-hsk(330,20,70)
Hi=(330-210)/4=30°; Si=(20-100)/4=-20%; Ki=(70-30)/4=10%
Il concetto delle scale cromatiche non è divulgato nelle arti grafiche digitali. I gradienti usati sono al solito miscelari e non su scalari. In più in si trovano gradienti basati su una banda cromatica pigmentosa. Il grafico di fianco illustra le relative differenze.
Non avendo trovato uno strumento per determinare delle scale cromatiche, ho ideato una calcolatrice in merito. Permette, partendo da due qualsiasi colori / tinte di stabilire delle scale regolari da uno fino a undici passi nelle bande di colori luminosi e di tinte pigmentose.
La calcolatrice si apre in una pagina separata cliccando sul tasto "Calcolatrice scale".
L'immagine dimostra, che in certi casi le scale luminose e pigmentose possono essere fondamentalmente diverse: la calcolatrice si cerca la "strada più corta" tra due colori. Visto che le bande pigmentose e luminose sono distorte tra di loro, ci sono dei casi dove divergono le direzioni tra le due.
P.es. tra rosso e verde la differenza tonale additiva H è di 120° e la differenza pigmentosa Hy è di 184°. È evidente che la scala additiva prende il percorso rosso-arancione-giallo-verde (da 120° a 0°), mentre la scala pigmentoso prende il percorso rosso-viola-blu-verde (da 360-184=176° a 360°).
Sono integrate anche le bande di gradienti (passaggio continuo invece scalare) luminosi e pigmentosi.
Uso: Digitando un numero esadecimale nella casella f_hex (p.es #ffff00) e poi un'altro nella casella l_hex (p.es. #2e4d6b) appaiono i dati dei due due colori in notazione Rgb e Hsl e i colori stessi.
Digitando poi un valore tra due e undici nella casella per i "passi" (p.es. 11) (al posto di "4" preimpostato) e azionando il tabulatore ⇥, appaiono i colori intermediari: a sinistra nella banda luminosa, a destra nella banda pigmentosa.
Cliccando poi su uno dei colori apparsi, si apre una finestra con i dati del relativo colore: #hex, rgb, hsl, K, grigio e #hex del colore basilare.
Cliccando il tasto "nota" appaiono le osservazioni, su "dati, tutti dati rilevati in tramezzo al colcolo.
Invece di impostare come entrata i colori in notazione #hex, si può modificare anche i dati Rgb oppure Hsl: gli altri dati d'entrata si adattano dopo tabulatore ⇥ e la scala dopo aver azionato la casella "passi" pure con il tabulatore.
Dei gradienti costruiti con strumenti dal web sono per definizione "miscellari". Significa, che si basano su una continua miscele luminosa tra i due colori coinvolti.
Anche dei "gradienti multicolori" funzionano così, in modo che l'ambito è suddiviso in segmenti e il gradiente viene costruito tra segmenti adiacenti.
Teoricamente è impossibile così di costruire dei gradienti "scalari" (non miscellari), bensì si riesce a farsi dei gradienti pseudoscalari: basta suddividere l'ambito tra due colori in segmenti abbastanza ristretti.
Se il passo tra un segmento e il prossimo è inferiore a ca. H=25°, l'occhio umano non nota più una differenza tra gradiente "miscellare" e "scalare". Se il passo e un numero pari, è leggermente accentuato il colore mediano, altrimenti si "appiatisce" un pò il gradiente.
Disponendo di scale di colori (calcolatrice), si può stilare dei gradienti multicolori graficamente o si può codificarli in CSS Cascading Style Sheets oppure JavaScript come dimostrato di seguito.
◦⦆─────⦅◦
In dei grafici mi faccio dei segmenti adiacenti corrispondente alla quantità di colori stabiliti con la calcolatrice. Poi uso la funzione per gradiente (incorporato nel relativo programma grafico) per ogni segmento: da colore precedente a colore susseguente. Risulta una banda gradiente "pseudoscalare".
◦⦆─────⦅◦
In CSS mi servo di generatori per gradienti online come ad es. Cssmatic. I più noti sono: MS | CSS3 | Mozilla | altri. La codifica in CSS non è tanto difficile. Di seguito 2 esempi:
Un'ottima spiegazione per stilare i relativi codici in html / CSS si trova in html.it: gradienti
◦⦆─────⦅◦
In JavaScript, con html5 e la funzione canvas ("lavagna") si riesce a costruire commodamente delle funzioni di gradienti. Ub'ottima introduzione si trova in webfract e dei trattati sistematici in w3schools.
Una calcolatrice per dei gradienti tra due ... sei qualsiasi colori (1 ... 5 passi) si trova di seguito. Basta digitare i passi desiderati e poi dei valori esadecimali #hex nelle caselle e poi azionare il tabulatore ⇥.
Esempio: banda rgb in 5 passi: digitare "5" nella prima casella e poi:
sostituire nelle caselle consecutivamente i valori preimpostati dei susseguenti colori in notazione #hex: (rosso) ff0000, (giallo) ffff00, (verde) 00ff00, (ciano) 00ffff, (blu) 0000ff e (magenta) ff00ff (copia → incolla).
Per i curiosi: il programmino commentato della calcolatrice gradienti è da vedere sotto CalcGradiente.
I calcoli delle calcolatrici non sono numericamente perfetti. Mi sono dato da fare però, che le divergenze non siano percepibili dall'occhio umano.
Ci sono essenzialmente tre meccanismi causali:
Mi auguro, che un programmatore professionale per Javascript li ottimizzerei. 8>)__Peter
Per approfondire le conoscenze sui dettagli delle teorie quantificate di colori e tinte possono servire le seguenti pagine:
Ogni lavoro aritmetico sbrigativo su tinte e colori necessita di calcolatrici per conversioni di coordinate, trasformazioni di sistemi e operazioni con colori. Di seguito le a me più note che servono a questo scopo:
| Calcolatrici "Scale e gradienti" | |
| Calcolatrici in genere | |
I documenti per questa pagina (diversi formati, immagini, codifiche, programmini, ...) sono reperibili in una cartella di Google Drive:
Google Drive è un servizio, in ambiente cloud computing, di web storage e sincronizzazione online introdotto da Google il 24 aprile 2012 che permette il file hosting, file sharing e editing collaborativo di documenti, inizialmente, fino a 5 GB; da ottobre 2013 fino a 15 GB gratuiti estendibili fino a 16 TB in totale.
Il servizio può essere usato via Web, caricando e visualizzando i file tramite il web browser, oppure tramite l'applicazione installata su computer che sincronizza automaticamente una cartella locale del file system con quella condivisa. Wikipedia.it
Conviene l'accesso per facilmente stampare i singoli documenti come p.es. gli immagini ingranditi.
alla pagina: Gradienti scalari cromatici. Se non c'è una relativa casella, cliccare sul titolo.