Recent Changes - Search:

Pagine di servizio

Gruppi

Pagine in allestimento

Strumenti

Domini correlati

PmWiki

pmwiki.org

edit SideBar

Colori di J. Itten


Bisogna guardare a lungo per vedere qualcosa. G. Flaubert

HOME .php .html .pdf ? ? ? ? ?
P. Forster

clic ingrandisce l'immagine
a cura di Daniela Rüegg

1.  Prefazione

L'idea di stilare questo testo mi è venuta perchè i colori del web non mi soddisfacevano per niente; come dice il mio amico Roberto sono "colori di plastica".

Il motivo sarà perchè il nostro cervello elabora i colori in modo "pigmentoso" e non in modo "luminoso". Questo lo si può notare dopo aver guardato il sole, quando girando la testa verso una zona d'ombra si nota un'"immagine fantasma"; viola se il sole appariva giallo, azzuro se appariva arancio e verde quando durante il tramonto appare rosso. Queste "immagini fantasma" non sono altro che i complementi pigmentosi.
Sullo schermo di un computer però appaiono in modo divero: il blu tende al giallo, l'azzurro all'arancio e il ciano al rosso;sono i complementi "luminosi". Inoltre sullo schermo mancano le contrapposizioni di colori puri verso i grigiastri e le sottili sfumature di colori scuri verso quelli più chiari. Gli accordi risultano "dissonanti" e i contrasti unidimensionali.
Ai più può sembrare un'inezia, ma a me questo disturba da quando lavoro al computer. Sullo schermo,gli effetti menzionati prima si potrebbero creare tutti (in RGB si possono creare più di sei millioni di colori diversi), ma ci vorrebbero delle palette diverse dalle solite tavolozze e degli occhi pazienti per guardare e scoprire l'insolito.

1.1  Modelli di colori luminosi e pigmentosi


J. Itten: Begegnung 1916

Quando mi appresto a comporre i grafici fisiologici per il mio sito di Medicina Popolare e giocoforza devo far capo a quello che c'è a disposizione sul Web, mi accorgo che questo fa a pugni con il modello di colori che è fisso nella mia testa da quarant'anni a questa parte.

Non è che ci sia un manco di strumenti, anzi, attualmente ce ne sono moltissimi: sullo schermo posso definire potenzialmente più di sei milioni di colori, ma come faccio a scegliere quelle poche dozzine che mi servono per darmi la possibilità di esprimere quello che intendo, in modo anche esteticamente soddisfacente?

Dopo lunghe e frustranti ricerche ho pensato di darmi da fare e ricominciare da dove avevo smesso in gioventù, cioè mescolando colori pigmentosi con il pennello.


Complementi e mescoli sullo schermo e sullla paletta

E ho pure cominciato a capire cosa mi disturbava:

  • se mescolo blu e giallo sulla paletta riesco a creare tanti grigiastri tra verde-giallo, verde e blù-verde. Se lo faccio sullo schermo, mi escono dei grigiastri di giallo e blù e un grigio puro ma niente che si avvicini al verde.
  • se mescolo due pigmenti fisiologicamente complementari come verde-giallo e rosso-viola sulla paletta, mi esce un bel grigio. Se lo faccio sullo schermo mi escono tante tonalità giallastre e aranciastre, ma mai un grigio.

Questo perchè tra mischi luminosi e pigmentosi c'è una notevole differenza: tra uno e l'altro ci sono regole fisiche diverse, ambedue reali, dimostrabili e percepibili. Per un ingegnere della televisione saranno più incisivi i mischi luminosi mentre per il mio amico carrozziere Giacomo sono di primaria importanza i pigmentosi; non può permettersi di sbagliare la tonalità della lacca quando mi ripara un paraurto!

◦⦆─────⦅◦

1.2  Mischi pigmentosi


Funzioni e procedure
di mescoli pseudopigmentosi

Seguendo un ragionamento logico, ho cercato di simulare dei mischi pigmentosi anche sullo schermo. Avessi mai affrontato questa impresa! - un lungo percorso con conclusione (quasi) zero: non ho trovato niente di praticabile per qualsiasi lavoro grafico.

Almeno sono riuscito di stilare delle funzioni e procedure (vedi Simulazione ... per simulare approssimativamente questa operazione che è anche graficamente soddisfacente. Malauguratamente la procedura è malcomoda. È da sperare che qualcun programmatore la trasformi in un marchingenio di facile uso.

◦⦆─────⦅◦

Residui collaterali al lavoro

Durante questo lavoro ho dovuto trattare diversi temi e problematiche inerenti che si trovano abbozzati nei seguenti testi.

Inoltre ho creato un paio di strumenti per allegerirmi il lavoro e che possono servire anche ai lettori di questo testo:

  • ColorBlender: Calcolatrice per il mischio luminoso di due colori, scurimenti, chiarimenti (anche scalate) e le conversioni tra esadecimali, decimali e percentuali.
  • PigmentCalc: calcolatrice approssimativa per dei mischi pigmentosi rudimentali e
  • Correzioni pigmentose: diagramma di correzione per i mischi pigmentosi.

◦⦆─────⦅◦

Convenzioni per questo testo

Per dei valori numerici di colori mi sono servito della notazione esadecimale RGB del web, perché:

  • mette a disposizione più di sei millioni di colori descrivibili con sei cifre
  • il numero serve direttamente per definire un colore in html

Come abbreviazioni di colori puri uso le seguenti lettere maiuscole:
Y giallo fafe20, YO giallo-arancio fbc51b, O arancio f88b16, OR arancio-rosso f85014, R rosso f71412, RV rosso-viola c20e4f, V viola 8c088c, VB viola-blù 5b07ae, B blù 2905d0, BG blù-verde 266a70, G verde 23cf10, GY verde-giallo 91e718, W bianco ffffff, N nero 000000 o 361800, K grigio non definito,

2.  Modello cromatico di J. Itten

Johannes Itten (1988 - 1967) era un noto educatore artigianale. Ha sviluppato un modello cromatico che si orienta alla fisiologia umana della percezione dei colori e alla loro manufazione con dei pigmenti minerali.

Johannes Itten


Johannes Itten

Johannes Itten (Suedernlinden, 11 novembre 1888 – Zurigo, 27 maggio 1967) è stato un pittore, designer e scrittore svizzero che fece parte della scuola del Bauhaus, ricordato come teorico del colore.
Dopo il liceo, dal 1904 al 1908 studiò per diventare maestro elementare. Nel 1913, dopo aver insegnato alcuni anni si iscrisse all'accademia di belle arti di Stoccarda dove fu allievo di Adolf Hölzel. Nel 1919 Walter Gropius lo chiamò ad insegnare al Bauhaus.

Seguace della dottrina Mazdaznan, di recente creazione, applicò i principi spirituali alla singolare impostazione didattica del corso propedeutico (Vorkurs) affidatogli da Gropius nell'ottobre del 1920: corso di sei mesi preliminare all'accesso alla scuola del Bauhaus. L'acuirsi delle divergenze di intendimenti fra il razionale Gropius e l'"irrazionale" Itten portarono nel 1923 all'abbandono di questi della scuola di Weimar. Fu però notevole il segno lasciato dal giovane, ascetico maestro svizzero, che insegnava a liberare l'energia creativa e a indirizzarla verso la meta di una forma energetica e simbolica da esprimere in un'immagine, o in un oggetto. "La capacità di vivere un oggetto - sosteneva del resto Itten - è una facoltà spirituale".

Tra i suoi dipinti, i più rappresentativi sono considerati Risonanza verde-azzurro (1916), Ritratto di un bambino (1922) e Luce ampia (1963). Uno dei suoi allievi più celebri fu Hans George Helm.

Opere

  • Analysen alter Meister, in Utopia. Dokumente der Wirklichkeit, a cura di Bruno Maria Adler, Weimar, Utopia Verlag, 1921.
  • Kunst der Farbe, Ravensburg, Otto Maier Verlag, 1961.
  • Mein Vorkurs am Bauhaus, Gestaltungs- und Formenlehre, Ravensburg, Otto Maier Verlag, 1963.
  • Elemente der Bildenden Kunst. Studienausgabe des Tagebuchs, E. A. Seemann Verlag Kunst und Gestaltung. ISBN 3-363-00777-9.

Bibliografia

  • Johannes Itten, Arte del colore. Esperienza soggettiva e conoscenza oggettiva come vie per l'arte, Milano, Il Saggiatore, 1965 (edizioni successive).

da it.Wikipedia

◦⦆─────⦅◦

Modello cromatico fisiologico

Sfera di Itten: superfice

Sfera di Itten: interiore



Per i suoi studenti, J. Ittten ha sviluppato un modello chromatico che permette di classificare i colori secondo dei criteri evidenti e immedesimabili di visione umana.

Si basa su una sfera che sulla superfice porta i colori "puri" dai più scuri ai più chiari e nel suo interno i grigiastri di questi colori.
La superfice della sfera a colori secondo Itten si presenta:

  • polo nord il bianco
  • polo sud il nero
  • lungo l'equatore i colori puri del cerchio dei colori fisiologici
  • tra equatore e poli i colori sempre più scuriti o impalliditi

Spettro fisiologico di Itten

L' "equatore" della sfera (nel modello) è formato da dodici colori dal giallo al rosso al blù per tornare al giallo in una spece di "spettro fisiologico". In realtà si tratta di una banda continua.


Mescolo pigmentoso = fisiologico
dei colori rosso-viola RV e verde-giallo GY

Questo "spettro fisiologico" è disposto in maniera, che due colori opposti sull'equatore sono fisiologicamente "complementari" (se mescolati tra di loro si desaturano a vicenda). Significa anche, che dal mescolo pigmentoso di colori opposti o complementari risulta una "banda" di grigiastri dei due colori con al centro un grigio "incolore".


Spettro luminoso

Mescolo luminoso

Nota: l'elaborazione dei segnali visivi nel nostro cervello non segue i criteri dello spettro luminoso (arcobaleno, prismi di vetro, schermi elettronici) ma agli criteri della mescolanza pigmentosa di colori.
Paragonando poi lo spettro luminoso con quello fisiologico, si nota, che nel luminoso le tonalità tra verde e blù predominano a scapito degli altri colori secondo la nostra percezione visiva.
I colori complementari luminosi sono quindi diversi dei complementi fisiologici o pigmentosi e sono pure complementi, perché se mescolati tra di loro in forma di luce (e non come tinte) si desaturano a vicenda anche loro.

◦⦆─────⦅◦

Ricostruzione del modello per media elettronici

Per avere a disposizione un modello fisiologico anche per il lavoro sul computer, ho tentato di ricostruirlo a questo scopo (con parecchie difficoltà): la fisiologia visiva umana pare che non esiste in informatica; almeno non ho trovato quasi nulla in merito sul web.

Visto che il computer richiede delle notazioni numeriche e che tutte le trasformazioni necessarie si riferiscono sul sistema luminoso mi è rimasto solo la strada di fare delle tavolozze sistematiche che permettono delle interpolazioni a portata di mano (maggiormente luminose) assai affidabili. Si basano sulla seguente ricostruzione:

Emisfere e intersezione equatoriale

Intersezioni settentrionali

Intersezioni meridionali

La scelta dei dodici colori saturi di "appoggio" è discutibile: non esistono a mio sapere dei precisi dati all'incirca, così che la proposta è e rimane "pseudopigmentosa" e approssimata.
Spero vivemente che un qualche matematico trovi una funzione anche approssimativa di trasformazione tra luminoso e fisiologico e che un qualche informatico si metta a creare i necessari strumenti praticabili per un laico.

Per intanto e finché siano realizzati questi miei desideri potete aiutarvi con le seguenti tavolozze e regole per l'uso artigianale dei colori anche sul web.

Tavolozze di colori fisiologici

Per finire mi sono deciso a creare una serie di tavolozze che rappresentano, almeno grossolanamente, le mie intenzioni in merito e che possano essere anche riproducibili. Per questo mi sono basato sull'opera didattica di Johannes Itten e sull'istruzione di Verena Anderegg che tanti anni fa ha formato i miei modelli personali dei colori.

È stato un lavoro lungo e faticoso:

  • dall'identificazione numerica dei colori di Itten
  • agli strumenti di elaborazione informatica approssimativa
  • alla costruzione di tavolozze usabili in rete, (perché ogni sfumatura dev'essere calcolata e rappresentata per la rete in modo razionale. fino alla
  • la descrizione di procedure di simulazione informatica accessibile anche ai non informatici.

Il risultato sarà discutibile, ma almeno ho fatto sì che ci sia, al di là del vigente bricolage qualunquistico, un primo approccio verso un artigianato razionale e immedesimabile.

Le ca. 30 tavolozze sono situate su Picasaweb da dove possono essere liberamente scaricate usando i seguenti links:

Le tavolozze "pure" e "graduali" sono pensate per l'uso con un ColorPicker mentre le tavolozze "numeriche" servono come base per ulteriori mischi "aritmetici" p.es. con ColorBlender.

  • Spettri
    • spettro e complementi fisiologici
    • trasformazione spettri
  • caratteristiche del sistema YRB in relazione al sistemi HSB

Per il mio lavoro pratico preferisco le precedenti tre tavolozze che ho integrato nelle tavolozze del sistema informatico: la prima per scegliere un accordo principale per l'immagine, il secondo per determinare colori principali più o meno luminosi / saturi, la terza per la scelta dei grigiastri.


Notazione HSB

Notazione HSB

Inoltre mi piacciono perché mi permettono di immaginare un colore come lo fa un pittore: la tonalità, la saturazione (aggiunta di bianco) e la luminosità (aggiunta di nero).

Sulle tavolozze di sistema del mio computer si trova una "tavolozza cursore HSB" (o HSV) che permette di usare questo tipo di notazione come p.es. ...

3.  La paletta di Itten

Per costruirmi la paletta di Itten mi sono basato sul giallo - rosso - bluYRB (invece che sul rosso - verde - blu → RGB del web) e ho usato i colori ricostruiti e misurati di Itten (invece di quelli definiti dagli esperti del web):

  •  giallo  #fafe20 (un pò più scuro di #ffff00 del web)
  •  rosso   #f71412 (un pò più scuro di #ff0000 del web)
  •  blu     #2905d0 (un pò più scuro di #0000ff del web)

Su questa base ho calcolato i colori intermedi in modo da potermi fare un cerchio di colori saturi, sempre secondo Itten. Già che c'ero ho fatto anche i calcoli per i colori basilari non saturi con l'aggiunta di 50% di bianco e 50% di nero che dà i seguenti risultati.

Naturalmente queste scale di colori si maneggia in realtà come i colori di uno spettro ed i colori possono essere continuamente scuriti con più o meno nero, schiariti con più o meno bianco e "ingrigiti" con le diverse tonalità di bianco/nero in qualsiasi quantità.


Colori YRB Itten saturo S
s100 l100
50%W
s50 l100
50%N
s100 l50
Y giallo fafe20 fafe8f 7f7f10
YO giallo-arancio fbc51b fde18f 7d620d
O arancio f88b16 fbc58a 7c450b
OR arancio-rosso f85014 fba789 7b270a
R rosso f71412 fb8988 7b0a09
RV rosso-viola c20e4f e086a7 600727
V viola 8c088c c583c5 460246
VB viola-blù 5b07ae ac82d6 2d0357
B blù 2905d0 9482e7 140368
BG blù-verde 266a70 92b4b7 133538
G verde 23cf10 91e787 116708
GY verde-giallo 91e718 c7f28b 48730c


La ruota "numerica" cui sopra permette inoltre di simulare sullo schermo dei colori fisiologicamente soddisfacenti e degli accordi e complementi armoniosi: tramite interpolazioni con semplici operazioni aritmetiche. Visto che è un lavoro impegnativo e noioso, l'ho eseguito nelle seguenti tavolozze che danno abbastanza punti di riferimento per potersi costruire ulteriori sfumature nell'ambito di questo spazio di colore "pseudopigmentoso".

Sono poi descritti i trucchi e gli strumenti per un lavoro efficace ed affidabile che garantisce un solido lavoro artigianale.

4.  Colori puri

Visto che i cerchi di colori non sono al massimo pratici per il lavoro in web, ho ricostruito anzitutto una tavolozza dei dodici colori puri secondo J. Itten con una scala di saturazione (20, 40, 60, 80 %W) e una di luminosità (20, 40, 60, 80 %N):

Per l'uso immediato della tavolozza conviene o:

  1. servirsi del programmino Pipette® come descritto di seguito. I valori raggiunti in questo modo non sono matematicamente esatti ma ad occhio danno un approccio non distinguibile dal valore preciso, oppure
  2. di calcolarsi dei valori intermedi (tra due caselle) usando il ColorBlender, oppure
  3. integrare questa tavolozza nelle tavolozze del proprio sistema Integrazione.


Le relative "ruote" delle emisfere sarebbero:


Emisfera scura meridionale

Emisfera chiara settentrionale


5.  Colori fisiologicamente complementari


Complementi luminosi e fisiologici

La percezione umana dei colori è tale per cui le radiazioni monocromatiche (o "tinte"), che sono le componenti di ogni colore percepito, sono organizzate dal sistema occhio-cervello a coppie di tinte opposte.
L'essere opposte di due tinte è dovuto ad un fatto prettamente fisiologico: colori opposti danno risposte opposte da parte di determinati recettori dell'occhio.

In pittura due colori si dicono complementari sottrattivi se mescolati tra di loro si desaturano a vicenda, fino a poter ottenere il grigio. it.Wikipedia

Mi sono poi chiesto, quali siano i complementi fisiologici e ho notato, che corrispondono molto di più ai complementi "pigmentosi" che ai complementi "luminosi". E l'opera più convincente in merito è di J. Itten: Arte del colore.
Di conseguenza mi sono messo all'opera di ricostruire i "colori dell'Itten" per il web, per avere a disposizione un modello di colori fisiologicamente accettabile anche per il mio giornaliero lavoro.

Il fatto che il complemento fisiologico di un colore non corrisponde al complemento luminoso dei schermi era un grosso problema da risolvere in questo testo, tanto di più, che non ho trovato sul web nessun'accenno su questo tema. E le procedure per trasformare il fatto fisiologico in notazione "luminosa" della rete era il secondo punto cruciale.
Ha delle notevoli conseguenze sul lavoro grafico in rete, perché i soliti e praticissimi meccanismi automatizzati per la combinazione e il mischio di colori si basano senza eccezione sul principio luminoso che fisiologicamente non tiene.


Sfera di colori, interno
fisiologici

Sezione trasversale equatoriale:
colori complementari
Chi intende rispettare le caratteristiche fisiologiche nel proprio lavoro grafico è quindi costretto
  • a capire bene le differenze e in seguito di
  • disporre di "trucchi" di aprossimazione e interpolazione.


Di seguito le sei sezioni longitudinali dei dodici colori complementari: verso l'alto i chiarimenti, verso il fondo gli scurimenti e verso il perno l'ingrigimento:


Y-V

YO-VB

O-B

OR-BG

R-G

RV-GY

Per fare delle interpolazioni tra i dodici colori basilari e i loro complementari serve uno spettro scalato.

Mi sono deciso per una scala rotatoria in 360°. Ogni 30° comincia uno dei dodici colori. Le interpolazioni tra i colori si fanno con un ColorPicker o anche per interpolazione luminosa tra due colori vicini numericamente noti. L'unico grattacapo potrebbe essere il complementare: basta ricordarsi che colore e complemento in questa scala sono opposti a 180°. L'angolo del complemento è quindi 180° + l'angolo del colore.

Esempio: si sceglie un colore tra arancio O a 2/3 verso l'arancio-rosso OR.
L'arancio corrisponde a 60° e il nuovo colore 60°+ (2/3x30°) = 80°. Il complemento è quindi 180° + 80° = 260°. È quindi il colore 20° a destra del blu verso il blu-verde.
Con il ColorBlender è facile fare una scala tra arancio F88B16 e arancio-rosso F85014 che a due terzi fornisce il colore F86415. Lo stesso vale per il complemento tra blu 2905D0 e blu-verde 266A70 che a due terzi fornisce il colore 274890.
Il grigio complementare delle due è quello dei complementi saturi 6f6c6e in modo che abbiamo tre punti fissi per interpolazioni di saturazione, luminosità e ingrigiamento:

F86415 6f6c6e 274890

Impegnativo, direte. Non l'avete mai fatto con un pennello!

6.  Accordi di colori

Accordi RBG (Web) e YRB (secondo Itten)

"Accordi" luminosii

Accordi fisiologicamente armoniosi

Di accordi di colori ce ne sono innumerevoli ma pochi fisiologicamente armoniosi. Un'accordo è percepito come armonioso, se la combinazione pigmentosa dei colori coinvolti darebbe un grigio corrispondente alla luminosità della combinazione.

Fin'ora, queste combinazioni non sono fisicamente / matematicamente descritte, perché come spesso la fisiologia non ci fa il favore di seguire delle semplici regole fisiche.

Di "accordi" in questo senso ce ne sono tre tipi:

  • accordo duplice (complementare pigmentoso / fisiologico) che nel cerchio dei colori sono opposti (180° nella ruota)
  • accordo triplice che nel cercio dei colori pigmentosi formano un triangolo equilatero (120° nella ruota)
  • accordo quadruplo che nel cerchio dei colori pigmentosi formano un quadrato (90° nella ruota)

Riferito sul nostro cerchio di dodici colori significa sei accordi complementari, quattro triplici e tre quadrupli. L'immagine sopra li fa vedere per i dodici colori puri e saturi.

Ma valgono anche per tutte le tonalità intermediaria e tutte le variazioni di luminosità (aggiunta di bianco o nero pigmentoso). Sono percepiti come armoniosi anche variazioni di luminosità tra i colori di un'accordo.

◦⦆─────⦅◦

Accordi armoniosi e dissonanze

"Armonia" e dissonanza RGB

Armonia e dissonanza YRB

Ciò non significa, che un'opera grafica debba essere solo armoniosa: diventa facilmente noiosa. Come dice Ingeborg Lüscher o Friedrich Weinreb: ci vuole almeno un'elemento che disturba l'armonia. Ma questo è molto diverso di una "cacofonia" grafica.

A proposito: l'accordo "canonico" in RGB non richiederebbe la dissonanza in turchese, perché per il mio occhio è già sufficentemente dissonante com'è: verde e rosso formano fisiologicamente un'accordo duplice (complementare) al quale il blù è dissonante.

Anche come "dissonanza" preferisco di non introdurre un qualsiasi colore ma per esempio in un'accordo triplico un complemento di uno dei tre colori oppure in un accordo duplice o quadruplo un triplo di uno dei colori coinvolti.

◦⦆─────⦅◦

Uso degli esempi di applicazione

Nei seguenti capitoletti sono inclusi sempre due esempi di applicazione che sono facilmente da ampliare su ColourLovers. Gli esempi sono fatti:

  • con cinque tinte diverse appartenenti allo specifico accordo
  • uno con delle tinte piùttosto scure e grigiastri
  • l'altro con delle tinte piùttosto chiare, pure e con un colore di dissonanza

Gli esempi rendono l'idea solo se sono ingranditi (cliccare sull'immagine). Le tinte scelte per un esempio si possono vedere cliccando sui links Esempio e dissonanza

7.  Accordi duplici


Accordi duplici sono tutti complementari fisiologici.
Come tinte sono combinabili tutti i chiarimenti, scurimenti, ingrigiamenti della coppia di colori coinvolti e quindi tutti colori contenuti in un "pilastro" come di fianco.

La tavolozza dei colori complementari graduale a fianco è un ottimo strumento per identificare dei colori puri e impuri "pigmentosimili" in tante tonalità.

Cliccando sull'immagine appare un ingrandimento che permette di scegliere tramite un ColorPicker delle sfumature abbastanza autentiche. Delle interpolazioni aritmetiche luminose (p.es. con ColorBlender) sono ammissibilisenza errori visivi:

  • tra due bande vicine nello stesso gruppo
  • lungo una banda ma mai andando oltre la metà verticale

Per i seguenti esempi non ho usato dei criteri estetici bensì didattici. Per le applicazioni ho creato degli ipotetici campioni di tessili.







giallo Y viola V

G-V : Esempio

Applicazione
con dissonanza G

Applicazione dell'esempio
come ornamento









giallo-arancio YO viola-blù VB

GA-VB: Esempio

Applicazione dell'esempio
come ornamento

Applicazione
con dissonanza RV









arancio O blù B

O-B: Esempio

Applicazione
con dissonanza RV

Applicazione dell'esempio
come ornamento









arancio-rosso OR blù-verde BG

OR-BG: Esempio

Applicazione
con dissonanza VY

Applicazione dell'esempio
come ornamento









rosso R verde G

R-G: Esempio

Applicazione
con dissonanza Y

Applicazione dell'esempio
come ornamento









rosso-viola RV verde-giallo GY

RV-GY: Esempio

Applicazione
con dissonanza BG

Applicazione dell'esempio
come ornamento









8.  Accordi triplici


Variazioni di luminosità

Accordi triplici danno l'impressione "armoniosa", perché il cervello genera l'impressione di un equilibrio (grigio) complementare. Si possono giocare con tutte le sfumature di luminosità e saturazione senza perdere il nesso con il tema basilare.

Si può aumentare la tensione di percezione aggiungendo un colore "dissonante" all'accordo. Come dissonanza nei seguenti esempi di applicazione ho sempre scelto una tinta complementare a uno dei colori dell'accordo armonioso.







Accordo Y-R-B

giallo | rosso | blu


Y-R-B: Esempio

Applicazione
con dissonanza G

Applicazione dell'esempio
come ornamento








Accordo YO-RV-BG

giallo-arancio | rosso-viola | blu-verde


Applicazione
con dissonanza VB

Applicazione dell'esempio
come ornamento

YO-RV-BG Esempio








Accordo O-V-G

arancio | viola | verde


O-V-G: Esempio

Applicazione dell'esempio
come ornamento

Applicazione
con dissonanza B








Accordo OR-VB-GY

arancio-rosso | viola-blu | verde-giallo


Applicazione
con dissonanza BG

Applicazione dell'esempio
come ornamento

OR-VB-GY: Esempio








9.  Accordi quadrupli


Accordi quadrupli

Negli accordi quadrupli sono contenuti due accordi complementari. Questo permette di usare colori impuri come accordi regolari.







Accordo Y-OR-V-BG

giallo | arancio-rosso | viola | blu-verde


Y-OR-V-BG: Esempio

Applicazione con
dissonanza B

Applicazione dell'esempio
come ornamento









YO-R-VB-G

giallo-arancio | rosso | viola-blu | verde








O-RV-B-GY

arancio | rosso-viola | blu | verde-giallo








10.  Percorsi cromatici

Per dei mischi e dei percorsi cromatici c`è un metodo di interpolazione un pò scomodo ma abbastanza affidabile usando invece dell'aritmetica RGB quella di HSB.

La notazione dei colori luminosi HSB è basato su un modello sferico: H: "Hue" → tonalià; S: "saturation" → saturazione; B: "Brightness" → luminosità.
La tonalità è definita in coordinate polari (gradi) da 1 ... 360 cominciando dal rosso puro #ff0000 in senso antiorario seguendo lo spettro luminoso fino a tornare al rosso a 360°.
La saturazione è definita come quantità percentuale di colore (tonalità) partendo dal centro della sfera verso la periferia da 0 ... 100%.
La luminosità è definita come quantità percentuale di luce partendo dal fondo della sfera all'apice da 0 ... 100%.
Con questa notazione si riesce a descrivere ogni punto della sfera (colore) con un triplo di numeri. P.es. RSB(0°,100%,100%) significa "rosso puro".
Si può naturalmente eseguire la normale aritmetica con questi tripli di cifre, p.es. determinare un mescolo tra due qualsiasi colori. In più ci sono


Percorso cromatico

Ampliando la procedura di una dimensione, si riesce ad aprossimare dei percorsi tra qualsiasi colori contenuti nella sfera dei colori, eseguendo delle interpolazioni tra i tre parametri della notazione HSB (Hue, saturation, brightness) tonalità, saturazione e luminosità: descrivono abbatanza fedelmente i tre parametri della sfera: longitudine, latitudine e distanza dal perno. Il calcolo stesso è banale aritmetica e trasformazioni tra HexRGB e HSB. Senza entrare nel dettaglio, il grafico di fianco dovrebbe svelare agli interessati il "modo d'uso".


Interpolazione luminosa

Interpolazione fisiologica

Malauguratamente essendo l'interpolazione luminosa, il risultato può essere poco soddifacente, perché l'interpolazione segue il percorso dello spettro luminoso con la noiosa predominanza di "verde-blù" a scapito degli altri colori.


Trasformazione di spettri

Interpolazione fisiol. inversa

Il risultato migliora, se si trasformano per i punti cardini gli angoli dello spettro fisiologico in angoli dello spettro luminoso mantenendo la saturazione e la luminosità. Poi si fa l'interpolazione e si ritrasformano gli angoli fisiologici raggiunti così in angoli luminosi. Solo in seguito si ritrasforma in RGB.

Si nota anche che il percorso fisiologico V-R-O-Y è l'incontrario delle convenzioni luminose che riportano V-B-G-Y (senso orario vs. senso antiorario). Chi intende colcolare il percorso antiorario, faccia semplicemente l'interpolazione all'inverso.

Chi non capisce, lasci perdere.

11.  Simulazione di mischi pigmentosi

Per gli interessati un grafico che permette la trasformazione di colori fisiologici Itten in notazione HSB e inverso, perché la notazione RGB è malpratico per il lavoro con i colori fisiologici, mentre HSB e RGB sono facilmente trasformabili l'uno nell'altro.

Come esempio ho scelto il mischio di giallo Y e blù B "puri" secondo Itten. Di seguito la procedura calcolatoria con strumenti e illustrazioni:

Abbreviazioni: Ø → valore medio di due numeri; * → moltiplicazione; # → segno per seguente numero esadecimale dei colori del web.

  1. Traformazione hex → HSB

hexRGB → HSB
Clr1: #fafe20 → HSB(61,87,100)
Clr2: #2905d0 → HSB(251,98,82)

  1. Valori medi HSB
#00e37e

Trasformazione di
tonalità H Itten <=> HSB
  1. Spettro HSB ↔ spettro Itten

Tonalità media Itten: H → HItten
H1,H2 → øH1,H2 → H3=240+60=300° →
HItten=300° → H=113°

#00ff00



  1. Saturazione S

S= øS*(1-a)
a= sinβ/2*tanβ/4= sin60°*tan30°= 0.866*0.577= 0.5
1-a= 1-0.5= 0.5
øS= (98+87)/2= 185/2= 92.5 → 0.93
S= 0.93*0.5= 0.47
#7eff72

  1. Luminosità B

B= 1-(ØB*a)
ØB= 0.91; a= 0.5
B= 1-(0.91*0.5)= 1-0.46= 0.54
#3d7737

  1. Traformazione HSB → hex

HSB(113,50,67) → hexRGB: #4a9b42


Spero vivemente che un qualche programmatore trasformi questo scomodo calcolo in un ingenio che mi permette di introdurre due colori in esadecimali e che mi ritorna il valore medio simulato di un'accettabile mescolo pigmentoso.
Quanto ho controllato con penello e paletta il risultato concreto del calcolo cui sopra ero soddisfatto di vedere dei colori corrispondenti - dei verdi - invece delle sfumature violastre e aranciastre di un mescolo luminoso. 8>)__

12.  Uso delle tavolozze


Paletta colori complementari

Paletta colori puri graduali

La mia paletta consiste in 12 colori basilari secondo J. Itten, tutte le loro sfumatura verso bianco, nero e tutti grigi e delle mescolanze pseudopigmentose tra di loro.


Secondo il compito da svolgere preferisco delle tavolozze discreti o graduali.

Normalmente uso le tavolozze a vista, se è necessario per delle interpolazioni o per stilare dei documenti in .html o Wiki, uso (per forza) dei valori numerici.

Sono trattati i seguenti argomenti:
Integrazione delle palette Uso ad hoc Interpolazioni Palette individuali

Integrazione delle palette

Sono trattati i seguenti argomenti:
Integrazione nel sistema Integrazione in programmi


Integrazione nel sistema

L'integrazione di palette proprie nel sistema è semplicissimo sul mio computer (Mac). Quanto lo sia su altri sistemi e come si fa non so. Se si rivolge al venditore del sistema, dovrebbe essere in grado di consigliare.

Preparazione: caricare tavolozze dal web
Bisogna disporre (fare) di una cartelle che contiene dei files immagini delle tavolozze da integrare. Ho preparato dei links di diverse tavolozze utili secondo Itten, le quali possono essere scaricate dal web. Personalmente li ho poi messi in una cartella "Tavolozze". Si tratta dei seguenti files:

Ognuno si può fare la sua scelta dalle ca. 30 tavolozze elencate sotto → Tavolozze

Integrazione:
Il metodo più facile per integrare una nuova tavolozza nel sistema (Mac) è la seguente:

  • si apre un file in un programma che usa dei colori del sistema (MacMail, Word, ...). Ho usato Word per la dimostrazione seguente:

  • apro un documento in word, scelgo e marco una parte del testo
  • vado nel menù alla funzione "colore testo" la scelgo e poi "altri (colori)": si apre il "PopUp" (finestrina) per i colori di sistema.
  • scelgo quella con il "prisma": si apre il finestrino con la tavolozza del prisma
  • in fondo della finestrina c`è una casella "Paletta" dalla quale si sceglie "Nuovo dal registro":



  • si apre la casella per scegliere un file. Le tavolozze ho salvato nella cartella "Palette" delle quali scelgo "FarbkreisItten1961pure.png" e poi il comando per l'importazione.

  • la tavolozza è importata e sta a disposizione per tutte le applicazioni che usano il finestrino del sistema per scegliere i colori.
  • ovunque si clicca, appare il relativo colore nella casella in cima e sul comando "ok" va infilato nella parte marcata dell'applicazione.

  • Si può rinominare la tavolozza nella casella "Paletta" in fondo al finestrino



Naturalmente si può integrare diverse tavolozze. Per il mio proprio uso ho infilate quelli che si vedono sull'immagine a fianco (clic per ingrandire).

◦⦆─────⦅◦

Integrazione in programmi

Se un programma non usa le tavolozze del sistema ma una tavolozza propria, al solito è possibile di modificare quest'ultima: normalmente tramite la funzione "Preferenze" del programma stesso.


modifica tavolozza excellMac

Come esempi le illustrazioni per "Excell" e "NeoOffice":

  • in excell bisogna salvare la pagina come modulo dopo aver fatto i cambiamenti e aprire come "nuovo documento" questa pagina per avere accesso alla nuova paletta.

modifica tavolozza NeoOffice
  • in NeoOffice si può invece stabilire la tavolozza dei colori per tutti sottopragrammi definendo i valori decimali RGB per ogni colore


Uso ad hoc
Numeri di colori

Come notazione di colori sono usati maggiormente i sistemi:
hex, RGB, HTML
CMYK
HSV, HSB

ColorPickers
Mac ColorPicker

Nei sistemi Mac ci sono integrati delle tavolozze nel sistema. Si attivano automaticamente per determinate applicazioni (p.es. .graffle) e sono attivabili in ogni momento tramite l'applicazione <TextEdit> e i tasti ⇧⌘C.


Attivare tavolozze

Uso del ColorPicker Mac



Nelle tavolozze di sistema Mac è integrato un ColorPicker: cliccando sul simbolo "lente" appare una lente al posto del puntatore. Muovendolo sopra lo schermo si può scegliere un determinato colore cliccando su di esso. Il numero corrispondente appare nella casella della tavolozza e se era prescelto una parte di testo modifica il testo nel colore. Altrimenti si può copiare il numero e incollarlo ovunque.

Pixie®

Sistemi Microsoft: http://www.nattyware.com/pixie.php

Pixie is a utility made especially for webmasters and designers. It is a color picker with few extra goodies.

Run it, simply point to a color and it will tell you the hex, RGB, HTML, CMYK and HSV values of that color. You can then use these values to reproduce the selected color in your favorite programs. Pixie will also show the current coordinates of your mouse pointer.

It is the only tool for you to work with colors.

Palette®

Sistemi Mac
Per trovare i valori intermedi su questa tavolozza si usa uno strumento molto pratico:


Pipette®
  • un programmino gratuito per l'indicazione di colori sullo schermo in valori esadecimali: personalmente uso Pipette della ditta CharcoalDesign®.

Agli interessati consiglio vivamente di scaricare e installare questo o un simile programmino.

◦⦆─────⦅◦

Interpolazioni

Per una paletta di colori pseudopigmentosi (fisiologici) sul web servono delle interpolazioni facilmente eseguibili ed accettabili come risultato ottico.


Interpolazioni fini e grossolane

Questo funziona senza problemi per il chiarimento, lo scurimento e l'ingigiamento di colori, eseguendo virtuali mischi aritmetici luminosi percentuali del colore con bianco W (#ffffff), nero N (#000000) o delle gradazioni di grigio K (#xxxxxx) come descritto in "Aritmetica dei colori".

Per le tonalità, un mischio luminoso da dei risultati soddisfacenti solo per due colori vicini del massimo di un dodicesimo del cerchio, p.es. tra arancio O e giallo-arancio YO. Per delle tonalità più distanti, l'interpolazione è invece troppo imprecisa.

Il seguente programmino ColorBlender permette di automatizzare queste procedure:

Con il programma ColorBlender si digitano i valori dei due colori nelle due caselle. Scegliendo più di un intermedio, si raggiunge una scala di mischi a scelta senza alcun calcolo. Il calcolo è "luminoso"; per interpolazioni fisiologicamente accettabili conviene di solo usare caselle "vicine" delle tavolozze di Itten!

Si può anche usarlo per chiarire, scurire o per ingrigire un colore, digitando nella seconda casella il valore per il bianco o per il nero o per il grigio.

Per avere un esemplare di ColorBlender sulla scrivania indipendentemente da altri files ho fatto un "PopUp" cliccabile:

Esempi di interpolazione con ColorBlender

Chiarimento
 

Scurimento
 

Ingrigimento medio
 

Ingrigimento pallido
 

Tonalità scala 25%
 

Tonalità pallida scala 10%
 

Tonalità scura scala 10%
 

Mischi tra colori chiariti
 

Interpolazione problematica
 

Palette individuali
Cambio di notazioni

Ce ne sono diversi metodi di notazione per dei colori nel web. La più divulgata è la notazione esadecimale triplica. Ha il vantaggio che si può inconfondibillmente definire più di sei millioni di colori con solo sei cifre e che i numeri sono usabili per dei calcoli numerici. Lo svantaggio è, che sono difficilmente immaginabili per il neofita.

Un paio di esempi "canonici" per un rosso fd0000 :

  • NSColor *aColor = [NSColor colorWithCalibratedRed:0.996 green:0.000 blue:0.000 alpha:1.000];
  • CGColorRef aColor = CGColorCreateGenericRGB(0.996, 0.000, 0.000, 1.000);
  • UIColor *aColor = [UIColor colorWithRed:0.996 green:0.000 blue:0.000 alpha:1.000];
  • html: "#fd0000"
  • CSS: rgb(253, 0, 0)

Personalmente mi servo della notazione htmlHex# e per immaginarmi il colore della notazione HSB(1,93,97) (tonalità 1°, saturazione 93%, luminosità 97%)

Per trasformare la notazione mi servo del

  • ColorBlender per cambiare tra Hex ↔ RGB ↔ RGB%
  • delle tavolozze del mio sistema per cambiare le notazioni, perché il colore impostato rimane mentre la tavolozza e con essa la notazione cambia.
Programmi utili

Ruote fisiologiche

L'unico programma che ho trovato sul mercato che tenta di simulare la visione fisiologica è il ColorSchemer. Malauguratamente si base sullo spettro luminoso il che lascia predominare naturalmente le tinte verde-blù a scapito di giallo-rosso. Ma i complementi e gli altri accordi sono comunque più vicini alla percezione fisiologica che alle regole fisiche luminose.

L'immagine a fianco dimostra le differenze al modello di J. Itten. Malgrado le differenze mi ha aiutato parecchio nel mio lavoro grafico e vale la pena di spendere i 50$ per disporre di uno strumento versatile.

13.  Allegati

13.1  Sitografia

13.2  Bibliografia

13.3  Immagini

13.4  Commenti

alla pagina Colori / Colori di J. Itten: ev. cliccare sul titolo per stilare un commento

Commento 
Autore 
Enter code 915

Edit - History - Print - Recent Changes - Search
Page last modified on November 11, 2012, at 02:28 PM