El color a la web

El color és un dels components fonamentals en una web i el que produirà un efecte decisiu en el disseny del lloc: des de l'evocació de sensacions, lligades al contingut del projecte, a la transmissió d'una marca visual que determinarà la coherència global en la totalitat de les pàgines del projecte.

Fonaments del color

Per tal de comprendre millor la importància del color, es farà un repàs a alguns conceptes tècnics associats a aquesta matèria: per exemple, com es formen els colors i com es classifiquen.

Una primera diferència important -i de vegades sovint oblidada- és que els colors que veieu en una pantalla d'ordinador no acostumen a ser els mateixos que aquells que trobareu en un full de paper un cop impresa la pàgina web amb l'ajut d'una impressora. El comportament dels colors en una pantalla o en un paper són diferents. El color representat en una pantalla pertany al model additiu, d'altra banda, el color representat en paper pertany al model subtractiu.

Models additiu i subtractiu del color

Els colors que apareixen a la pantalla d'un ordinador, els colors que fareu servir a la pàgina web, estan basats en un model de color additiu. En aquest tipus de model els colors es mostren en percentatges de llum vermella, verda i blava (RGB). Si el percentatge dels tres colors és de 100% obtindreu el color blanc en pantalla.

Model de color additiu

Si esteu familiaritzats amb qüestions d'impressió o treballeu amb les tècniques tradicionals artístiques, com l'oli, acrílic, carbonets de color, segur que coneixeu l'acrònim CMYK (cian, magenta, groc i negre). La impressora de casa, la impressora de la copisteria, imprimeixen les imatges fent servir tintes o toners amb cian. Aquest procés es conegut com a model de color subtractiu.

La roda de color

L'estudi del color ha estat una disciplina que ha passat per l'atenció de personalitats il·lustres com Isaac Newton, Goethe o Wittgenstein. En general, les diferents teories expliquen els colors en relació a una roda de color, identificant el color vermell, el groc i el blau com els colors primaris. La Roda de color és un diagrama molt senzill, però efectiu, per explicar els conceptes i la terminologia del color. La roda de color està dividida en 12 seccions com podeu veure en la següent figura. Cada secció representa un color primari, secundari o terciari.

Colors primaris

Els colors primaris de la Roda de color són el vermell, el groc i el blau. Aquests tres colors formen un triangle equilàter a la roda, és a dir, per cada quatre seccions de la roda trobareu un altre color primari.

Colors secundaris

Si barrejeu dos colors primaris obtindreu un color secundari, és a dir, tres colors: taronja, verd i púrpura.

Colors terciaris

Finalment, de colors terciaris en trobareu sis: vermelló (vermell-taronja), calèndula (groc-taronja), chartreuse (groc-verd), aquamarina (blau-verd), violeta (blau-púrpura) i magenta (vermell-púrpura). La obtenció dels colors terciaris s'obtenen mitjançant la barreja d'un color primari i un color secundari adjacent.

Esquemes de color

Com segur que heu verificat per experiència personal, alguns colors funcionen millor junts. Una part de la teoria del color tracta justament d'aquesta cerca: quins colors treballen millor a nivell visual. Aquestes combinacions i agrupacions de colors s'anomenen esquemes de color. Hi ha sis esquemes de color, dels quals en destaquem tres:

  • Monocromàtic
  • Anàleg
  • Complementari

Esquema monocromàtic

L'esquema monocromàtic es basa en el treball amb només un únic color o to de color. La creació de l'esquema de color és realment fàcil: s'escull un color i es juga amb la lluminositat del color.

Aquest esquema és especialment útil per la seva facilitat de creació i, especialment, per aquells espais web on el més important de tots els elements es el contingut.

Esquema anàleg

Dos colors adjacents a un tercer en la roda de color s'anomenen colors anàlegs. Seleccioneu tres colors, el color base i el seus adjacents per construir l'esquema de colors.

Aquest esquema és igual de fàcil de crear que l'esquema monocromàtic però, a diferència d'aquest, té una major riquesa de color pel fet de jugar amb diferents colors i no només amb un to.

Un problema que sorgeix sempre que es parla dels esquemes de colors anàlegs és la carència de contrastos de colors si pensem en un esquema de colors complementaris. En canvi, és un dels esquemes de colors recomanats per als principiants quan preparen el disseny de la web, ja que és realment fàcil de crear i s'obté un esquema segur i de colors atractius.

Esquema complementari

Un esquema de colors complementaris fa servir dos colors oposats a la roda de color. Colors com el blau i el groc, com el púrpura i verd. Si bé un esquema de color complementari és més ric en colors i contrastos, a diferència dels dos esquemes anteriors, la dificutat per obtenir un bon esquema es degut a que els colors poden resultar excessivament brillants i, per tant, s'ha de fer una tasca complementària de balanceig. Esquemes de colors complementaris no són precisament els més adequats per a llegir textos a la pantalla ja que són colors que dificulten molt la lectura

Creació d'un esquema de color

Ara que ja teniu uns coneixements bàsics de la teoria del color, heu de pensar en l'elecció de colors per al nou disseny de la web de centre.

Codi de color HTML

Els colors web es defineixen per tres parells de dígits, el mateix que el color en RGB1). Cada parell identifica un color bàsic: el primer parell correspon al valor de vermell; el segon representa el verd i, el tercer i últim, representa el blau.

El color a web és additiu. Això vol dir que el valor 0 (zero) per a tots els colors dóna com a resultat el negre, mentre que el valor més alt per als tres colors, 255, dóna com a resultat el blanc.

La diferència és que, enlloc de expressar el color en valors decimals (del 0 al 255), s'expressen en hexadecimal. Què vol dir? La representació numèrica hexadecimal cada dígit té un valor del 0 al 15. Fixeu-vos en la taula de comparació entre valors decimals i hexadecimals:

decimal hexadecimal
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F

Per tant, "03" equival a "3" en decimal i "0F" equival a "15" en decimal". Llavors, com representem el valor decimal "16"? Aquí entra en joc el primer dígit del parell. El primer digit s'expressa també en hexadecimal, però en múltiples de 16. La suma dels valors dels dos digits ens proporciona tots els valors, del 0 al 255. Veieu el següent exemple:

  • "10" equival a 16 en decimal (16 x 1) + 0 = 16
  • "FF" equival a 255 en decimal (16 x 15) + 16 = 255
  • "3A" equival a 58 en decimal (16 x 3) + 10 = 58

Llavors, el tres parells 00FF00 equivalen al color verd, ja que el primer i tercer valor valen zero (00) i, el valor que correspon al verd equival a 255 en hexadecimal, és a dir, FF.

Seleccionar un color pel mètode "tècnic"

El mètode tècnic fa ús de la Teoria del color per a la creació d'un esquema de color.

Seleccioneu un color base i, seguidament, escolliu un dels esquemes de color que hem descrit més amunt. Finalment, haureu d'ajustar els valors de saturació, brillantor i contrast per crear una correcta barreja de colors.

Si bé a primera vista sembla una pràctica tediosa i pesada, actualment es pot comptar amb diverses eines en línia que us ajudaran a aconseguir-ho i faran que la creació d'un esquema de color sigui realment fàcil. De fet, aquesta estratègia és semblant a quan parlem dels Entorns Integrats de Desenvolupament, IDE2)s o aplicacions que us ajuden a escriure programes o crear pàgines web.
Podeu escriure el codi HTML d'una pàgina web amb el bloc de notes. És clar que, si la pàgina és realment complexa, aquesta opció, la de treballar amb el bloc de notes, és realment una bogeria. Així, aquests IDEs del color us ajudaran a desenvolupar un esquema de color sense que es converteixi en un procés completament artesanal i tediós.

Adobe Kuler

Adobe Kuler: http://kuler.adobe.com/ és una eina molt complerta per seleccionar un color base, un tipus d'esquema de color i l'aplicació Kuler us generarà una paleta de cinc colors per al projecte de l'espai web.

Seleccionar un color pel mètode "natural"

Si considereu que la selecció de color pel mètode tècnic és massa freda, el mètode "natural" és una alternativa en la qual l'esquema de color passa per seleccionar els colors de diferents seccions prenent com a referència una fotografia.