Recent Changes - Search:

Pagine di servizio

Gruppi

Pagine in allestimento

Strumenti

Domini correlati

PmWiki

pmwiki.org

edit SideBar

Modello cromatico di J. Itten

P. Forster

a cura di D. Rüegg

Verniciatore

Imbianchino

Ho stilato questa pagina come servizio agli artigiani delle tinte pigmentose che nell'era informatica sono trattati da orfani.


Tipografia

Architettura




Il web usa giustamente dei colori e dei mescoli additivi (luminosi) dove blu e giallo risultano grigio, mentre gli artigiani delle tinte usano un sistema e dei mescoli sottrattivi (pigmentosi) dove blu e giallo risultano verde.
Ad eccezione delle arti tipografiche che si servono del sistema CMYK (sottrattivo) mancano testi sull'avvicinamento ai pigmenti con strumenti digitali, numerici. Questo intralciava il mio lavoro grafico perché i miei modelli mentali cromatici sono pigmentosi (dove da blu e giallo risultano verde e il giallo non è composto da rosso e verde).


Eric A. Meyer

Siccome l'uso di colori sul web è determinato numericamente e maggiormente da notazione RGB (rosso-verde-blu) esadecimale dei colori, mi sono servito di questo sistema. Al neofita consiglio quindi una breve introduzione in questo sistema notativo / numerico per approfondire le seguenti spiegazioni.
Per fortuna, Eric A. Meyer con la sua praticissima e affidabile calcolatrice ColorBlender ci mette a disposizione uno strumento che ci risparmia noiosissimi calcoli "criptici".

1.  Johannes Itten

Johannes Itten (1888 - 1967) fu pittore e pedagogo delle arti visive. Sviluppò un modello cromatico sottrativo che serve ancora oggi per la creazione di colori sia virtuali che artigianali. "Sottrativo" significa, che delle tinte vengono mescolate pigmentosamente (i colori additivi richiedono altri modelli e si comportano diversamente nella loro mescolanza luminosa).

◦⦆─────⦅◦

1.1  Il modello cromatico a sfera


Ruota cromatica di Itten

Concetto sferico

Tra tanti altri strumenti didattici sviluppò un modello cromatico sferico.

Si basa su tre tinte fondamentali (primarie): giallo Y, rosso R e blu B, tre tinte secondarie (complementari alle primarie) viola V, verde G e arancione O. Le sei tinte terziarie: giallo-arancione Yo, arancione-rosso Or, rosso-viola Rv, viola-blu Vb, blu-verde Bg e verde-giallo Gy.


Rotazione terrestre


Elementi della sfera

Per il suo modello, J. Itten usava una sfera simile a un globo geografico e disponeva sulla superfice le sue tinte secondo determinati criteri.

Il vantaggio della sfera è che si riesce a determinare, con una coordinata per latitudine e una per la longitudine, un posto esatto che corrisponde poi a una tinta ev. chiarita con il bianco oppure scurita con il nero.

Itten immaginava poi il centro della sfera come grigio medio neutro e l'interno della sfera come i grigiastri dei colori superficiali in tutte le variazioni.

Di seguito tento di descrivere questo modello, in modo che possa servire, come ha spesso servito a me, per memorizzare delle tinte e per poi poterle riprodurre.

◦⦆─────⦅◦

1.2  Ricostruzione del modello Itten

Ho lavorato allo scopo di ricostruire sul mio computerino il modello e il concetto cromatico (di colori e tinte) di Itten.


Modello di J. Itten ricostruito

Si sono posti diversi problemi:

  • la determinazione delle dodici tonalità basilari di Itten e la loro quantificazione in notazione del web (esadecimale, RGB, HSB, ...)
  • la deduzione di scale di chiarimento e di scurimento e la loro quantificazione
  • la deduzione di scale di grigiastri secondo criteri sottrattivi nel concetto di Itten e la loro quantificazione.

Mescoli cromatici
additivi e sottrativi

Il problema può apparire banale ma in verità non lo è per niente: mescolando due colori come luci (p.es. su uno schermo) e le stesse tinte come pigmenti (p.es. con un pennello) si raggiungono due risultati diversi. P.es. giallo e blu pigmentosi forniscono verde, mentre giallo e blu luminonosi forniscono grigio (È facilmente controllabile con matite colorate e con un gradiente sullo schermo da blu a giallo).


Pigmenti e luci

Visto che il mescolo dei colori è un'operazione elementare del relativo lavoro, non si trattava solo di una ricostruzione ma anche di un tentativo di integrare delle esigenze pittoriche nel lavoro digitale: esperienza soggettiva e conoscenza oggettiva come vie per l'arte.


◦⦆─────⦅◦

1.3  Gabole sistemiche



Senza entrare in dettaglio, si nota che lo spettro solare e lo spettro di RGB sono abbastanza diversi: l'ambito blu-verde fino a verde-giallo occupa il doppio di spazio in RGB rispetto allo spettro solare a scapito dello spazio giallo fino al rosso.

Questo causa lo "sfasamento" dei complementi e la "distorsione" delle scale cromatiche tra Itten (che è molto vicino allo spettro solare) e RGB che è una convenzione della CIE (la Commissione internazionale per l'illuminazione o Commission Internationale de l'Éclairage è l'autorità internazionale sulla luce, l'illuminazione, il colore e gli spazi colori.).

Visto che lo spettro solare non è completo (manca il magenta come osservò già Newton) e a mio sapere non esiste una normativa in merito, è impossibile trasformare (in generale) fedelmente delle tinte pigmentose in colori luminosi e viceversa. Ho quindi definito come referenza le tinte di Itten ricostruite e creato delle funzioni di trasformazione relative al sistema RGB. Questo per usufruire dei necessari strumenti matematici onde stilare il modello di Itten in linguaggio web per le ca. 600 tinte che mi ero prefissato.

2.  La superfice della sfera cromatica


Come coordinate per la superfice del modello ricostruito ho usato evidentemente

  • per le longitudini, le dodici tinte basilari e
  • per le latitudini, passi da 20% a partire dall'equatore i quali diminuiscono la quantità della tinta cromatica e aumentano in proporzione il bianco (verso nord) o il nero (verso sud).


2.1  Dodici tinte principali

Queste dodici tinte principali sono disposte sull'equatore della sfera del modello.


Tinte principali


Tinte principali

Nel sistema sottrattivo di Itten, le tre tinte primarie sono giallo Y, rosso R e blu B. Le tre tinte secondarie si ottengono mescolando due tinte primarie adiacenti e le sei tinte terziarie mescolando una primaria e una secondaria adiacente.

Gli opposti delle tinte si chiamano complementi sottrattivi o pigmentosi (come p.es. giallo Y e viola V o blu B e arrancione O o rosso R e verde G). Non corrispondono ai complementi additivi o luminosi!


La ricostruzione delle tinte di J. Itten mi forniva ca. i seguenti sei valori primari e secondari esadecimali:


Ruota Itten
 
viola V
 
blu B
 
verde G
 
giallo Y
 
arancione O
 
rosso R
grigio
medio
W/K
#909391
#6e0c6f #310dfd #1eb111 #f9ff20 #f79319 #f51715
delle quali ho poi dedotto i sei valori terziari (medie leggermente corrette):
 
viola-blu Vb
 
blu-verde Bg
 
verde-giallo Gy
 
giallo-arancione Yo
 
arancione-rosso Or
 
rosso-viola Rv
#530cbf #227190 #90d117 #f8d21d #f65216 #b9124e

Ognuno può crearsi una paletta individuale, decidendosi per le sei tinte primarie e secondarie secondo il proprio occhio e gusto.
Le tinte terziarie e tutto il resto è poi deducibile numericamente con il ColorBlender.

Mi permetto di aggiungere la mia paletta preferita per il web. Le tinte (specialmente le terziarie) sono un pò più chiare e brillanti. Inoltre ho aggiunto all'incirca la terminologia del Web.


Ruota for
viola V
DarkMagenta
blu B
Blue
verde G
Lime
giallo Y
Yellow
arancione O
DarkOrange
rosso R
Red
grigio medio
W/K
Gray
#808080
#880088 #0000ff #00d90e #ffff00 #ff8000 #ff0000
viola-blu Vb Indigo blu-verde Bg Teal verde-giallo Gy Chartreuse giallo-aranc. Yo Gold arancione-rosso Or OrangeRed rosso-viola Rv MediumVioletRed
#4d0099 #007369 #99ff00 #ffbf00 #ff4000 #bf0060

Le mescolanze (numeriche sul computer) di due tinte adiacenti si fanno per calcolo delle medie p.es. con ColorBlender. P.es. da viola V #6e0c6f e blu B #310dfd risulta viola-blu Vb #500DB6. Provare!
N.B. Il valore citato nella tabella cui sopra risulta invece #530cbf, una differenza quasi non percepibile dall'occhio umano.

◦⦆─────⦅◦

2.2  Chiarimenti e scurimenti

Itten disponeva gli scurimenti e i chiarimenti sulle longitudinali delle sfera.


sulle longitudinali


Chiarimenti e scurimenti

I chiarimenti si eseguono in modo equidistante dall'equatore verso il "polo nord" che si immagina come bianco, mentre lo scurimento si esegue verso il "polo sud" che si immagina come nero.

Alle tinte principali si aggiunge il bianco o il nero.

Si procede così prima per i colori fondamentali giallo Y, rosso R e blu B e per i loro complementi viola V, verde G e arancione O per raggiungere i chiarimenti e scurimenti delle sei tinte primarie e secondarie.



Giallo

Rosso

Blu

Chiarimenti e scurimenti si fanno sul computer, mescolando numericamente una tinta con bianco #ffffff (chiarimento) o con nero #000000 (scurimento) in diverse proporzioni p.es. con ColorBlender. P.es. come chiarimento del rosso R #ff0000 in 5 passi (à 20%) risulta: #ff0000 →#ff3333→ #ff6666 → #ff9999 → #ffcccc → #ffffff. Provare!



Tinte primarie e secondarie


V-B-G-Y-O-R

chiarite e scurite


Così si arriva alle disposizione delle sei tinte principali con i loro scurimenti e chiarimenti sulla superfice della sfera del modello.

◦⦆─────⦅◦

2.3  Le tinte superficiali

Come prossimo passo si riempie il resto della superfice con le tinte intermediarie tonali, scurite e chiarite. Ho scelto come divisione longitudinale nove campi di saturazione / luminosità. Così per l'occhio umano, risultano 110 tinte superficiali equidistanti.


G - Y - O

O - R - V

V - B - G



Tavolozza visiva superficiale


Tinte superficiali



Tavolozza esadecimale

Queste rappresentazioni illustrano bene il concetto ma non sono pratiche nelle arti grafiche.

Per l'uso pratico si usano delle tavolozze che rappresentano queste tinte in modo ordinato e sistematico come ad esempio le seguenti:

  • Con le tavolozze visive si può scegliere una tinta (con una tavolozza incorporata in un'applicazione grafica) e determinare il suo valore esadecimale (con una "Pipetta" scaricabile gratuitamente dal web).
  • I valori esadecimali servono per impostare dei colori esatti a degli elementi grafici e per calcolare dei valori intermediari tra due tinte.

Attrezzati con una tavolozza basilare visiva e/o esadecimale (scaricare cui sopra) si riesce facilmente di calcolare tutte le tonalità, scurimenti, chiarimenti e ingrigimenti di qualsiasi tinta, p.es. con ColorBlender di Eric A. Meyer.

3.  L'interno della sfera cromatica


Sezione trasversale
(latitudinale, orizzontale)

Sezioni longitudinali
(assiale, polare)

Itten si immaginava l'interno della sfera occupato dalle tinte grigiastre. Questo è sensato: le tinte opposte sull'equatore, mescolate a eque parti forniscono un grigio medio neutro *.

Le immagini a sinistra dimostrano la sfera aperta orizzontalmente all'altezza dell'equatore da due lati e su sfondo bianco e nero.

L'immagine a destra simboleggia invece dei tagli longitudinali lungo l'asse della sfera.

I seguenti capitoli dimostrano i fatti in cinque tagli orizzontali (lungo delle latitudini) e in sei tagli longitudinali lungo l'asse della sfera.


"Grigi"

* In realtà pigmentosa YRB si tratta di un marrone grigiastro. Per semplificarmi il lavoro l'ho "idealizzato" nel senso della percezione fisiologica umana con un grigio medio.

◦⦆─────⦅◦

3.1  Tinte pseudocomplementari

Ho chiamato pseudocomplementari delle tinte su una linea di una sezione parallela all'equatore ed equidistanti dall'asse della sfera.

Sul taglio equatoriale le tinte non sono "pseudo-" ma complementari in senso stretto.


Tavolozze pseudocomplementari

5x poi ev. ricarica pagina:

Di seguito le rappresentazioni di cinque tagli: equatoriale, 60% e 40% nord N e sud S.

Uso la tavolozza di fianco per determinare delle tinte pseudocomplementari. Sulla pagina Tavolozze Itten si trovano anche i singoli tagli ingranditi e in moto.

Di seguito le singole tavolozze di tinte pseudocomplementari:


40% N

60% N

equatoriale

60% S

40% S

Calcolo di tinte pseudocomplementari

Delle tinte pseudocomplementari si determinano sul computer a partire di due tinte opposte sulla stessa latitudine e il grigio corrispondente alla latitudine. Si mescolano poi numericamente ciascuna tinta con il corrispondente grigio nella proporzione desiderata p.es. con ColorBlender.
P.es. volendo determinare i pseudocomplementi di blu B 40%N #adaafe si procede quanto segue:
la tinta opposta equilatitudinale è arancione O a 40%N, quindi #fcd8ab e il grigio corrispondente WK 40%N #d8d8d8.


40% N

arancione O - blu B

Mescolando numericamente il blu chiaro con il grigio chiaro in cinque passi si ottiene #adaafe → #b6b3f6 → #bebcef → #c7c6e7 → #cfcfe0 → #d8d8d8 e per arancione chiaro con grigio chiaro: #fcd8ab → #f5d8b4 → #eed8bd → #e6d8c6 → #dfd8cf → #d8d8d8.


60% S

arancione O - blu B

Un'esempio d'applicazione si trova a fianco per due pseudocomplementi di blu 40% nord B40%N e arancione 40% nord O40%N. I pseudocomplementi possono chiari o scuri (secondo la scelta della latitudine) e danno alla composizione un tocco iridizzante per via dell'effetto simultaneo (nell'esempio verso verde-giallo e rosso-viola).


◦⦆─────⦅◦

3.2  Tinte complementari

Ho chiamato assiali le tinte che si trovano su una sezione lungo l'asse della sfera.


Sezione longitudinale

5x poi ev. ricarica pagina:

Complemento

Sono importanti, in pratica perché rappresentano i complementi nel senso stretto della parola: tinte opposte nella sfera cromatica con la stessa distanza dal centro (esempio Yo ↔ Vb).



5x poi ev. ricarica pagina:

Due tinte complementari (nello stretto senso della parola) si trovano su una linea e sono equidistanti al centro della sfera.

Di seguito le tavolozze per le sei paia di tinte complementari secondo Itten. Siccome le tavolozze sono destinate anche per la stampa e un ev. elaborazione, ho aggiunto i links per i formati .png (visione ingrandita), .pdf (per stampare) e .svg (per l'elaborazione grafica p.es. con Inkscape® o Illustrator®).

Di seguito le singole tavolozze complementari:


Y - V

Yo - Vb

O - B

Bg - Or

G - R

Gy - Rv




Personalmente uso delle tavolozze dei complementi sottrattivi per dei lavori grafici, secondo il caso con ca. 600 tinte (tavolozze cerchi) o con ca. 200 tinte (tavolozze quadrate).

Queste tavolozze sono scaricabili (clic sull'immagine e "salva") e poi integrabili in varie utilità grafiche.


Calcolo di tinte complementari

Delle tinte complementari si determinano sul computer a partire di due tinte opposte su opposte latitudini e il grigio medio WK Ø. Si mescolano poi numericamente ciascuna tinta con il grigio medio nella proporzione desiderata p.es. con ColorBlender.

P.es. volendo determinare i complementi di blu B 40%N #adaafe si procede quanto segue: la tinta opposta controlatidudinale è arancione O a 40%S, quindi #764606 e il grigio corrispondente WK Ø #9a9a9a.



Mescolando numericamente il blu chiaro con il grigio medio in cinque passi si ottiene #adaafe → #a9a7ea → #a5a4d6 → #a2a0c2 → #9e9dae → #9a9a9a e per arancione scuro con grigio medio: #764606 → #7d5724 → #846841 → #8c785f → #93897c → #9a9a9a.

Un'esempio d'applicazione si trova a fianco per due complementi di blu 40% nord B40%N e arancione 40% sud O40%S. Accordi complementari danno un senso di staticità a una composizione e la rendono "oscura" per via di una luminosità complessiva corrispondente a un grigio medio.


4.  Riassunto

Come riassunto ho fatto un filmino in diversi formati. Non tutti i formati funzionano con tutti i browser (provare).

I colori nei filmini non sono molto fedeli, ma danno almeno un'idea del concetto di Itten (per farli più affidabili e nitidi ci vorrebbero dei files molto pesanti). Il file in formato .m4v e .mov sono i più nitidi. Il formato .iMovieProject di Mac permette di redigere e variare il filmino.

Tutti i formati sono scaricabili per il proprio uso. I formati .webm, .YouTube .m4v e .dv permettono la visione a pieno schermo.

Buon divertimento. 8>)__Peter

5.  Annessi

5.1  Tavolozze di tinte sottrative









Tinte sottrative pure ricostruite secondo J. Itten
Tinta V Vb B Bg G Gy Y W K
0% ffffff ffffff ffffff ffffff ffffff ffffff ffffff 100% 0%
20% E2CEE2 DDCEF2 D6CFFF D3E3E9 D2EFCF E9F6D1 FEFFD2 80% 0%
40% C59EC5 BA9EE5 AD9EFE A7C6D3 A5E0A0 D3EDA2 FDFFA6 60% 0%
60% A86DA9 986DD9 836EFE 7AAABC 78D070 BCE374 FBFF79 40% 0%
80% 8B3D8C 753DCC 5A3DFD 4E8DA6 4BC141 A6DA45 FAFF4D 20% 0%
100% #6E0C6F #530CBF #310DFD #227190 #1EB111 #90D117 #F9FF20 0% 0%
80% 580A59 420A99 270ACA 1B5A73 188E0E 73A712 C7CC1A 0% 20%
60% 420743 320773 1D0898 144456 126A0A 567D0E 959913 0% 40%
40% 2C052C 21054C 140565 0E2D3A 0C4707 3A5409 64660D 0% 60%
20% 160216 110226 0A0333 07171D 062303 1D2A05 323306 0% 80%
0% 000000 000000 000000 000000 000000 000000 000000 0% 100%










Tinta Y Yo O Or R Rv W/K W K
0% ffffff ffffff ffffff ffffff ffffff ffffff ffffff 100% 0%
20% FEFFD2 FEF6D2 FDE9D1 FDDCD0 FDD1D0 F1D0DC E9E9E9 80% 0%
40% FDFFA6 FCEDA5 FCD4A3 FBBAA2 FBA2A1 E3A0B8 D3D4D3 60% 0%
60% FBFF79 FBE477 FABE75 FA9773 F97473 D57195 BCBEBD 40% 0%
80% FAFF4D F9DB4A F9A947 F87545 F74544 C74171 A6A9A7 20% 0%
100% #F9FF20 #F8D21D #F79319 #F65216 #F51715 #B9124E #909391 0% 0%
80% C7CC1A C6A817 C67614 C54212 C41211 940E3E 737674 0% 20%
60% 959913 957E11 94580F 94310D 930E0D 6F0B2F 565857 0% 40%
40% 64660D 63540C 633B0A 622109 620908 4A071F 3A3B3A 0% 60%
20% 323306 322A06 311D05 311004 310504 250410 1D1D1D 0% 80%
0% 000000 000000 000000 000000 000000 000000 000000 0% 100%


Tavolozza visiva superficiale

Tavolozza complementi



Tavolozza psseudocomplementi


5.2  Moduli per tavolozze


.xls

Di seguito le tavolozze cromatiche principali (in diversi formati grafici vettoriali) per ev. bricolarsi delle proprie tavolozze. Dopo lo scarico possono essere "riempiti" di tinte con un programma grafico che riesce a elaborare uno dei formati come p.es. Illustrator® o Inkscape.


Complementi
epsshapesvg
wrl (vrml) ❙ x3d

Pseudocomplementi
epsshapesvg
wrl (vrml) ❙ x3d

Puri
epsshapesvg
wrl (vrml) ❙ x3d



Pierre Chatelier

A chi non dispone di un simile programma consiglio di scaricare e di installare il programmino ShapeOnYou di Pierre Chatelier (gratuito) che legge e registra .shape, .svg, .wrl e .x3d e permette la variazione dei moduli.

6.  Allegati

secondo Wikipedia.de

6.1  Opere di J. Itten

  • Johannes Itten: Analysen alter Meister. In: Bruno Maria Adler (Hrsg.): Utopia. Dokumente der Wirklichkeit. Utopia, Weimar 1921.
  • Johannes Itten: Kunst der Farbe, Otto Maier. Ravensburg 1961. (Nachauflagen)
  • Johannes Itten: Mein Vorkurs am Bauhaus, Gestaltungs- und Formenlehre. Otto Maier, Ravensburg 1963 (Nachauflagen)
  • Johannes Itten: Elemente der Bildenden Kunst. Studienausgabe des Tagebuchs. E. A. Seemann, Leipzig 2002, ISBN 3-363-00777-9.

◦⦆─────⦅◦

6.2  Bibliografia

  • Johannes Itten, Arte del colore. Esperienza soggettiva e conoscenza oggettiva come vie per l'arte, Milano, Il Saggiatore, 1965 (edizioni successive).
  • Willy Rotzler: Johannes Itten Werke und Schriften. Orell Füssli, Zürich 1972, ISBN 3-280-00008-4. (Werkverzeichnis aller ca. 1200 Werke).
  • Johannes Itten – Zwischen Expression und Konstruktion. Tuschen, Aquarelle und Gemälde der 50er Jahre. Ausstellungskatalog Galerie Neher Essen, Texte von Marion Agthe und Tayfun Belgin, Essen 1989, ISBN 3-923806-45-0.
  • R. K. Wick: Johannes Itten. Kunstpädagogik als Erlebnispädagogik? Ed. Erlebnispädagogik, Lüneburg 1997, ISBN 3-89569-021-X.
  • Christoph Wagner: Das Bauhaus und die Esoterik: Johannes Itten, Wassily Kandinsky, Paul Klee. Kerber, Bielefeld/Leipzig 2005, ISBN 3-938025-39-5.
  • Marco De Michelis, Agnes Kohlmeyer, Bauhaus, Dossier Art, n. 119, gennaio 1997, pp. 10-11, 14-20, 47. ISBN 88-09-76226-6.
  • Tomás Maldonado, Disegno industriale: un riesame, Milano, Feltrinelli, 2005 (I ed. ivi 1976), pp. 45-46, 51-54, 56-57, 63. ISBN 88-07-10142-4.
  • Harald Küppers: Schnellkurs Farbenlehre. Die historische Entwicklung. DuMont, Köln 2005, ISBN 3-8321-7640-3. Zu Johannes Itten S. 61 ff.
  • Harald Küppers: Harmonielehre der Farben. DuMont, Köln 2000, ISBN 3-7701-2192-9. Zu Johannes Itten S. 221 ff.

◦⦆─────⦅◦

6.3  Sitografia

6.4  Versioni

◦⦆─────⦅◦

6.5  Commenti

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

Commento 
Autore 
Enter code 201

Edit - History - Print - Recent Changes - Search
Page last modified on April 19, 2013, at 01:24 PM