Recent Changes - Search:

Pagine di servizio

Gruppi

Pagine in allestimento

Strumenti

Domini correlati

PmWiki

pmwiki.org

edit SideBar

Tinte fisiologiche YRB

HOME .php .html .pdf ? ? ? ? ?
Autore
a cura di Daniela RŘegg

Dopo quasi due anni che sto lavorando con soddisfazione con la paletta di J. Itten ho stilato un riassunto e nel medesimo tempo rettificato un paio di dettagli.

ColorBlender

1.  Storia


Cerchi di colori

Due anni dopo la ricostruzione del cerchio di J. Itten e il proficuo uso della paletta con le relative tinte, mi disturbava lo sfasamento di chiaro - scuro verso il blu.
Fisiologicamente Ŕ il viola che Ŕ percepito come colore puro pi¨ scuro.

Ho quindi voluto correggere il tiro e ho creato una paletta YRB (yellow-red-blue → giallo-rosso-bl¨) centrata ed equilibrata sull'asse giallo - viola secondo le caratteristiche fisiologiche.

In relazione allo spettro RGB ho tenuto il giallo (#ffff00) come unica tinta invariata. Ho schiarito il blu e scurito il rosso su un livello paragonabile di grigio (ca. #707070) e ho scurito pure il viola (da #ff00ff a #660066).

Ho mantenuto gli altri colori secondo i toni di RGB, chiariti o scuriti su equi livelli di grigio (saturazione).

1.1  Colori e tinte

Le tinte fisiologiche sono adatte alla percezione dell'occhio umano e meno alla fisica. Corrispondono pi¨ alla miscela di tinte pigmentose (mischio sottrattivo) che alle miscele luminose (mischio additivo).

Spettri

Si nota che la definizione degli spettri che usiamo per fissare l'uso di colori e tinte differisce parecchio dallo spettro naturale misurato (fisico) della nostra luce solare.


Spettri luminosi e fisiologici

LuminositÓ di diversi spettri

Mischi colori / tinte

Osservando la luminositÓ / saturazione, si nota che anche qui le differenze sono grandi. In pi¨ dei mischi luminosi di colori (somma di tutti colori → bianco) danno tutt'altri risultati che dei mischi pigmentosi di tinte (somma di tutte le tinte → nero).

Sistemi di tinte e colori

Sul web, per la definizione di colori, si usano maggiormente tre sistemi:


  • il sistema RGB (red-green-blue → rosso-verde-blu) per delle composizioni luminose (additive) su schermi televisivi, di computer e di fotografia digitale
  • il sistema CMYK (cyan-magenta-yellow → ciano-magenta-giallo) pigmentoso (sottrattivo) per degli scopi di stampa e fotografia analoga
  • il sistema YRB (yellow-red-blue → giallo-rosso-blu) pigmentoso (sottrattivo) per degli scopi pittorici

Le caratteristiche (valori quantitativi numerici) per singoli colori e tinte sono trasformabili tra i tre sistemi (entro certi limiti e precisioni per via delle imperfezioni delle funzioni di approssimazione). Si possono quindi usare diverse misurazioni per tutti i sistemi (RGB, CMYK, YRB).

Sistema YRB


Ruota di colori YRB


◦⦆─────⦅◦

1.2  Annotazioni di colori e tinte


Per identificare / riprodurre una tinta / colore si usano diverse misurazioni e sistemi di quantificazione come p.es.:

  • rgb: rosso, verde, blu
    (in esadecimale hex #, decimale dec o percentuale %)
  • cmyk: ciano, magenta, giallo, nero %
  • hsb oppre hsv o hsl (hue, saturation, brightness): tonalitÓ ░, saturazione %, luminositÓ %
  • campioni (con "nomi" o meno) identificabili dal web e attribuibili a una notazione cui sopra
  • in pi¨ Ŕ spesso definibile anche l'opacitÓ (trasparenza, transluminositÓ) per questi sistemi per "oggetti" sovrapposti.
  • in certi programmi grafici sono inoltre definibili gradienti e sfocature di colori.

L'opacitÓ fornisce sempre dei miscugli luminosi, mai fisiologici / pigmentosi (La sovraposizione di blu e giallo produce grigio luminoso invece di verde pigmentoso).

Tutte queste unitÓ di misura sono basate sullo spettro luminoso del web e sono trasformabili a vicenda nelle altre (entro determinate precisioni). Lo schermo televisivo o il computer pone poi ancora ulteriori limiti.

Per questo testo ho usato maggiormente la notazione esadecimale hex# perchÚ Ŕ la notazione pi¨ usata nel web e la pi¨ compatta, anche se per i miei scopi grafici preferisco la notazione HSB (░ %).

╚ comune uso di non fare distinzione tra il sistema di rappresentazione di colori e tinte (RGB, CMYK, YRB) che sono modi additivi o sottrattivi, luminosi o pigmentosi e la loro notazione in modo rgb, cmyk o hsb. Porta a delle confusioni da spassose fino a "religiose".

In pi¨ confondono ancora le dimensioni delle varie notazioni che possono essere in esadecimale (p.es. #80) o in decimale (p.es. 128) o in percentuale (p.es. 50%) per i lineari e in gradi (p.es. 30░) o in radians (p.es. 0.524) per i rotativi.

Il tutto basato su uno spettro luminoso (spesso chiamato anche RGB) che rende quasi impossibile determinare delle caratteristiche pigmentose.

Annotazione hex#

La notazione hex# usa il sistema esadecimale a tre volte due cifre (sempre una coppia per i colori rosso, verde e giallo predefiniti in sequenza) che indicano l'ammontare di un mischio luminoso dei tre colori.

Javascript Example of Hexadecimal to Decimal conversion
Conversione esadecimale ↔ decimale
esadecimale # decimale
decimale esadecimale #

Di fianco si trova una piccola calcolatrice per trasformare dei numeri esadecimali in decimali e viceversa ( provare subito).

Esadecimale significa che il conto Ŕ fatto non con 10 numeri (come siamo abituati), ma con base di 16 numeri (0 ... 9, a b, c, d, e, f). In questo modo si riesce a contare da 0 ... 255 con solo due cifre. (00 → 0, 09 → 9, 0a → 10, 0f → 15, 10 → 16, 1f → 31, 8f → 143 ... ff → 255).
Ogni colore (rosso, verd, blu) Ŕ allora scalato da 0 ... 255 (00 ... ff) dove 00 (0/255) significa l'assenza del colore nel mischio luminoso fino al massimo di presenza ff (255/255 = 1). La combinazione delle tre coppie fornisce un esatto colore (mischio luminoso).

P.es. #8f|8f|8f significa:
143/255 parti di  rosso #8f0000   & 143/255 parti di  verde #008f00   & 143/255 parti di  bl¨ #00008f   e risulta un  medio grigio #8f8f8f .

Altro esempio: #59|1a|bf:
 rosso #590000  R=89/255=35%,  verde #001a00  G= 26/255=10%,  bl¨ #0000bf  B=191/255=75% →  ViolaBl¨ #591abf  VB =210░ nella scala YRBfor

Chi vuole approfondire l'argomento consulti Notazione esadecimale.

Annotazione HSB / HSV / HSL

Annotazione CMYK


Caratteristiche di tinte

I colori possono essere definiti:

  • tramite la miscela luminosa di tre colori definiti e la loro singola intensitÓ
  • tramite la tonalitÓ del colore pi¨ la saturazione e la luminositÓ

1.3  Paletta YRB chiari e scuri


Paletta fisiologica YRB chiara-scura

25% grigio

50% grigio

75% grigio

100% grigio


◦⦆─────⦅◦

1.4  Palette di grigiastri YRB

Per le tinte pigmentose (miscuglio sottrattivo):

  • LuminositÓ B (oppure V) significa l'inverso dell' aggiunta quantitativa di "nero" a un colore basilare:
    • 0% nero & 100% colore → luminositÓ = 100%
    • 100% nero & 0% colore → luminositÓ = 0%
  • Saturazione S significa l'inverso dell'aggiunta quantitativa di "bianco" a un colore basilare:
    • 0% di bianco & 100% di colore → saturazione = 100%
    • 100% di bianco & 0% di colore → saturazione = 0%
  • Dei  colori  chiariti sono dei colori con:
    • luminositÓ basilare e
    • saturazione inferiore alla basilare.
  • Dei colori  scuriti sono dei colori con:
    • saturazione basilare e
    • luminositÓ inferiore alla basilare .
  • Dei colori  grigiastri sono dei colori con:
    • sia luminositÓ che saturazione inferiori alle basilari

giallo Y

rosso R

bl¨ B




viola V

verde G

arancio O




giallo-arancio YO

rosso-viola RV

bl¨-verde BG




viola-bl¨ VB

verde-giallo GY

arancio-rosso OR


◦⦆─────⦅◦

1.5  Tavolozze YRB

Per mio uso ho fatto un campione di paletta di ca. 200 tinte: le dodici tinte basilari, ciascuna con sedici sfumature di chiaro, scuro e grigiastsri.


.htm | .pdf | .xls |

Paletta YRB quantificata in HSB e RGBhex#

L'immagine riporta una disposizione di paletta campione con le relative caratteristiche quantitative.

La tabella di fianco Ŕ anche scaricabile in .xls per chi intende migliorare o individualmente modificare delle tavolozze YRB. ╚ facilmente integrabile in un database. ( Attenzione ai colori "webproof" e "calibrazioni". Ho tentato di annotare tutto "raw". Ma anche gli schermi non sono molto affidabili e spesso sfalsano le sfumature).


Campione di paletta YRB



Scheda campione

Per chi intende scaricare la tavolozza sul proprio computer per integrarla nei campioni, ecco un formato adatto:


Costruzione tavolozza

La tavolozza Ŕ costruita sulle dodici tinte basilari (da Y → GY) disposti in paia complementari. Per trovare un colore "triplice" si va in avanti di quattro passi nei campi delle tinte basilari (da Y → V → GY), per una tinta "quadrupla" di tre passi.

Ogni tinta basilare Ŕ rappresentata con tre sfumature chiarite, tre scurite e nove ingrigite in passi di 25%; in totale sedici sfumature.

Chi ritiene grossolana la scala pu˛ trovare facilmente dei valori intermediari (p.es. con un ColorBlender)

La disposizione sembra inizialmente poco chiara (dovuto all'esigenza di poter piazzare 200 tinte su una superfice ancora maneggevole per il lavoro grafico), ma ci si abitua velocemente.

◦⦆─────⦅◦

1.6  Accordi


Accordi principali

Come accordi pigmentosi intendo delle combinazioni di tinte che mescolate tra di loro (come pigmenti) producono un grigio. Queste combinazioni appaiono armoniose all'occhio umano.


Accordi basilari

Gli accordi basilari simmetrici sono complementari (duplici), triplici o quadrupli.

Si notano facilmente su un modello a "ruota", dove i complementari sono a una distanza di 180░ (p.es. 90░-270░ →  OR  -  BG ), i triplici sono a distanza di 120░ (p.es. 90░-210░-330░ →  OR  -  VB  -  GY ) e i quadrupli si trovano a distanza di 90░ (come p.es. 120░-210░-300░-30░  R  -  VB  -  G  -  YO  ).

╚ evidente che dei toni tra i 12 principali si comportano nello stesso modo(come p.es. sono complementari 15░-105░:  G/GO  -  CV/VB ). Il calcolo per determinare dei valori intermediari di tinte sarÓ trattato in seguito


Tipi di accordi

Esistono molteplici accordi secondari: ristretti o ampiati triplici, quadrupli rettangolari, pentagonali ed esagonali possibili da costruire a piacere. In questo testo non sono trattati.


Accordi secondari

I seguenti esempi fanno vedere i sei accordi complementari, i quattro accordi triplici e i tre accordi quadruplici (delle tinte basilari fisiologiche YRB).

Lavorare con degli accordi significa limitarsi a due, tre o quattro tonalitÓ di colori tra loro equilibrati.


Accordi triplici simmetrici

Questo non significa usare poche tinte ma ogni tonalitÓ (angolazione) dei colori coinvolti pu˛ essere chiarita, scurita e ingrigita in innumerevoli sfumature. Il quadro non diventa pi¨ "bello" per questo fatto, ma almeno Ŕ privo di qualunquismo cromatico e in un certo senso Ŕ "armonioso". Si aggiungono poi, se richiesto, degli accenti "dissonanti" (fuori dalle tonalitÓ scelte) per interrompere la noia dell'armonia perfetta.

Accordi complementari


Gli accordi complementari consistono in due tonalitÓ di tinte che mescolate tra di loro a dovute proporzioni forniscono un  grigio medio #888888 . Sottolineano un massimo contrasto di colori e sono usati per contrapporre la debilitÓ di altri contrasti.

Di fianco i sei complementi delle 12 tinte YRB fisiologici principali. In notazione HSB si tratta delle tonalitÓ:


Accordi complementari
  • Y61░-V300░
  • YO45░-VB263░
  • O30░-B240░
  • OR16░-BG180░
  • R0░-G120░ e
  • RV341░-GY84░

In notazione HSB non sono 180░ di differenza, perchŔ la scala fisiologica Ŕ "distorta" verso la scala web.

Esempio complemento

esempio fisiologico:
 76░ #aeec00
 327░ #94004a

Per una composizione "complementare"si possono usare tutte le saturazioni (aggiunte di bianco) e/o luminositÓ (aggiunte di nero) risp. dei miscugli qualsiasi delle due tinte .

Le coppie complementari non consistono solo nelle tinte principali ma in tutte le sfumature (tonalitÓ H) intermediarie.

L'esempio dimostra una paletta di tinte complementari a variazioni di GY76░ con grigio#888888 per l'accordo complementare. La paletta Ŕ poi applicata a una composizione ornamentale di cinque colori.


Accordi triplici

Gli accordi triplici consistono in tre tonalitÓ di tinte, che mescolate tra di loro a dovute proporzioni forniscono un  grigio medio #888888 . Sottolineano l'equilibrio stabile e armonioso di una composizione.



Accordi triplici

Di fianco i quattro accordi triplici delle 12 tinte YRB fisiologici principali. In notazione HSB si tratta delle tonalitÓ:

  • Y61░-R360░-B240░
  • YO45░-RV341░-BG180░
  • O30░-V300░-G120░
  • OR16░-VB263░-GY84░

In notazione HSB non sono 120░ di differenza, perchÚ lo spettro fisiologico Ŕ "distorto" verso lo spettro web.

esempio fisiologico:
 255░ #4e24d4
 76░ #aeec00
 11░ #e32b00

Si possono usare tutte le saturazioni e luminositÓ degli accordi triplici per una composizione "triplica" e tutte le sfumature di grigio tra bianco e nero.

Le tinte non consistono solo nelle tinte principali ma in tutte le sfumature (tonalitÓ H) intermediarie.


L'esempio dimostra una paletta di tinte a variazioni di VB255░ per l'accordo triplice. La paletta Ŕ poi applicata a una composizione ornamentale di cinque colori. Come colore scurissimo Ŕ usato un rosso quasi nero (#272323) e come sfumatura chiara un bluastro molto pallido (#E7E0FF)


Accordi quadrupli


Accordi quadrupli

Gli accordi quadrupli combinano due accordi complementari, perpendicolari tra di loro, il che suggerisce armonia multicolore.


Applicazioni

Accordo complementare



Accordo triplice (variazioni luminositÓ e saturazione)

Aggiunta di un'elemento dissonante

Esempio accordo triplice YO-RV-BG

L'esempio fa vedere un possibile uso di un accordo triplice (YO-RV-BG → 30░-150░-270░) con solo cinque tinte: il YO saturo, il RV scurito e il BG molto chiarito, di pi¨ il BG scurito e ingrigito e il RV chiarito e ingrigito, tutto per avere una soddisfacente distribuzione di luminositÓ.

L'applicazione delle cinque tinte su una forma ornamentale dÓ un risultato soddisfacente e armonioso.
Per rompere la sovrabbondanza di armonia ho aggiunto una estrema dissonanza: una forma ellittica e sferica in un contesto piano di cerchi, fuori simmetria dell'ornamento e in pi¨ con una tinta disturbante l'accordo: il blu (240░ → B).
Non so se rendo l'idea, ma disturba e sappiamo anche il perchÚ.


Accordo triplice ristretto




Accordo triplice complementare




Accordo triplice esteso



Accordo rettangolare




Accordo pentagonale

L'accordo pentagonale Ŕ raramente usato. Consiste in due accordi triplici con la stessa base: uno stretto e uno largo.

Per dimostrazione ho creato una paletta con cinque tonalitÓ, basata sul verde, il primo triplice stretto, il secondo largo. Risultano i colori verde G, rossoviola RV, violablu VB, arancio O e giallo Y. Gli ho usati "puri" (senza variazioni di luminositÓ o saturazione).



L'accordo mi piace, perchŔ permette di rendere il fondo di base (in questo caso il verde) virtualmente vivo, visto che in vicinanza di colori come arancio e giallo appare spostato verso il verde-giallo mentre vicino ai colori rosso-viola e viola-blu appare spostato verso il blu-verde (si nota bene negli ingrandimenti: clic e poi ancora clic). Inoltre permette delle composizioni multicolori con tensioni ma non disordinati.


Accordo esagonale

Paletta esagonale

Applicazione in piastrelle

L'accordo esagonale Ŕ spesso usato per composizioni multicolori in perfetto equilibrio.

Come paletta esempio ho usato le tinte YO40░, OR11░, RV327░, VB255░, BG160░ e GY76░ (le angolazioni Hfor sarebbero 40░, 100░, 160░, 220░, 280░ e 340░).

Ho usato le tinte di questa paletta per delle piastrelle, variando luminositÓ e saturazione per cui da una parte esse riempiono equilibratamente tutto lo spettro e dall'altra, visto l'uso, sono abbastanza pacate.
La tensione proviene dai contrasti delle forme (angolazioni di 90░ e di 72░) che ingannano l'occhio deviandolo dalle linee rette.

◦⦆─────⦅◦

1.7  Miscugli e complementi pigmentosi


YRB in misurazione luminosa

Ruota dei colori graduata

Trasformazione valori








Diagramma HSB
.xls

Tabella HSB
.pdf | .htm




H░=f(Hfor░)
.xls


2.  Allegati

2.1  Sitografia

2.2  Bibliografia

2.3  Immagini

2.4  Commenti

alla pagina Colori / Tinte fisiologiche YRB: ev. cliccare sul titolo per stilare un commento

Edit - History - Print - Recent Changes - Search
Page last modified on February 14, 2015, at 11:51 AM