15. Color

 

Índex

Especificació dels colors

Totes les representacions gràfiques - lletres i imatges - que apareixen en la pantalla d'un monitor de color són constituïts de punts molt petits de només tres colors, vermell, verd i blau. Tots els colors s'obtenen per una mescla additiva d'aquests tres colors primaris, combinats amb intensitats diferents. Aquestes intensitats es mesuren amb una escala relativa que va del 0 al 255.

L'especificació d'un color es fa amb l'expressió

on consten successivament els valors de les intensitats del vermell, del verd i del blau.

El vermell és doncs rgb(255,0,0); el verd, rgb(0,255,0), i el blau, rgb(0,0,255). El blanc, reunió de tots els colors, és rgb(255,255,255), i el negre, absència de llum, és rgb(0,0,0). Combinant els 256 graus del vermell, els 256 del verd i els 256 del blau obtenim un conjunt de 16.777.216 colors diferents.

Els colors més propers a l'arc iris i similars (anomenats tècnicament de màxima saturació) s'obtenen amb composicions en què almenys un terme és 255 i l'altre 0. Queden exemplificats en el gràfic següent:

En l'extrem oposat tenim l'escala de grisos, caracteritzada pel fet que els tres valors són iguals, del rgb(255,255,255) al rgb(0,0,0):

Podem considerar que qualsevol altre color resulta de la mescla en proporcions diverses d'un color saturat i d'un gris. Aquesta operació té dos casos extrems: la pèrdua de saturació cap al blanc i la pèrdua de lluminositat cap al negre.

Pèrdua gradual de saturació, del rgb(0,160,255) cap al blanc, rgb(255,255,255):

I pèrdua de lluminositat, del rgb(255,192,0) cap al negre, rgb(0,0,0):

Nota: Si treballeu amb un navegador antic, és possible que no vegeu bé els exemples gràfics precedents; en aquest cas feu clic aquí

 

Format hexadecimal

Els valors de les intensitats dels colors també es poden expressar mitjançant el símbol # seguit de tres grups de dos dígits en el format hexadecimal, corresponents a les intensitats del vermell, del verd i del blau:

En el sistema hexadecimal de numeració es fan servir els números ordinaris, del 0 al 9, i les primeres lletres de l'abecedari, amb els valors següents: a=10, b=11, c=12, d=13, e=14 i f=15.

La correspondència entre la numeració hexadecimal i la decimal o ordinària és donada per la fórmula següent:

decimal = primera xifra hexadecimal x 16 + segona xifra hexadecimal

 

Eina per a mostrar les fórmules dels colors

L'eina que ve a continuació permet l'obtenció del color desitjat, i en presenta els valors rgb i l'expressió heaxadecimal:

Eina per a l'ajustament dels colors

 

Ús de termes anglesos

S'accepta també l'ús de determinats termes anglesos, com ara red (en lloc de #ff0000), blue (en lloc de #0000ff), white (en lloc de #ffffff), black (en lloc de #000000), etc.

El repertori complet dels termes emprats es troba en l'exemple següent:

Exemple

 

Aplicació de color a la lletra

El color de la lletra es fixa amb l'atribut color, aplicat a BODY, a DIV o a qualsevol element que pugui contenir text:

Exemple

 

Color de les àncores

En absència d'especificació en contra, els navegadors assignen un color diferent a les àncores no visitades, a les visitades fa poc (a condició que quedi una còpia del document a la memòria cau) i a les actives (les que s'executen en aquest moment).

Per a l'especificació d'aquests colors es fan servir els anomenats pseudo-elements d'A:

Els termes a:link, a:visited i a:active corresponen, respectivament, als enllaços no visitats, als visitats i als actius. L'ús de la variant a:hover aconsegueix un canvi de color en posar el cursor damunt l'enllaç.

Exemple

 

Color de fons

S'estableix amb l'especificació

Aquesta especificació es pot aplicar a BODY, a DIV, a H1, a P, a BLOCKQUOTE, etc.

També es pot donar color de fons a HR, a condició que tingui un gruix especificat.

Exemple

És possible establir un degradat entre dos o més colors. N'hi ha de dos tipus, linear-gradient i radial-gradient. Per als primers cal especificar

i per als segons

Si no s'especifica la direcció o el centre, els degradats lineals van de dalt a baix i el radials del centre geomètric a la perifèria.

Exemple

A fi que l'estil sigui compatible amb tots els navegadors, cal repetir l'especificació diverses vegades:

i anàlogament per al radial.

Les especificacions per a altres direccions i altres centres són complexes, perquè s'hi fa servir una sintaxo no exactament coincident.

 

Imatge de fons

També és possible d'inserir una imatge com a fons d'un element; cal notar que aquesta imatge no forma part del document, que només en conté la referència:

Una especificació complementària permet determinar si la imatge s'hi aplica una sola vegada o si es repeteix:

(per defecte, repeat).

Una altra especificació permet determinar si la imatge de fons es desplaça conjuntament amb el contingut del document o si queda fix:

(per defecte, scroll).

Exemple

 

 

Teoria del color aplicada
a la informàtica

 
Podeu aprofundir en la interrelació entre els aspectes físics, fisiològics i psicològics del color, la seva obtenció mitjançant mescles additives i els aspectes quantitatius que s'hi relacionen a Teoria del color aplicada a la informàtica, manual d'aquesta mateixa col·lecció.