Colori

Redazione MedPop R8 ?

Versione: .php .html .pdf Autori: Peter & Daniela Categoria: Redazione

bloomu

jemimap

Colori del testo e dello sfondo sono un'importante elemento di stile in pagine web. Possono partecipare notevolmente alla strutturazione del testo e alla leggibilità e la comprensione. Come tutti gli elementi di stile sono da usare con criterio e misura:

  • il contrasto tra sfondo e caratteri dev'essere alto (per via della leggibilità
  • lo stile di MedPopWiki è in generale caratteri scuri su sfondi chiari
  • in inserti si può capovolgere: caratteri chiari su sfondo scuro; inserti (e immagini) dovrebbero essere delimitati o per bordo o per contrasto di colore ed ev. per margini.

wellstyled
  • la scelta e la combinazione di colori è prevalentemente domanda di gusto personale: ci sono delle regole grafiche che si possono studiare p.es. su:
    • jemimap: ruota dei colori (francese)
    • bloomu: programma didattico colori (inglese)
    • wellstyled: combinazioni canoniche di colori (spagnolo)

Tabella dei colori
Visibone®

La notazione di colori in internet si basa spesso su un sistema sottrativo dei colori rosso-verde-blu (red-green-blue → RGB, HEX). Gli operatori del ramo si servono delle più svariate tavole dei colori per trovarsi nella dgiungla dei millioni di colori definibili con i diversi sistemi di notazione. Di seguito presento il mio sistema privato che serve bene ai miei scopi (e non necessariamente anche alle idee didattiche, estetiche e canoniche di altri). Ciònonostante le sfumature di arancio e viola rimangono grossolane perché il sistema stesso riserva la metà dei colori rappresentabili per l'ambito verde-blu mentre l'altra metà deve coprire l'ambito viola-rosso-arancio-giallo. Per questo motivo non sono p.es. rappresentabili dei colori molto pallidi di arancio (giallo-rosso) e viola (blu-rosso). Il sistema CMYK (cyan-magenta-yellow-black)

Struttura linguaggio
Stili PmWiki

Finestra: PopUp Tavole dei colori → Tavole dei colori Peter

Per la definizione di un colore per il web si usa al solito la notazione:

Scorciatoia per "color":
%AttributoAlfa% tratto di testo scorrevole %%
oppure con attributi alfa o esadecimali a tre o sei cifre per "color" e "bgcolor":
%(bg)color=AttributoAlfaEsa% tratto di testo scorrevole %%
per paragrafi:
>>(bg)color=AttributoAlfaEsa<<
tratto di testo (paragrafo).
>><<

Cosa si scrive

Cosa si vede

>>frame center color=#fef
bgcolor=#0b0<<
'''Esempio di colorazione di sfondo e
testo'''
>><<

Esempio di colorazione di sfondo e testo

Per i valori triplici si usa il sistema esadecimale (base numerica di sedici) invece del sistema decimale (base numerica di dieci) con una precisione di 1 oppure 2 cifre esadecimali: tre oppure 6 cifre in totale.

valore esadecimale 0 1 2 3 4 5 6 7 8 9 a b c d e f
valore decimale 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Per non esagerare lo spettro ho usato solo il numeri marcati in rosa e per le variazioni di "arancio ↔ blue-viola" i marcati in grigio. Si nota che la gradazione è fine verso l'alto: perché mi servono spesso colori di pastello per gli sfondi. Così la mia paletta comprende ca. 250 coloricon la possibilità di sfumature per estensione della notazione da tra a sei cifre.

Una particolarità è la scala delle variazioni "arancio ↔ blue-viola" che al solito per il sistema dei colori internet sono sotto-rappresentati. Spero di aver pacificato così in modo pragmatico le differenze tra le teorie dei colori additivi (materiali) e sottrativi (luminosi).

Tavole dei colori

Tavole dei colori

#000 #333 #666 #999 #ccc #ddd #eee #fff
Variazioni di red ↔ cyan
#f00 #f33 #f66 #f99 #fcc #fdd #fee #fff
#e00 #e33 #e66 #e99 #ecc #edd #eee #eff
#d00 #d33 #d66 #d99 #dcc #ddd #dee #dff
#c00 #c33 #c66 #c99 #ccc #cdd #cee #cff
#900 #933 #966 #999 #9cc #9dd #9ee #9ff
#600 #633 #666 #699 #6cc #6dd #6ee #6ff
#300 #333 #366 #399 #3cc #3dd #3ee #3ff
#000 #033 #066 #099 #0cc #0dd #0ee #0ff
Variazioni di arancio ↔ blu-viola
#fa0 #fa3 #fa6 #fa9 #fac #fad #fae #faf
#e90 #e93 #e96 #e99 #e9c #e9d #e9e #e9f
#d80 #d83 #d86 #d89 #d8c #d8d #d8e #d8f
#c80 #c83 #c86 #c89 #c8c #c8d #c8e #c8f
#960 #964 #966 #969 #96c #96d #96e #96f
#640 #643 #646 #649 #64c #64d #64e #64f
#310 #313 #316 #319 #31c #31d #31e #31f
#200 #203 #206 #209 #20c #20d #20e #20f


Variazioni di blue ↔ yellow
#ff0 #ff3 #ff6 #ff9 #ffc #ffd #ffe #fff
#ee0 #ee3 #ee6 #ee9 #eec #eed #eee #eef
#dd0 #dd3 #dd6 #dd9 #ddc #ddd #dde #ddf
#cc0 #cc3 #cc6 #cc9 #ccc #ccd #cce #ccf
#990 #993 #996 #999 #99c #99d #99e #99f
#660 #663 #666 #669 #66c #66d #66e #66f
#330 #333 #336 #339 #33c #33d #33e #33f
#000 #003 #006 #009 #00c #00d #00e #00f
Variazioni di green ↔ magenta
#0f0 #3f3 #6f6 #9f9 #cfc #dfd #efe #fff
#0e0 #3e3 #6e6 #9e9 #cec #ded #eee #fef
#0d0 #3d3 #6d6 #9d9 #cdc #ddd #ede #fdf
#0c0 #3c3 #6c6 #9c9 #ccc #dcd #ece #fcf
#090 #393 #696 #999 #c9c #d9d #e9e #f9f
#060 #363 #666 #969 #c6c #d6d #e6e #f6f
#030 #333 #636 #939 #c3c #d3d #e3e #f3f
#000 #303 #606 #909 #c0c #d0d #e0e #f0f


#fff #eee #ddd #ccc #999 #666 #333 #000

Cc by P. Forster nc-2.5-it


La tabella di Visibone®
(cliccare sull'immagine sopra)
è molto pratica per la scelta
dei colori sicuri per la rete.

I colori sono definiti con il prefisso # seguito di tre o sei cifre esadecimali (da 1 ... f):

  • notazione "grossolana" p.es.: color=#f00rosso

che corrisponde alla

  • notazione "fine": color=#ff0000rosso

Ambedue (f00 e ff0000 sono interpretate dai Browser come miscuglio di luce:

  • Luminosità rossa = ffesadecimale → 256decimale
  • Luminosità verde = 00 → 0
  • Luminosità blu = 00 → 0

Nella tabella sopra ho usato la notazione grossolana. Si rileva il valore di un colore scelto nel seguente modo:

  • "annerire" il numero della casella scelta cursore prima di # → premere il mouse → spostarla sopra il valorefino alla fine → lasciare il mouse
  • copiare il valore con ⌘C
  • incollarlo all'apposito posto del documento in merito con ⌘V

Es: Desidero evidenziare il nome e cognome dell'autore del Prontuario di terapie delle malattie infettive e scelgo, guardando la tabella, il colore #606 .Dovrò scrivere: %color=#606% BARTLETT JOHN G. %% che mi fa apparire BARTLETT JOHN G.

Si può fare facilmente delle interpolazioni tra due valori della tabella e (volendo) trasformarli da tre a sei cifre come p.es.

valore iniziale tabella: #0c0 →
#00cc00
interpolazione 1: #0b0 →
#00bb00
interpolazione 2: #0a0 →
#00aa00
prossimo valore tabella: #090 →
#009900

Chi ha bisogno di raffinare le tonalità lo può fare semplicemente aggiungendo un numero esadecimale uguale o diminutivo dopo ognuna delle tre cifre p.es. #fff bianco#f9f9f9 grigio pallido oppure con #fff9f9 rosa pallido. Molti Browser e carte grafiche nel computer non riescono a rappresentare questi valori.


Colori sottrativi (materiali)
secondo J. Itten

Colori additivi (luminosi)
basilari usati su monitori

Essendo personalmente abituato a ragionare in concetti pittorici, mi servo spesso di una ruota di colori basato sui colori giallo-rosso-blu (secondo Johannes Itten (1888 - 1967) che ho approssimato nella notazione RGBhex3.

I valori sono "websafe": dovrebbero essere rappresentati abbastanza fedelmente su tutti i web-browser (si usano solo gli esadecimali 0 3 6 9 c f). Le interpolazioni di tonalità si raggiunge facilmente ampiando le tre cifre a sei e poi variando le seconde delle copie come p.es. tra #f99 e #fcc:
#ff9999 #ffc0c0 #ffc3c3 #ffc6c6 #ffc9c9 #ffcccc #ffcfcf

Per raggiungere delle tonalità sensate tra valori complementari (opposti) si varia i valori dei singoli colori passo per passo, avvicinandosi dal primo al prossimo valore come p.es. tra #cfc e #fcc:
#cfc L39 #ffc L42 #ccc L36 #fcc L39. Giocarellando un pò si trovano le soluzioni! E chi intende ancora di raffinare esegue poi delle interpolazioni come sopra descritto.

La luminosità dei colori si ricava facilmente sommando i valori delle cifre: c=12, f=15. Volendosi avvicinare p.es. a simili luminosità (p.es per sfondi che non contrastano tra di loro per luminosità) si corregge il tiro p.es. in:
#cfc L39 #ff9 L39 #ddd L39 (non websave) #fcc L39.

Volendo usare due colori complementari come sfondo e caratteri invece, occorre un grande contrasto di luminosità: bianco #fff ha la luminosità di 45 e nero #000 di 0. Il contrasto è 0 à 45. Scurando il rosso p.es. a #300 e combinandolo con il verde pallido #cfc si raggiunge un forte contrasto di 3 à 39 (1:12) di due colori complementari che può essere usato come → bgcolor=#cfc color=#300 opure come → bgcolor=#cfc color=#300 .
Chi lo preferisce meno duro può anche scegliere p.es. → bgcolor=#cfc color=#900 opure come → bgcolor=#cfc color=#900 (contrasto 9 à 39 (ca. 1:4)) e persino un rosso puro #f00 è ancora leggibili (contrasto 15 à 39 (ca. 1:2)) dato che i colori stessi sono contrastanti per la loro complementarità: → bgcolor=#cfc color=#f00 opure come → bgcolor=#cfc color=#f00 .

In colori complementari sono persino identificabili contrasti 1:1 come p.es. → bgcolor=#cfc color=#fcc opure come → bgcolor=#cfc color=#fcc , almeno per una gran parte di lettori salvo di chi soffre di daltonismo: per loro sfondo e caratteri sono indistinguibile e l'esempio sopra vedono come qualcosa di tipo → bgcolor=#ccc color=#666 opure come → bgcolor=#666 color=#ccc



Pagina tipo Riassunto

 

Commento 
Autore 
Enter code 465

Edit - History - Print - Recent Changes - Search
Page last modified on November 19, 2009, at 10:39 PM