Recent Changes - Search:

Pagine di servizio

Gruppi

Pagine in allestimento

Strumenti

Domini correlati

PmWiki

pmwiki.org

edit SideBar

Accordi cromatici

URL: www.pforster.ch/Colori/ColorCalc/Mischi/ColorCalc-Mischi.html

P. Forster
a cura di Daniela Rüegg

Accordi: complementare ⊷, triplice ∆, quadruplo ♢, pentagonale ☆, esagonale ✡.

1.  Introduzione

Color Armony
Gli accordi cromatici sono delle combinazioni di colori o tinte che secondo criteri fisiologici / estetici risultano "armoniose".
Tecnicamente una combinazione di colori o tinte è un accordo se il mischio dei colori / tinte coinvolte fornisce un grigio.
L'accordo più noto è il complemento: una combinazione di due colori che a miscela equa risulta grigio.


Mischi e complementi

Visto che le miscele pigmentose e luminose non corrispondono, è evidente che degli accordi complementari luminosi e pigmentosi sono diversi.

Esempio: il complemento luminoso di giallo è blu, mentre il complemento pigmentoso di giallo è viola. La miscela luminosa di giallo e viola è arancione, mentre la miscela pigmentosa di giallo e blu risulta verde.



Accordi luminosi & pigmentosi

Usando dei modelli cromatici polari circolari, tutti i colori / tinte opposte sono complementari. Tre colori che formano un triangolo equilatero si definiscono accordo triplice perfetto, quattro colori che formano un quadrato, accordo quadruplo perfetto. Gli accordi perfetti sono deducibili da un unico colore / tinta base.

Ci sono anche degli accordi "imperfetti": si basano su due colori / tinte qualsiasi. Nelle ruote dei colori formano dei rettangoli o dei triangoli non equilateri.

1.1  Calcolatrice accordi cromatici equilateri


clic per leggere le didascalie

Basandomi su questi fatti e sulle riflessioni seguenti ho stilato una calcolatrice che permette:

  • partendo da un valore esadecimale #Hex dato di un colore / inchiostro di determinare
  • gli accordi triplici e quadrati equilateri, luminosi (additivi) e pigmentosi (sottrativi)
  • variando le luminosità degli colori / inchiostri dedotti.

Inoltre è possibile dedurre e variare i valori in #Hex ⇄ RGB ⇄ HSL a vicenda.

Accordi basilari cromatici equilateri
Δ

pigmentosi S
rgb | hsl
Hy°
Hs°
Hn°
L0%

    Δ

Δ

Δ
↑ originale ↑
Cc by P. Forster 0     0
Δ

Δ

Δ

Istruzione d'uso:

  • ev. cliccare sul tasto "PopUp...": appare una finestrina separata per la calcolatrice
  • digitare il valore esadecimale # di un colore nella casella superiore: appaiono immediatamente i colori degli accordi pigmentosi nelle altre caselle.
  • ev. digitare delle correzioni per la luminosità dell'accordo triplice e/o quadruplo: appaiono le correzioni.
  • cliccando sul tasto [lumin. A] si può aprire e chiudere i relativi valori per l'accordo luminoso
  • cliccando sul tasto [rgb/hsl] si può aprire e chiudere i corrispondenti valori per le notazioni rgb e hsl, che sono anche correggibili.
  • il tasto "X" serve da cancelletto.


2.  Accordi cromatici

Per determinare degli accordi pigmentosi e luminosi mi serve la notazione polare HSL:

  1. in un primo passo converto la notazione della tinta base da #Hex/Rgb (o un'altra) in notazione Hsl.
  2. in un secondo passo la trasformo da luminosa in pigmentosa che significa essenzialmente trasformare il valore della tonalità H (luminosa) in Hy (pigmentosa).
  3. in un terzo passo determino gli accordi separatamente in scala pigmentosa e/o luminosa.
  4. nel quarto passo ritrasformo i valori degli accordi pigmentosi da Hy in H.
  5. nel quinto passo converto gli accordi da notazione Hsl in notazione #Hex/Rgb (o altri).

◦⦆─────⦅◦

2.1  Conversione da #Hex/Rgb in Hsl e viceversa


La conversione tra #Hex e Rgb pone solo il compito di convertire un sistema decimale (che include i numeri tra 0 e 255) in un sistema esadecimale (che include i numeri tra 0 e ff) in modo congruente:

  • in un sistema decimale si conta da 0...9 per proseguire con 10 (due cifre) mentre
  • in un sistema esadecimale si conta da 0...f (dove f significa 15 in decimale) per proseguire con 10 (che significa 16 in decimale).

Modello cubico RGB
Hex ⇄ Rgb
     #
    #
  RGB hex ⇄ dec           Cc by P. Forster 3.0-it        

L'unico inghippo è che la notazione del Web p.es. #8800ff significa #→esadecimale, 88→rosso, 00→verde, ff→blu. Vuol dire fare tre conversioni separate per arrivare da #Hex a Rgb e viceversa. Fortunatamente questo lavoro lo possono fare dei motorini di calcolo.


Modello cubico HSL

Di modelli per HSL ce ne sono diversi, raramente cubici, più polari quelli cilindrici, conici, doppio-conici e sferici.
Tutti i modelli rappresentano le tre dimensioni di un colore (tonalità, cromaticità e luminosità) in un corpo geometrico regolare.

Modello sferico HSL Modell doppio-cono HSL

Modello cilindrico HSL

Come modello "geometrico" HSL di solito si usa un sistema polare cilindrico (Hue→tonalità, Saturation→saturazione, Lightness→luminosità). Geometricamente immaginato come un cilindro (o come doppio cono o come sfera):

  • con sulla periferia le tonalità
  • scalate secondo la luminosità in altezza e
  • secondo la saturazione verso l'esterno

Così al centro si trova un "perno" acromatico tra nero in basso e bianco in alto. Sul "mantello" periferico si immaginano le tonalità pure chiarite e scurite, mentre all'interno del cilindro si trovano le tinte ingrigite.

La conversione tra #Hex/Rgb e Hsl non è facilmente spiegabile. Ma sul Web si trovano delle applicazioni adatte come p.es. la summenzionata.

TinyColor

Convertitore HSL TinyColor

HSL: Rv V Vb B Bg G Gy  Y  Yo  O  Or R
 
 H= 326 279 254 222 180 120 80 60 50 40 27  0 
Hy= 330 300 270 240 210 180 150 120 90 60 30  0 

Il modello cilindrico si presta per dei calcoli relativamente semplici. Lo svantaggio è che non è molto divulgato in informatica (si preferiscono le notazioni in hex # o rgb).

Per questo motivo ho incluso di fianco un convertitore di notazioni RGB (rgb, #) in notazioni polari (hsv=hsb, hsl) e viceversa.

Esempio: esadecimale #abcdef in altre notazioni ?

° digitare nella casella #abcdef
° appaiono le notazioni in rgb, hsv, hsl, ev. nome html, e il colore come sfondo.

Si può lavorare con copia → incolla oppure cliccando su un link di notazione in testa e poi modificando dei dati nella casella.

In fondo alla calcolatrice ho aggiunto una tabellina con i dodici colori basilari puri della scala pigmentosa con i relativi valori di angolazione H e Hy.


Mi servo spesso di un modello semplificato che segna solo i valori di #hex e hsl e il corrispondente colore:

◦⦆─────⦅◦

2.2  Trasformazione tonalità luminosa ⇄ pigmentosa


Per raggiungere una funzione che connetta H° e Hy° ho paragonato i valori di HSL con i valori empirici di Stanicek.


Risulta una curva sulla quale si può determinare tutti valori a vicenda: p.es. H=222° → Hy=240° oppure Hy=120° → H=60°. Ho poi approssimato questa curva con una funzione regressiva polinomiale, predisposta all'uso in calcoli.
La convertitrice facilita il lavoro: digitando un valore tra 0...360° in una delle caselle appare il valore congruente nell'altro sistema di misurazione.


3.  Calcolo di accordi equilateri


Il calcolo di accordi (colori in relazione di di un colore originale) richiede:

  • di individuare le relative nuove tonalità Hn
  • di determinare le relative nuove saturazioni Sn
  • di calcolare le relative nuove luminosità Ln

La procedura varia, se invece di un colore originario (accordi equilateri) si parte da due colori originari (accordi simmetrici).

3.1  Tonalità

Come tonalità si intende il "colore basilare" come rosso , blu, giallo, grigio, ... percepito dall'occhio umano. In una espressione numerica occorre una dimensione e un numero. Nel modello HSL si usa come dimensione "grado circolare" e come numeri l'ambito tra 0 e 360 dove 0 e 360° significano un determinato rosso stabilito dalla CIE a una lunghezza d'onda di 630nm (nanometri = miliardesimi di metro).

Si definiscono accordi armonici dei multipli di colori / tinte che mescolati ad eque parti forniscono un grigio medio per l'occhio umano (criterio fisiologico - estetico e non fisico - matematico).

Visto che dalla miscela di tinte / inchiostri e di colori luminosi si ottengono risultati diversi, anche gli accordi pigmentosi e luminosi per un determinato colore / inchiostro risulteranno diversi.


Il calcolo delle tonalità di un accordo equilatero è banale: si aggiunge alla tonalità di partenza la frazione dell'accordo desiderato fino a tornare all'inizio.

Esempio: Accordo quadruplo per il giallo luminoso H=60°?
360°/4=90°; 60+90=150°; 150+90=240°; 240+90=330°; 330+90=420°-360°=60°
L'accordo quadruplo del giallo è quindi: H60°giallo - H150°verde-blu - H240°blu - H330°viola-rosso .

Di fianco si trova una calcolatrice per accordi perfetti luminosi, basati su un colore a scelta.

Il calcolo per tinte / inchiostri è il medesimo. Bisogna solo trasformare la scala luminosa H in scala pigmentosa Hy, il colore di partenza. Dopo aver eseguito il calcolo, occorre ritrasformare i valori in scala luminosa.

Esempio: Accordo quadruplo pigmentoso per il giallo H=60°?
H60° corrisponde a Hy 120°. Il calcolo è quindi:
360°/4=90°; 120+90=Hy210°; 210+90=Hy300°; 300+90=390°-360°=Hy30°; 30+90=Hy120°.
Hy120=H60°; Hy210=H180°; Hy300=H279°; Hy30=H27°.
Accordo quadruplo pigmentoso del giallo è quindi: H60°giallo - H180°ciano - H279°viola - H30°arancione .

Non ho riportato la calcolatrice adatta: è integrata nella calcolatrice complessiva all'inizio di questo scritto.

◦⦆─────⦅◦

3.2  Saturazione


Saturazione in accordi

la saturazione cromatica (o purezza o cromaticità) è l'intensità di una specifica tonalità.


Combinaz. di un'accordo
variando le saturazioni

La saturazione in colori o tinte di accordi strettamente equilateri è identica per tutti i colori coinvolti e non può essere variata.

In una interpretazione meno stretta, le saturazioni (in notazione HSL, non in HSV/B) sono singolarmente modificabili, liberamente entro 0...100%: si muovono tutti sulla stessa superfice del poligono armonico e si orientano tutti verso il medesimo grigio medio.

◦⦆─────⦅◦

3.3  Luminosità

La luminosità (tecnicamente luminanza) è la quantità totale di luce che una sorgente luminosa appare emettere o che una superficie appare riflettere.


Luminosità: iniziale & angolo accordo

Ln = 50+((cosHn)*(L0-50)).

La sfida nel calcolo degli accordi è quella di determinare le luminosità: la superfice formata dai colori dell'accordo deve contenere il punto medio grigio. Significa che a colori opposti corrispondono luminosità opposte.


Nel sistema HSL la luminosità media è del 50%. Ad angolo opposto (180°, complementare) la luminosità complementare p.es. a L=80% risulta L=20% (perchè 80+20 diviso 2 = 50).

La faccenda si complica con angoli qualsiasi: diventa una funzione del coseno (cos) dell'angolo Hn e la luminosità originale L0. Il diagramma a destra lo illustra e il motorino che calcola la funzione si trova a sinistra.



Partendo da questo calcolo gli accordi equilateri dispongono ancora di un grado di libertà: almeno due delle luminosità sono ancora variabili, ciascuna a scapito dell'altra.

Le calcolatrici sul web di solito non considerano questo fatto.


varL=L0±Δl; Δl=Ldes-L0

Gli schizzi a destra illustrano geometricamente che il triangolo equilatero risp. il quadrato si possono rotare lungo l'asse complementare primario: le tonalità rimangono invariate mentre le due luminosità secondarie cambiano a vicenda. Il calcolo in se è banale: si aggiunge un ammontare di luminosità a un colore secondario e si diminuisce l'altra dello stesso ammontare.

Esempio: colori secondari originali hsl(60,100%,50%)   & hsl(180,100%,50%) . Variazione di ±30%. Risultano colori secondari hsl(60,100%,80%)   & hsl(180,100%,20%) .

Nonostante la banalità del calcolo ho aggiunto a destra una calcolatrice "sfiziata": facoltativamente si può aggiungere oltre i valori per la luminosità L anche dei valori per tonalità H e la saturazione S (per farsi anche un'idea concreta con colori).

Gli accordi simmetrici invece non dispongono di questa proprietà: le corde disuguali degli archi impediscono una rotazione.

4.  Calcolo di accordi simmetrici


Gli accordi simmetrici sono determinati da due colori / tinte iniziali. Questi due punti, ciascuno con sei dati, determinano la tonalità e la luminosità degli altri colori. La saturazione di ciascun colore rimane disponibile per ulteriori variazioni.

((immagini: girare retro tutti gli sfondi: 4:90° 3:120° 5:72° 6:60°; grigio centrale tutti))

◦⦆─────⦅◦

4.1  Accordi triplici



◦⦆─────⦅◦

4.2  Accordi quadrupli


In un accordo quadruplo simmetrico il terzo colore è il complemento tonale e luminoso del primo colore.

La tonalità del secondo colore è a scelta (tradizionalmente entro 30° e 150° a partire dal primo), il quarto è simmetrico al secondo (in relazione all'asse complementare primo-terzo).

Le singole saturazioni HSL sono a disposizione per delle variazioni individuali entro 0...100%.

((immagine: inserire punto H41))

◦⦆─────⦅◦

4.3  Accordi pentagonali



◦⦆─────⦅◦

4.4  Accordi esagonali



5.  Calcolo di accordi luminosi in Rgb

Visto che la scala e la notazione nel sistema RGB sono congruenti, i calcoli per raggiungere degli accordi sono relativamente semplici.

◦⦆─────⦅◦

5.1  Accordo complementare luminoso


I valori del colore conosciuto e di quello sconosciuto devono essere complementari al bianco: rgb(255,255,255) o #ffffff. Questo si calcola come differenza tra il colore conosciuto e il bianco.

- = -

Esempio didattico: colore arancione O #ff8000 = rgb(255,128,0) sottratto da bianco W #ffffff = rgb(255,255,255) fornisce rgb(0,128,255) = #0080ff uguale azzurro. Controllare sulla ruota luminosa sopra!

Pro memoria: complementi (differenza) di cifre esadecimali.


complemento →

Esempio concreto: complemento al colore #abcdef ? → #543210 !

Si nota come i complementi non rispettino solo la tonalità, ma mantengono anche la saturazione e "invertono" la luminosità questo per raggiungere il grigio medio nella miscela.

Per comodità ho aggiunto una calcolatrice per i complementi luminosi;

Istruzione d'uso:

  • ev. cliccare sul tasto "PopUp...": appare una finestrina separata per la calcolatrice
  • digitare il valore esadecimale # di un colore nella casella superiore: appare immediatamente il colore complementare nell'altra casella.
  • cliccando sul tasto si può aprire e chiudere i relativi valori in RGB.
  • il tasto "X" serve da cancelletto.


◦⦆─────⦅◦

5.2  Accordi triplici luminosi


Accordi triplici simmetrici

Dati due qualsiasi colori luminosi si può calcolare il terzo in equilibrio con i primi due.
La miscela dei due colori dati (colore 1 + colore 2)/2 = miscela colori 1,2 dispone di un complemento che corrisponde al terzo colore. Siccome la differenza tra bianco e un colore dato (miscela) è il complemento, si può trovare il terzo colore per un accordo luminoso triplice simmetrico, usando la notazione #/rgb.

Esempio didattico: da rosso#ff0000+verde#00ff00 risulta la miscela #808000=giallo-scuro. Il complemento di #808000 è evidentemente #8080ff=blu-chiaro.

( + )/2 = miscela luminosa di rosso e verde.

  - = complemento della miscela (blu-chiaro).


Accordi triplici equilateri

Per comodità ho aggiunto un motorino per eseguire e rendere visibili questi calcoli.

Istruzione d'uso:

  • cliccare sul tasto "PopUp...": appare una finestrina separata per la calcolatrice
  • digitare il valore esadecimale # di un primo colore nella casella superiore.
  • digitare il valore esadecimale # di un secondo colore nella casella media.
  • appare il colore e il valore del terzo colore dell'accordo simmetrico
  • cliccando ev. sul tasto si può aprire e chiudere i relativi valori in RGB.
  • il tasto "X" serve da cancelletto.



Non sono riuscito a trovare un algoritmo banale in notazione #hex/rgb per determinare, da un colore dato, un accordo triplice equilaterale. Per risolvere la questione uso invece il sistema HSL che si presta a questo calcolo.

◦⦆─────⦅◦

5.3  Accordi quadrupli luminosi


Accordi rettangolari

Dati due qualsiasi colori si può stabilire un accordo quadruplo (rettangolo) armonico, che significa che un punto sul rettangolo è il grigio medio.
Il calcolo è alquanto semplice: i complementi dei due punti noti formano i due punti sconosciuti dell'accordo quadruplo simmetrico.


Esempio didattico:dati due colori: giallo-scuro#808000 e verde#00ff00 determinare l'accordo quadruplo simmetrico. Risulta il complemento blu-chiaro#8080ff e il magenta#ff00ff.
- = complemento luminoso al giallo scuro.
- = complemento luminoso al verde.

Ho aggiunto una calcolatrice per evitare relativi calcoli noiosi.


Accordi quadrati

Istruzione d'uso:

  • cliccare sul tasto "PopUp...": appare una finestrina separata per la calcolatrice
  • digitare il valore esadecimale # di un primo colore nella casella superiore.
  • digitare il valore esadecimale # di un secondo colore nella casella media.
  • appare il colore e il valore del terzo colore dell'accordo simmetrico
  • cliccando ev. sul tasto si può aprire e chiudere i relativi valori in RGB.
  • il tasto "X" serve da cancelletto.


◦⦆─────⦅◦

5.4  Accordi equilateri luminosi

Non sono riuscito a trovare un algoritmo banale in notazione #hex/rgb per determinare da un colore dato un accordo quadrato. Per risolvere la questione uso invece il sistema HSL.

Visto che il calcolo in notazione HSL lo uso normalmente per accordi pigmentosi, nello stesso tempo tratterò anche gli accordi luminosi equilateri.

6.  Annessi

6.1  Modelli RYB e RGB


6.2  Sitografia (PopUps, Javascripts)

JavaScripts (programmini essenziali integrati):

  • Conversione HSL-#Hex: function hsl2hex(h,s,l) → return hex ; function hex2hsl(hex) → return h, s, l;
  • Conversione H-Hy: function H2Hy(H) → return Hy ; function Hy2H(Hy) → return H;
  • miscela pigmentosa: function PigmentMean(Hy1,Sy1,Ly1,Hy2,Sy2,Ly2) → return hyo, dhy, cosdhy, syo, lyo;

6.3  Commenti

alla pagina: Miscele numeriche di tinte e colori. Se non c'è una relativa casella, cliccare sul titolo.

Commento 
Autore 
Enter code 652



Edit - History - Print - Recent Changes - Search
Page last modified on October 05, 2014, at 07:59 PM