Recent Changes - Search:

Pagine di servizio

Gruppi

Pagine in allestimento

Strumenti

Domini correlati

PmWiki

pmwiki.org

edit SideBar

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 cromatici e abbozza le problematiche. Spero sia utile a chi intende dedicarsi al tema.

Uso della pagina:

  • cliccando su un'immagine , questa appare ingrandita in un tabulatore nuovo. Si chiude il tabulatore con il relativo tasto X.
  • cliccando su un pulsante si apre un PopUp (pagina rimpicciolita autonoma) per eseguire le funzioni indicate.

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).


1.  Scale cromatiche



Scala cromatica a chiocciola

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 tra 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:

  • calcolare le differenze tra valore finale e iniziale nelle tre dimensioni (H,S,K)
  • dividerli per la quantità dei passi (fornisce l’incremento i per passo)
  • moltiplicarli per il passo consecutivo (da 1 ... n-1)


◦⦆─────⦅◦

1.1  Calcolo della luminanza / luminosità

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)

Variazione di dati cromatici
Luminosità L e Luminanza K
additiva H e sottrativa Hy
# K %
rgb
hsl L
Hy Ks
Cc by P. Forster 3.0-it 150319



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%

  • H1=210+1*30=240°; S1=100-1*20=80%; K1=30+1*10=40% → 1-hsk(240,80,40)
  • H2=210+2*30=270°; S2=100-2*20=60%; K2=30+2*10=50% → 2-hsk(270,60,50)
  • H3=210+3*30= ... → 3-hsk(300,40,60)


2.  Calcolatrice di scale cromatiche


Gradienti miscelari & scalari

Il concetto delle scale cromatiche non è divulgato nelle arti grafiche digitali. Di solito i gradienti usati sono miscelari e non 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.


Distanze luminose
& 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 tra le due divergono le direzioni.

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 pigmentosa prende il percorso rosso-viola-blu-verde (da 360-184=176° a 360°).

Sono integrate anche le bande di gradienti (passaggio continuo invece che 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 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.


3.  Costruzione di gradienti a partire di scale


Scale e gradienti

Dei gradienti costruiti con strumenti dal web sono per definizione "miscellari". Significa, che si basano su una continua miscela 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 possono stilare graficamente dei gradienti multicolori o si può codificarli in CSS Cascading Style Sheets oppure JavaScript come dimostrato di seguito.

◦⦆─────⦅◦

3.1  Gradienti grafici


Nei 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".

◦⦆─────⦅◦

3.2  Codifica CSS

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:


Gradiente lineare 3 colori

Gradiente radiale 2 colori
  • background-image: linear-gradient(to top right, #FFFFFF 0%, #DF15AA 50%, #AACFEF 100%);
  • background-image: radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

Un'ottima spiegazione per stilare i relativi codici in html / CSS si trova in html.it: gradienti

◦⦆─────⦅◦

3.3  Codifica JavaScript

In JavaScript, con html5 e la funzione canvas ("lavagna") si riesce a costruire comodamente delle funzioni di gradienti. Un'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 ⇥.

Gradienti tra fino sei colori
passi     #
Gradiente in uno ... cinque passi equi                                     Cc by P. Forster 3.0-it 150322       il Suo browser non interpreta html5 canvas

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.

4.  Annessi

4.1  Imperfezioni numeriche

I calcoli delle calcolatrici non sono numericamente perfetti. Mi sono dato da fare per far sì che le divergenze non siano percepibili dall'occhio umano.
Ci sono essenzialmente tre meccanismi causali:

  • errori di arrotondameno nelle numerose conversioni #hex⇄rgb⇄HSL⇄HySK.
  • imprecisioni negli algoritmi di approssimazione H⇄Hy nelle loro inversioni.
  • imprecisioni nell'algoritmo di iterazione K→L.

Mi auguro che un programmatore professionale per Javascript li ottimizzi. 8>)__Peter

4.2  Pagine correlate

Per approfondire le conoscenze sui dettagli delle teorie quantificate di colori e tinte possono servire le seguenti pagine:

4.3  Calcolatrici per colori

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 "Complementi cromatici"
Calcolatrici in genere

4.4  Google Drive

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

L'accesso conviene per stampare facilmente i singoli documenti come p.es. immagini ingrandite.

4.5  Commenti

alla pagina: Gradienti scalari cromatici. Se non c'è una relativa casella, cliccare sul titolo.

Commento 
Autore 
Enter code 661



Edit - History - Print - Recent Changes - Search
Page last modified on April 04, 2015, at 07:03 AM