Recent Changes - Search:

Pagine di servizio

Gruppi

Pagine in allestimento

Strumenti

Domini correlati

PmWiki

pmwiki.org

edit SideBar

Aritmetica dei colori web

HOME .php .html .pdf ? ? ? ? ?
P.Forster
a cura di Daniela Rüegg

Il seguente testo è un'introduzione all'aritmetica dei colori luminosi del web. Ho notato che quasi tutti gli utenti usano delle "palette" prefabbricate di solo alcuni dei sei milioni e più di colori rappresentabili sullo schermo.
Chi intende farsi una piccola cultura oppure vuole costruirsi una paletta individuale, troverà qui tutte le spiegazioni e gli strumenti in merito.
Buon divertimento.

1.  Notazione esadecimale

Il più grande "problema" per un neofita in materia è che nel web, di solito i colori sono definiti con #a08080 . Questo numero non è appropriato per fare dei calcoli. A questo scopo bisogna trasformarlo in una serie di numeri "calcolabili" e poi, fatto i calcoli, ritrasformarlo in "#xxyyzz". Di seguito tento di spiegare come si fa.

◦⦆─────⦅◦

1.1  Definizione di colori

La definizione esadecimale dei colori in Internet nomencla 3 coppie di cifre precedute dal suffisso #.
Esadecimale significa che al posto del sistema decimale (da 0 ... 9) si usa un sistema con sedici simboli (da 0 ... 9 più a, b, c, d, e, f).
Per fare delle operazioni aritmetiche conviene trasformare l'esadecimale in decimale, eseguire l'operazione e ritrasformare il risultato in esadecimale.
I tre colori primari seguono le seguente convenzioni:

  • la prima sta per "rosso" R, la seconda sta per "verde" G,la terza sta per "blu" B e il sistema viene nominato "RGB"
  • il numero massimo per ciascuno dei tre colori RGB significa la massima intensità del colore ed è "#ff" → 255 oppure 100% → 1
  • il numero minimo per ciascuno dei tre colori RGB significa assenza di colore ed è "#00"
  • la presenza di tutti e tre i colori con la massima intensità si esprime quindi con "#ffffff" e significa "bianco".
  • l'assenza di tutti e tre i colori si esprime quindi con "#000000" e significa "nero"

Esempi:
#ffffff =W  #000000 =N  #ff0000 =R  #00ff00 =G 

#0000ff =B  #ffff00 =Y  #00ffff =C  #ff00ff =M 

◦⦆─────⦅◦

1.2  Notazione triplica

Nel sistema esadecimale i colori si annotano con tre coppie a due cifre. Bisogna quindi ricordarsi che un espressione come #ff0409 in notazione esadecimale risulta ff | 04 | 09 . Mentre in notazione decimale risulta 255 | 4 | 9 oppure in notazione "percentuale" 1.000 | 0.016 | 0.035 o 100% | 16% | 34%.

Mentre la notazione esadecimale è obbligatoria in internet (.html), per i calcoli si possono usare sia il sistema decimale da 0 ... 255 che il sistema "percentuale" da 0.00 ... 1.00 (da me preferito).

◦⦆─────⦅◦

1.3  Conversioni numeriche

Per la reciproca trasformazione si usano tabelle, programmini specializzati o uno spreadsheet (tipo excell).


Il metodo più comodo è invece di servirsi della calcolatrice incorporata di seguito (provi subito):

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

Lo strumento più pratico a questo scopo è invece il ColorBlender nel quale si digita il valore del colore in esadecimale e si clicca poi sul tasto <RGB> o <RGB%> per avere subito i valori decimali o percentuali. È possibile anche l'inverso: digitando dopo aver scelto <RGB> nel formato 255,0,0 il valore decimale del colore e cliccando poi sul tasto <Hex>.

2.  Altre notazioni

Sul web a volte si usano anche delle notazioni come:
rgb(122,0,131) oppure rgb(50%,0%,60%) che per il calcolo sono più pratici (si evitano le trasformazioni esadecimali) ma sono anche più ingombranti da digitare.

Oltre al sistema RGB ci sono diversi altri sistemi per rappresentare dei colori come HSV, CIE Lab per altri sistemi o CMY o RYB per palette pigmentose che al momento non interessano.

3.  Aritmetica dei colori luminosi

Interessano in merito:

  • lo schiarimento
  • lo scurire
  • il complemento
  • il mischio (la miscela)
  • la luminosità

di colori prestabiliti.

L'unico inconveniente è che per il profano non ci sono delle calcolatrici esadecimali. Bisogna quindi trasformare i numeri esadecimali in decimali e viceversa- un lavoro noioso perché ripetitivo.

◦⦆─────⦅◦

3.1  Schiarimento luminoso

Il pittore per schiarire un colore aggiunge del bianco.

Calcolando aritmeticamente uno schiarimento di un colore luminoso si fa la stessa cosa: si aggiunge la desiderata quantità di bianco (W in percento → %W) al colore prestabilito in modo che si hanno %W di bianco e (100-%W) del colore.

Clrchiar = ((100-%W) x Clr) + %W
Colore chiarito = ((100 - percentuale di bianco) x colore)) + percentuale di bianco

Eseguendo l'operazione in questa maniera, si evita di oltrepassare i limiti decimali di "0" e di "255".

Esempio: Si vuole rendere più chiaro il verde #00ff00 di 80%:
80% x W → 0.8 x ff | ff | ff 0.8 x 255 | 255 | 255 204 | 204 | 204 +
20% x Clr → 0.2 x 00 | ff | 00 0.2 x 0 | 255 | 0 0 | 51 | 0 =
204 | 255 | 204 CC | FF | CC #CCFFCC



Lavorando con uno "spreadsheet" si risparmiano i noiosi calcoli ripetitivi:

I modelli si trovano sotto Originale .ods da scaricare e sotto GoogleDocs per la diretta applicazione.

Lo strumento più pratico a questo scopo è invece il ColorBlender nel quale si digita il valore del colore in una casella e il valore per il bianco ffffff nell'altra (tutte due in esadecimale). Scegliendo più di un intermedio, si raggiunge una scala di chiarimenti a scelta senza alcun calcolo.

◦⦆─────⦅◦

3.2  Scurimento luminoso

Il pittore per scurire un colore aggiunge il nero.
Anche nella nostra aritmetica lo facciamo - virtualmente, perchè il nero ha il valore "0" #000000. Facendo un'addizione o una sottrazione, il valore rimane il medesimo (99-0 = 99+0 =99). Ma aggiungendo 10% di nero ci rimane 90% del colore. Basta quindi diminuire il colore a 100% - %nero.

Clrscur = (100-%N) x Clr
Colore scurito = (100 - percentuale di nero) x colore

Eseguendo l'operazione in questa modo, si evita di oltrepassare i limiti decimali di "0" e di "255".

Esempio: Si vuole scurire il rosso #ff0000 di 20%:
80% x Clr → 0.8 x ff | 00 | 00 0.8 x 255 | 0 | 0 204 | 0 | 0 =
204 | 0 | 0 CC | 00 | 00 #CC0000



Lavorando con uno "spreadsheet" si risparmiano i noiosi calcoli ripetitivi:

I modelli da scaricare si trovano sotto Originale .ods e sotto GoogleDocs per la diretta applicazione.

Lo strumento più pratico a questo scopo è invece il ColorBlender : si digita il valore del colore in una casella e il valore per il nero 000000 nell'altra (tutte due in esadecimale). Scegliendo più di un intermedio, si raggiunge una scala di scurimenti a scelta senza alcun calcolo.

◦⦆─────⦅◦

3.3  Colori complementari luminosi

Il colore complementare è il colore assorbito di un colore di partenza in modo che il loro mischio:

  • fornisca il bianco W, per dei mischi luminosi
  • forniscaun grigio più o meno scuro K, per dei mischi pigmentosi

Il complemento di un colore luminoso è il colore che lo completa in bianco (rispettivamente quello di un colore pigmentoso in "nero" /grigio, ma non lo trattiamo qui).

Aritmeticamente, il complemento di un colore è determinato come differenza tra bianco W e colore X: Complemmento=W-X
Esempio: il complemento di ciano C #00ffff si calcola: bianco W #ffffff - ciano C #00ffff = #ff0000 → rosso.

Se ci si chiede quale sia il complemento di due colori (per trovare un accordo triplo)questo è semplicemente la differenza del complemento del mischio equo dei due colori

Per dei complementi luminosi, la relativa aritmetica è banale: basta sottrarre il colore di partenza Clr dal bianco W per arrivare al colore complementare Cmp luminoso.

Cmp = W - Clr
Complemento = bianco - colore

Eseguendo l'operazione è impossibile oltrepassare i limiti decimali di "0" e di "255".

Esempio: Si cerca il complemento luminoso al blu #0000ff
Cmpl = W - Clr → ff | ff | ff - 00 | 00 | ff =
ff | ff | 00 #FFFF00

Lo strumento più pratico a questo scopo è invece il ColorBlender adoperandolo nel seguente modo:
Cerco il complemento al colore ab5340 . Scelgo <Hex> e digito ab5340. Poi scelgo <RGB%> e leggo rgb(67%,33%,25%). Digito nella seconda casella la differenza a 100% → 33%,67%,75%. Scelgo poi <Mischi> e <Hex>: Come complemento luminoso esce 54ABBF e il mischio è evidentemente un grigio 807F80 . La differenza di 1/255esimo (7A invece di 80 per G) proviene dagli errori di arrotondamento).

◦⦆─────⦅◦

3.4  Mischi (miscele) luminosi di due colori

Il pittore mescolando due colori pigmentosi ( p.es. blu e giallo) raggiunge tutte le tonalità verdastre dei due e in mezzo il verde.

Se si fa la stessa cosa mescolando blu e giallo ma con delle luci si raggiungono tutte le tonalità grigiastre dei due e in mezzo un grigio medio. Attenti quindi: mai confondere "luminosi" e "pigmentosi" perché gli effetti dei mischi sono diversi. Chi pensa di usare il computer per determinare che colori deve mescolare per dipingere la sua panchina, avrà delle brutte sorprese.

Mischi luminosi equi di due colori si fanno calcolando la media dei due valori.

Il mischio luminoso è aritmeticamente facile: si sommano i valori dei due colori e si dividono per due, ammesso che i due colori vadano mescolati ad equo.
rosso R #ff000 255 | 0 | 0 mescolato con blù B #0000ff 0 | 0 | 255 ad eque parti da (510 | 0 | 510)/2 → 255 | 0 | 255 oppure magenta M #ff00ff.

Per fare dei mischi più sofisticati si potrebbe p.es. aggiungere 1 parte di blu a 5 parti di rosso. Quindi si sommano 20% di blu e 80% di rosso:
0.8*R + 0.2*B da il nuovo colore rosso-viola: 0.8x#ff0000 + 0.2*#0000ff = #cc0000 + #000033 = #cc0033 . Vi risparmio i calcoli intermediari, se vi interessa potete controllarli nel progammino allegato.
Per fare una scala, si suddivide la differenza tra i due colori con la quantità di "scalini" desiderati e si aggiungono al primo valore successivamente il risultato della divisione.

Il seguente programmino ColorBlender permette di automatizzare queste procedure.

8c088c 5b07ae 2905d0 266a70 23cf10 91e718
fafe20 fbc51b f88b16 f85014 f71412 c20e4f
FFFFFF E8E8E8 D1D1D1 B9B9B9 A2A2A2 8B8B8B
747474 5D5D5D 464646 2E2E2E 171717 000000


00ffff 0080ff 0000ff 00ff80 00ff00 80ff00
ffff00 ff8000 ff0000 ff0080 ff00ff 8000ff


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.

PopUp

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

Per iniziare prova con i seguenti colori:

#ffffff =W  #000000 =N 
#ff0000 =R  #00ff00 =G 
#0000ff =B  #ffff00 =Y 
#00ffff =C  #ff00ff =M 

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

◦⦆─────⦅◦

3.5  Luminosità

La luminosità di un determinato colore si può approssimativamente determinare facendo l'addizione dei tre valori per R+G+B. Visto che il valore di massima luminosità è #ff → 255 la luminosità massima di tre colori è 3x255=765 (#2fd) e il minimo è #00 → 0 e quindi 3x0=0.
Esempio:

  • giallo Y #fafe20 → (250+254+32)/765 = 70% di luminosità.
corrispondente a un grigio di 100-70=30%N → #b2b2b2
  • viola V #8c088c → (140+8+140)/765 = 38% di luminosità
corrispondente a un grigio di 100-38=62%N → #606060

A volte mi servo del calcolo della luminosità per stabilire dei contrasti luminosi in un'immagine. Nelle tabelle Excel viene automaticamente calcolato per ogni valore di entrata e di uscita.

per questo compito si può anche usare il ColorBlender:
Digitando il valore esadecimale <Hex> p.es. ff00ff nella casella del primo colore. Cambiando in <RGB%> risulta 100%,0%,100%. Sommando i singoli valorisi ottiene 100+0+100=200. La luminosità relativa è quindi 200 e quella assoluta è 200/300=67%. Il bianco ha una luminosità di 300 relativa e di 300/300=100% assoluta e il nero di 0/300=0.

4.  Allegati

4.1  Sitografia

4.2  Bibliografia

4.3  Immagini



4.4  Commenti

alla pagina Colori / Aritmetica dei colori web: ev. cliccare sul titolo per stilare un commento

Commento 
Autore 
Enter code 365

Edit - History - Print - Recent Changes - Search
Page last modified on January 28, 2013, at 09:52 AM