8. Teoria del color
Linda Goin. 8 de juliol del 2008. Publicat a: triàdic, color, tetràdic, monocromàtic, teoria
Sense gaire color ni gràfics, qualsevol web es convertiria en el somni de Jakob Nielsen. Encara que la filosofia de Nielsen d'arquitectura web essencial té els avantatges de l'accessibilitat i usabilitat, la majoria de dissenyadors web volen afegir un toc personal als seus webs amb molts elements de disseny. Afortunadament, un dissenyador pot afegir color a un web sense perdre accessibilitat i usabilitat si el web està dissenyat tenint en compte aquestes capacitats. Encara que molts dissenyadors se senten còmodes dissenyant un web per a molts usuaris, aquests mateixos dissenyadors poden sentir-se incompetents quan es tracta d'escollir colors i gràfics.
En aquest apartat tractaré els conceptes bàsics del color i tres combinacions cromàtiques senzilles perquè us pugueu sentir segurs a l'hora de triar els colors per al vostre web. Continuaré aquest apartat amb una altra part sobre com simplificar aquestes seleccions de colors. Al cap i a la fi, és més divertit gaudir dels compliments sobre el disseny del web que suar a l'hora de triar les opcions de colors.
Els continguts d'aquest apartat són els següents:
8.1. Colors, tons i matisos
Els colors, o tons, s'han dividit tradicionalment en colors primaris, secundaris i terciaris. Els colors primaris són el vermell, el groc i el blau, i s'anomenen colors primaris perquè no cal barrejar colors per aconseguir-los. Si voleu traduir aquests colors en colors web, podeu reproduir-los utilitzant els seus equivalents hex (hexadecimals) #ff0000, #ffff00 i #0033cc com es mostra a la figura 1:
Figura 1. Els colors primaris i secundaris, i els seus equivalents hexadecimals.
Els colors secundaris es barregen a partir dels colors primaris, i són els següents:
Vermell + Groc = Taronja (#ff9900)
Groc + Blau = Verd (#00cc00)
Blau + Vermell = Violeta (#660099)
Els colors terciaris es barregen a partir dels colors secundaris i es troben entre els colors primaris i secundaris mostrats a la roda anterior.
Malgrat que els colors web són diferents dels colors normals "dels pintors", pot ser útil tenir una roda de colors (com la que es veu a la figura 2) i tenir-la a mà mentre apreneu les diferents combinacions de colors. A més, una roda de colors us mostrarà tots els colors, tons i matisos per a començar a veure les possibilitats de colors de què disposeu. A continuació s'enumeren alguns termes importants que cal aprendre:
To: el color resultant quan s'afegeix blanc
Tonalitat: el color resultant quan s'afegeix gris
Matís: el color resultant quan s'afegeix negre
Figura 2. Una roda de colors real.
Les fletxes de la figura 2 indiquen coses diferents, a saber:
Banda més exterior: color terciari de groc taronja (groc + taronja)
Segona banda: to d'aquest color terciari (blanc afegit)
Tercera banda: tonalitat del color (gris afegit)
Banda més interior: matís sobre la roda impresa (negre afegit)
Com es pot veure a la roda de colors anterior, la quantitat de blanc, gris i negre afegit a un color és mínima, el suficient per a alterar el color original i crear el que es coneix com a combinació de colors monocromàtica.
8.1.1. Combinacions de colors monocromàtiques
Les combinacions de colors existeixen des de fa segles, de manera que no cal reinventar la roda de colors. Encara que el color del web sigui diferent del color imprès, els conceptes són els mateixos. Només cal canviar els números hexadecimals per noms de colors i fer que coincideixin el màxim possible. Una eina de la xarxa que recomano per a aquesta tasca és Color Scheme Generator II, com s'observa a la figura 3, que permet determinar les combinacions de colors de manera ràpida i senzilla, i fins i tot determinar si els colors que heu escollit ofereixen prou contrast per als usuaris amb poca visió o daltònics.
Figura 3. Color Scheme Generator II.
Si voleu més ajuda per a decidir si els colors que heu triat ofereixen un bon contrast, proveu el Contrast Analyser de Paciello Group. Aquesta eina comprova el contrast entre els colors de primer pla i del fons.
Per a aconseguir el to, la tonalitat i el matís per al color groc taronja del generador de colors en línia, seleccioneu primer el color que assenyala la fletxa a la imatge mostrada anteriorment. A continuació, seleccioneu Mono al panell situat sota la roda de colors i Default (Predeterminat) al panell del quadre de la dreta. Seleccioneu també Normal Vision (visió normal) a la selecció del menú desplegable de la part inferior dreta. No marqueu la casella "reduce to safe' colours" (reduir a colors segurs) situada sobre el quadre de colors tret que sigueu uns puristes.
El terme "web-safe colours"
El terme "web-safe colours" (colors segurs per al web) prové d'un temps en què els monitors podien mostrar 256 colors, dels quals només 216 eren els mateixos a les diferents plataformes Windows/Mac/Unix, d'aquí l'expressió "segur per al web". Mentre que alguns puristes encara se cenyeixen a la "paleta de colors segurs per al web", els navegadors moderns són capaços de tractar el que es coneix com a color de "24 bits". El color de 24 bits real a entre deu i onze bits per canal genera un total de 16.777.216 colors diferents. En altres paraules, és segur dir que la paleta de colors "segurs per al web" ja rarament és necessària.
Tornem a la combinació de colors monocromàtica. Els resultats que heu d'obtenir si seguiu els passos descrits anteriorment són: groc taronja (#FFCC00), to (#FFF2BF), tonalitat (#FFE680) i matís (#B38F00). Aquests números hexadecimals són molt més fiables que qualsevol intent de fer coincidir una roda de colors tangible amb la pantalla retroil·luminada d'un navegador web. Tal com suggereix la paraula "Mono", aquesta combinació es tradueix en una combinació de colors monocromàtica, com es pot veure a la figura 4.
Figura 4. Una combinació de colors monocromàtica.
Una combinació de colors monocromàtica equival a un color i tots els seus tons, tonalitats i matisos. Encara que aquesta combinació és la més senzilla d'utilitzar, per a molts dissenyadors no aporta gaire interès al disseny d'un web. En comptes d'això, potser us atragui explorar altres combinacions per a afegir varietat als vostres enllaços, imatges i bàners.
8.1.2. Combinacions de colors complementaris
La següent família de combinacions de colors que cal descobrir és la combinació de complementaris, on s'emparellen els colors que es troben directament oposats entre ells a la roda de colors, com es pot veure a la figura 5.
Figura 5. Exemples de combinacions de colors complementaris.
Quan es tria un color i el seu color oposat, també s'inclouen tots els tons, tonalitats i matisos d'ambdós colors. Això dóna una gamma més àmplia d'opcions i es tradueix bé amb l'eina de colors en línia; consulteu la figura 6.
Figura 6. Una combinació de colors complementaris a l'eina de colors en línia.
A la figura 6 he escollit un color taronja amb el color complementari oposat: el blau. La configuració que he escollit per a aconseguir aquesta combinació inclou l'ajustament del Contrast a la part inferior esquerra, el valor predeterminat al menú situat sota del generador i visió normal. Observeu que el color principal seleccionat està marcat amb un punt negre al disc interior de la roda de colors (tant per sobre com en línia al web del generador) i que el color complementari oposat que s'ha triat automàticament està marcat amb un cercle buit a l'anella interior. Aquestes marques faciliten que pugueu analitzar la vostra combinació de colors.
Aquest generador de colors facilita l'elecció dels colors dels enllaços, els enllaços visitats i fins i tot les imatges, ja que proporciona els colors hexadecimals a la part superior dreta. Podeu barrejar i combinar qualsevol color pur (el color de la part superior) i el seu to, tonalitat o matís i d'aquesta manera trobar una bona combinació de colors.
El cas de Greenpeace USA
Greenpeace USA (vegeu la figura 7) és un dels molts llocs que utilitzen una combinació de colors amb contrast. Sí, es poden veure grocs i taronges, però els colors predominants són el verd i el vermell, dos colors que estan directament oposats entre ells a la roda de colors. Amb aquest mètode de colors complementaris sempre fareu una bona elecció. De fet, l'ús d'una combinació de colors "càlids" i "freds" fa que el web llueixi amb el contrast de colors.
Figura 7. El web de Greenpeace és un bon exemple de combinació de colors complementaris.
8.1.3. Colors càlids i colors freds
Les combinacions de colors complementaris són genials per a utilitzar-les als webs, perquè contenen colors càlids i freds alhora. L'ús d'aquests colors proporciona contrast i és molt fàcil recordar quins colors són "càlids" i quins colors són "freds", com es pot veure a la figura 8 (i al web del generador de colors):
Figura 8. Colors càlids (warm) i colors freds (cold).
Els colors càlids són els colors que recorden l'estiu, el sol o el foc. Van dels violetes als grocs. Els colors freds poden recordar la primavera, el gel o l'aigua. Aquests colors van del groc verd fins al violeta. Si observeu com funcionen els colors a la roda, no trigareu a descobrir que no podeu triar un color sense triar el seu oposat en "temperatura". De manera que si trieu un vermell calent, l'oposat és un verd fred. O, si trieu un blau verd fred, acabareu amb un vermell taronja picant a l'altra banda.
Ecolution
Un exemple d'un web que utilitza de manera consistent una combinació de colors càlids/freds és Ecolution, com es pot veure a la figura 9.
Figura 9. Ecolution: un bon exemple de colors càlids/freds.
Ecolution generalment fa servir el color vermell com a accentuació al seu web en contrast amb el logotip verd. Després barregen els dos colors en contrast amb diversos tons, tonalitats i matisos d'aquests dos colors. Fins i tot els "negres" d'una imatge poden tendir a ser "càlids" o "freds", igual que els blancs. En conjunt, la fotografia és "càlida", la qual cosa queda molt bé amb el verd absolutament pur. Encara que utilitzen els mateixos colors que Greenpeace, el web d'Ecolution agafa menys "lluentor" amb els tons i matisos rics de la fotografia.
Mai us hauríeu imaginat que la teoria dels colors fos tan fàcil, oi? Bé, doncs anem a complicar el tema una miqueta
8.1.4. Combinacions de colors triàdiques
Una combinació de colors triàdica (vegeu la figura 10) es crea triant un color i després triant dos colors més que són equidistants entre ells al voltant del cercle, així:
Figura 10. Una combinació de colors triàdica.
He escollit els colors primaris per a aquesta combinació perquè volia que es veiés com les combinacions de colors semblen donar un ordre al caos. No és casualitat que els colors primaris siguin on són a la roda de colors, perquè cada color conté una quantitat igual de colors secundaris i terciaris entre cada primari. Però una combinació de colors triàdica pot semblar molt vista perquè ja s'ha emprat en excés. En comptes d'això, podeu triar algunes altres opcions de colors al generador de colors en línia; alguna cosa com la figura 11:
Figura 11. Una combinació de colors triàdica alternativa.
La combinació de tríada anterior es construeix a partir de taronja groc, blau verd i vermell violeta. He triat el taronja groc en primer lloc (observeu el punt fosc a la secció interior de la roda de colors, a l'esquerra) i, a continuació, trieu la selecció Triad situada sota la roda. El generador ha escollit automàticament les opcions triàdiques incloent tots els tons, tonalitats i matisos. Els colors d'acompanyament estan marcats a la roda de colors amb els punts buits, de la mateixa manera que s'indicava el color complementari a l'exemple monocromàtic.
Aquí és on una roda de colors real pot resultar útil, perquè els resultats en línia no coincideixen gaire amb els resultats d'una roda de colors manual. Tanmateix, quan he col·locat l'eina Angle/Distance de sota la roda de colors fins a "max", semblava coincidir amb la roda real que tenia a la mà. Els resultats mostrats anteriorment són els que més s'apropaven a la roda de colors.
La combinació de colors triàdica també conté colors càlids i freds, encara que predominarà una temperatura. Generalment, la temperatura que eclipsarà l'altra és la que hàgiu triat per al primer pla. En aquest cas, inicialment jo vaig escollir el taronja groc, que és un color càlid. Per tant, predominaran els colors càlids mostrats anteriorment i un dels altres dos colors tendirà al contrast fred.
Figura 12. Puzzle Pirates: una bona combinació de colors triàdica.
Puzzle Pirates, que es mostra a la figura 12, utilitza una combinació triàdica a la seva pàgina d'inici. Utilitzen la combinació primària vermell-blau-groc i aquesta combinació primària és perfecta per a un web de jocs infantils. Observeu que predomina el blau i que els vermells i grocs es fan servir per accentuar i conduir la vista per la pàgina.
8.1.5. Combinacions de colors tetràdiques
Com més colors trieu, més complicada serà la combinació de colors. No obstant això, un truc és trobar un to, tonalitat o matís i limitar-se a aquestes zones del tauler en comptes de barrejar colors purs i els seus tons, tonalitats i matisos. Aquest mètode funciona bé amb una combinació de colors com la combinació tetràdica de quatre colors. Aquesta combinació (vegeu la figura 13) és gairebé igual que la combinació complementària, amb la diferència que s'utilitzen dos complementaris equidistants.
Figura 13. Combinacions de colors tetràdiques.
A la figura 14 es mostra com funciona una combinació tetràdica en línia:
Figura 14. Una combinació de colors tetràdica al generador en línia.
Fixeu-vos en el punt negre sota el vermell a la roda de colors, a l'esquerra. Aquest és el primer color que he triat; després, he fet clic al botó Tetrad de sota la roda. Els quatre colors que han aparegut aquesta vegada també eren una mica diferents de la roda de colors que tenia a la mà, però quan he col·locat l'eina Angle/Distance de sota la roda de colors fins a "max", ha coincidit força amb la roda de colors que tenia a la mà. Els resultats mostrats anteriorment són els que més s'apropaven a la roda de colors.
Aquesta combinació de colors pot complicar-se bastant, de manera que el que podríeu fer arribats a aquest punt és escollir els quatre tons, tonalitats o matisos dels colors de la columna de la dreta. Podeu triar les vostres opcions fent clic a les fletxes de l'extrem dret. Per exemple, la figura 15 mostra un exemple de bloc omplert amb els tons d'aquesta combinació de colors:
Figura 15. Tons tetràdics.
I a la figura 16 es mostra un exemple de les tonalitats de la gamma de mitjos:
Figura 16. Tonalitats de la gamma de mitjos tetràdica.
Si observeu atentament els quadres anteriors, veureu que el generador també facilita quatre combinacions de colors monocromàtiques. Aquestes combinacions apareixen tant a la columna de la dreta com a cada quadrat del quadrat més gran.
Jane Goodall Institute
Figura 17. El web del Jane Goodall Institute: un bon exemple de combinació de colors tetràdica.
El web del Jane Goodall Institute (figura 17) és un dels pocs llocs que realment resol bé la combinació de colors tetràdica. Observeu el porpra, el to groc, els reflexos vermells de la fotografia (el web conté més vermell més endavant a la pàgina), i els verds. El porpra no coincideix exactament amb la combinació de colors generada per l'eina de colors en línia tendeix a un vermell violeta, però s'hi apropa prou per a utilitzar-lo com a exemple de com es pot emprar tant una roda de colors com el generador de colors en línia per a crear idees per al vostre web.
Ara, quan navegueu pel web buscant idees de colors i dissenys, tingueu a mà la roda de colors per a aprendre més coses sobre com els dissenyadors utilitzen les combinacions de colors als vostres webs preferits.
Resum
Encara que les combinacions de colors poden semblar complicades, totes les combinacions de colors comporten certes "regles". Aquestes directrius faciliten la comprensió de quins colors funcionen entre ells per a afegir interès i contrast a un web.
El motiu pel qual existeixen les rodes de color és que la gent les utilitzi. Les rodes i eines de colors com el Color Generator en línia faciliten l'elecció del color, fins i tot a dissenyadors sense experiència.
Les quatre combinacions de colors que es tracten en aquest apartat són monocromàtiques, complementàries, triàdiques i tetràdiques. Encara que existeixen altres combinacions de colors, aquestes quatre combinacions de colors són les més fàcils d'entendre i implementar.
Preguntes de repàs
Esmenteu els tres colors primaris i expliqueu per què s'anomenen colors primaris.
Esmenteu els tres colors secundaris i els colors primaris que s'utilitzen per a aconseguir aquestes tonalitats secundàries.
Descriviu com es fa un to, una tonalitat i un matís.
Què és una combinació de colors monocromàtica?
Què és una combinació de colors complementaris?
Descriviu els colors "càlids" i "freds".
Què és una combinació de colors triàdica? Podeu seleccionar tres colors que encaixarien en aquesta combinació?
Què és una combinació de colors tetràdica? Podeu seleccionar quatre colors que encaixarien en aquesta combinació?
Quina combinació de colors sembla més fàcil d'utilitzar?
Quina combinació de colors sembla la més complicada?
Les darreres dues preguntes no tenen respostes del tipus "correcta" o "incorrecta".
