13/10/2016

ConceptosdediseowebTeoradelcolor

8.Teoradelcolor
LindaGoin.8dejuliodel2008.Publicadoen:tridico,color,tetrdico,monocromtico,teora

Sin mucho color ni grficos, cualquier web se convertira en el sueo de Jakob

Nielsen.AunquelafilosofadeNielsendearquitecturawebesencialtienelasventajas
delaaccesibilidadyusabilidad,lamayoradelosdiseadoreswebquierenaadirun
toque personal a sus webs con muchos elementos de diseo. Afortunadamente, un
diseadorpuedeaadircoloraunawebsinperderaccesibilidadyusabilidadsilaweb
estdiseadateniendoencuentaestascapacidades.Aunquemuchosdiseadoresse
sienten cmodos diseando una web para muchos usuarios, estos mismos
diseadores se pueden sentir incompetentes cuando se trata de elegir colores y
grficos.
En este apartado, trataremos los conceptos bsicos del color y tres combinaciones
cromticassencillasparaqueospodissentirsegurosalahoradeelegirloscolores
paravuestraweb.Continuaremosesteapartadoconotrapartesobrecmosimplificar
estas selecciones de colores. Al fin y al cabo, es ms divertido disfrutar de los
cumplidos sobre el diseo de la web que sudar a la hora de elegir las opciones de
colores.
Loscontenidosdeesteapartadosonlossiguientes:
8.1.Colores,tonosymatices
8.1.1.Combinacionesdecoloresmonocromticas
8.1.2.Combinacionesdecolorescomplementarios
8.1.3.Coloresclidosycoloresfros
8.1.4.Combinacionesdecolorestridicas
8.1.5.Combinacionesdecolorestetrdicas
Resumen
Preguntasderepaso

8.1.Colores,tonosymatices
Los colores, o tonos, se han dividido tradicionalmente en colores primarios,
secundariosyterciarios.Loscoloresprimariossonelrojo,elamarilloyelazul,yse
denominanprimariosporquenohayquemezclarcoloresparaconseguirlos.Siqueris
traducirestoscoloresencoloresweb,podisreproducirlosutilizandosusequivalentes
hex(hexadecimales)#ff0000,#ffff00y#0033cccomosemuestraenlafigura1:

http://mosaic.uoc.edu/ac/le/es/m2/ud3/

1/12

13/10/2016

ConceptosdediseowebTeoradelcolor

Figura1.Loscoloresprimariosysecundarios,ysus
equivalenteshexadecimales.

Los colores secundarios se mezclan a partir de los colores primarios, y son los
siguientes:
Rojo+amarillo=naranja(#ff9900)
Amarillo+azul=verde(#00cc00)
Azul+rojo=violeta(#660099)
Los colores terciarios se mezclan a partir de los colores secundarios y se
encuentranentreloscoloresprimariosysecundariosmostradosenlaruedaanterior.
Aunque los colores web son diferentes de los colores normales "de los pintores",
puedesertiltenerunaruedadecolores(comolaqueseveenlafigura2)ytenerlaa
mano mientras aprendis las diferentes combinaciones de colores. Adems, una
ruedadecoloresosmostrartodosloscolores,tonosymaticesparaempezaraver
las posibilidades de colores de las que disponis. A continuacin, se enumeran
algunostrminosimportantesquehayqueaprender:
Tono(tint):elcolorresultantecuandoseaadeblanco.
Tonalidad(tone):elcolorresultantecuandoseaadegris.
Matiz(shade):elcolorresultantecuandoseaadenegro.

http://mosaic.uoc.edu/ac/le/es/m2/ud3/

2/12

13/10/2016

ConceptosdediseowebTeoradelcolor

Figura2.Unaruedadecoloresreal.

Lasflechasdelafigura2indicancosasdiferentes,asaber:
Ladomsexterior:colorterciariodeamarillonaranja(amarillo+naranja).
Segundolado:tonodeestecolorterciario(blancoaadido).
Tercerlado:tonalidaddelcolor(grisaadido).
Ladomsinterior:matizsobrelaruedaimprimida(negroaadido).
Comosepuedeverenlaruedadecoloresanterior,lacantidaddeblanco,grisynegro
aadidoauncoloresmnima,perosuficienteparaalterarelcolororiginalycrearlo
queseconocecomocombinacindecoloresmonocromtica.

8.1.1.Combinacionesdecoloresmonocromticas
Lascombinacionesdecoloresexistendesdehacesiglos,demaneraquenohayque
reinventar la rueda de colores. Aunque el color de la web sea diferente del color
imprimido, los conceptos son los mismos. Slo es necesario cambiar los nmeros
hexadecimalespornombresdecoloresyhacerquecoincidanlomximoposible.Una
herramienta de la Red que recomendamos para esta tarea es Color Scheme
Generator II, como se observa en la figura 3, que permite determinar las
combinaciones de colores de manera rpida y sencilla, e incluso determinar si los
colores que habis elegido ofrecen suficiente contraste para los usuarios con poca
visinodaltnicos.

Figura3.ColorSchemeGeneratorII.
http://mosaic.uoc.edu/ac/le/es/m2/ud3/

3/12

13/10/2016

ConceptosdediseowebTeoradelcolor

Siquerismsayudaparadecidirsiloscoloresquehabiselegidoofrecenunbuen
contraste, probad el Contrast Analyser de Paciello Group. Esta herramienta
compruebaelcontrasteentreloscoloresdeprimerplanoydelfondo.
Para conseguir el tono, la tonalidad y el matiz para el color amarillo naranja del
generadordecoloresenlnea,seleccionadprimeroelcolorquesealalaflechaenla
imagen mostrada anteriormente. A continuacin, seleccionad Mono en el panel
situadobajolaruedadecoloresyDefault("Predeterminado")enelpaneldelcuadro
deladerecha.SeleccionadtambinNormalVision("VisinNormal")enlaseleccin
delmendesplegabledelaparteinferiorderecha.Nomarquislacasilla"reduceto
'safe' colours" ("reducir a colores seguros") situada sobre el cuadro de colores a no
serqueseisunospuristas.
Eltrminowebsafecolours
El trmino websafe colours ("colores seguros para la web")
provienedeuntiempoenelquelosmonitorespodanmostrar256
colores, de los que slo 216 eran los mismos en las diferentes
plataformasWindows/Mac/Unix,deaqulaexpresinseguroparala
web.Mientrasquealgunospuristastodavasecienala"paletade
colores seguros para la web", los navegadores modernos son
capacesdetratarloqueseconocecomocolorde"24bits".Elcolor
de24bitsrealaentrediezyoncebitsporcanalgenerauntotalde
16.777.216 colores diferentes. En otras palabras, es seguro decir
que la paleta de colores "seguros para la web" ya raramente es
necesaria.
Volvamos a la combinacin de colores monocromtica. Los resultados que debis
obtenersiseguslospasosdescritosanteriormenteson:amarillonaranja(#FFCC00),
tono (#FFF2BF), tonalidad (#FFE680) y matiz (#B38F00). Estos nmeros
hexadecimales son mucho ms fiables que cualquier intento de hacer coincidir una
rueda de colores tangible con la pantalla retroiluminada de un navegador web. Tal
comosugierelapalabramono,estacombinacinsetraduceenunacombinacinde
coloresmonocromtica,comosepuedeverenlafigura4.

Figura4.Unacombinacindecoloresmonocromtica.

Una combinacin de colores monocromtica equivale a un

color y todos sus tonos, tonalidades y matices. Aunque esta
combinacin es la ms sencilla de utilizar, para muchos
diseadores no aporta mucho inters al diseo de una web. En
vez de eso, quiz os atraiga explorar otras combinaciones para
aadirvariedadavuestrosenlaces,imgenesybanners.

8.1.2.Combinacionesdecolorescomplementarios
La siguiente familia de combinaciones de colores que cabe descubrir es la
combinacindecomplementarios,dondeseemparejanloscoloresqueseencuentran
http://mosaic.uoc.edu/ac/le/es/m2/ud3/

4/12

13/10/2016

ConceptosdediseowebTeoradelcolor

directamente opuestos entre ellos en la rueda de colores, como se puede ver en la

figura5.

Figura5.Ejemplosdecombinacionesdecolores
complementarios.

Cuandoseeligeuncolorysucoloropuesto,tambinseincluyentodoslostonos,las
tonalidades y los matices de ambos colores. Ello da una gama ms amplia de
opcionesysetraducebienconlaherramientadecoloresenlneapodisconsultarla
figura6.

Figura6.Unacombinacindecolorescomplementariosenla
herramientadecoloresenlnea.

Enlafigura6,hemoselegidouncolornaranjaconelcolorcomplementarioopuesto:el
azul.Laconfiguracinquehemoselegidoparaconseguirestacombinacinincluyeel
ajuste del Contraste en la parte inferior izquierda, el valor predeterminado en el
men situado bajo el generador y visin normal. Observad que el color principal
seleccionado est marcado con un punto negro en el disco interior de la rueda de
colores (tanto por encima como en lnea en la web del generador) y que el color
complementario opuesto que se ha elegido automticamente est marcado con un
crculo vaco en la anilla interior. Estas marcas facilitan que podis analizar vuestra
combinacindecolores.
Este generador de colores facilita la eleccin de los colores de los enlaces, los
enlaces visitados e incluso las imgenes, ya que proporciona los colores
hexadecimales en la parte superior derecha. Podis mezclar y combinar cualquier
colorpuro(elcolordelapartesuperior)ysutono,tonalidadomatizydeestamanera
encontrarunabuenacombinacindecolores.
ElcasodeGreenpeaceUSA
Greenpeace USA (podis ver la figura 7) es uno de los muchos
sitiosqueutilizanunacombinacindecoloresconcontraste.S,se
puedeveramarilloynaranja,peroloscolorespredominantessonel
http://mosaic.uoc.edu/ac/le/es/m2/ud3/

5/12

13/10/2016

ConceptosdediseowebTeoradelcolor

verdeyelrojo,doscoloresqueestndirectamenteopuestosentre
ellos en la rueda de colores. Con este mtodo de colores
complementariossiemprerealizarisunabuenaeleccin.Dehecho,
elusodeunacombinacindecolores"clidos"y"fros"provocaque
lawebluzcaconelcontrastedecolores.

Figura7.LawebdeGreenpeaceesunbuenejemplode
combinacindecolorescomplementarios.

8.1.3.Coloresclidosycoloresfros
Las combinaciones de colores complementarios son geniales para utilizarlas en las
webs porque contienen colores clidos y fros al mismo tiempo. El uso de estos
colores proporciona contraste y es muy fcil recordar qu colores son clidos y qu
colores son fros, como se puede ver en la figura 8 (y en la web del generador de
colores):

Figura8.Coloresclidos(warm)ycoloresfros(cold).

http://mosaic.uoc.edu/ac/le/es/m2/ud3/

6/12

13/10/2016

ConceptosdediseowebTeoradelcolor

Los colores clidos son los colores que recuerdan el verano, el sol o el fuego. Van
desdelosvioletashastalosamarillos.Loscoloresfrospuedenrecordarlaprimavera,
el hielo o el agua. Estos colores van desde el amarillo verde hasta el violeta. Si
observis cmo funcionan los colores en la rueda, no tardaris en descubrir que no
podiselegiruncolorsinelegirsuopuestoen"temperatura".Demaneraquesielegs
unrojocaliente,elopuestoesunverdefro.O,sielegsunazulverdefro,acabaris
conunrojonaranjapicanteenelotrolado.
Ecolution
Un ejemplo de una web que utiliza de manera consistente una
combinacin de colores clidos/fros es Ecolution, como se puede
verenlafigura9.

Figura9.Ecolution,unbuenejemplodecoloresclidos/fros.

Ecolutiongeneralmenteutilizaelcolorrojocomoacentuacinensu
web en contraste con el logotipo verde. Despus, mezcla los dos
colores en contraste con distintos tonos, tonalidades y matices de
estosdoscolores.Inclusolosnegrosdeunaimagenpuedentender
aserclidosofros,igualquelosblancos.Enconjunto,lafotografa
esclida,loquequedamuybienconelverdeabsolutamentepuro.
Aunque utiliza los mismos colores que Greenpeace, la web de
Ecolution toma menos "brillo" con los tonos y matices ricos de la
fotografa.
Nunca os habrais imaginado que la teora de los colores fuera tan fcil, verdad?
Bien,pues...vamosacomplicareltemaunpoquito.

8.1.4.Combinacionesdecolorestridicas
Una combinacin de colores tridica (podis ver la figura 10) se crea eligiendo un
colorydespuseligiendodoscoloresmsequidistantesentreellosentornoalcrculo,
as:
http://mosaic.uoc.edu/ac/le/es/m2/ud3/

7/12

13/10/2016

ConceptosdediseowebTeoradelcolor

Figura10.Unacombinacindecolorestridica

Hemoselegidoloscoloresprimariosparaestacombinacinporquequeramosquese
viera cmo las combinaciones de colores parecen dar un orden al caos. No es
casualidadqueloscoloresprimariosestndondeestnenlaruedadecolores,yaque
cadacolorcontieneunacantidadigualdecoloressecundariosyterciariosentrecada
primario. Pero una combinacin de colores tridica puede parecer muy vista porque
yasehautilizadoenexceso.Envezdeesto,podiselegiralgunasotrasopcionesde
coloresenelgeneradordecoloresenlneaalgoparecidoalafigura11:

Figura11.Unacombinacindecolorestridicaalternativa

Lacombinacindetradaanteriorseconstruyeapartirdenaranjaamarillo,azulverde
y rojo violeta. Hemos elegido el naranja amarillo en primer lugar (observad el punto
oscuroenlaseccininteriordelaruedadecolores,alaizquierda)y,acontinuacin,
elegid la seleccin Triad situada bajo la rueda. El generador ha elegido
automticamente las opciones tridicas incluyendo todos los tonos, tonalidades y
matices.Loscoloresdeacompaamientoestnmarcadosenlaruedadecolorescon
lospuntosvacos,delamismamaneraqueseindicabaelcolorcomplementarioenel
ejemplomonocromtico.
Aquesdondeunaruedadecoloresrealpuederesultartilporquelosresultadosen
lnea no coinciden mucho con los resultados de una rueda de colores manual. Sin
embargo,cuandohemoscolocadolaherramientaAngle/Distancedebajodelarueda
decoloreshasta"max",parecacoincidirconlaruedarealquetenamosenlamano.
Losresultadosmostradosanteriormentesonlosquemsseacercabanalaruedade
colores.
http://mosaic.uoc.edu/ac/le/es/m2/ud3/

8/12

13/10/2016

ConceptosdediseowebTeoradelcolor

La combinacin de colores tridica tambin contiene colores clidos y fros, aunque

predominar una temperatura. Generalmente, la temperatura que eclipsar a la otra
es la que hayis elegido para el primer plano. En este caso, inicialmente nosotros
preferimoselnaranjaamarillo,queesuncolorclido.Porlotanto,predominarnlos
colores clidos mostrados anteriormente y uno de los otros dos colores tender al
contrastefro.

Figura12.PuzzlePirates,unabuenacombinacindecolores
tridica.

PuzzlePirates,quesemuestraenlafigura12,utilizaunacombinacintridicaensu
pginadeinicio.Utilizanlacombinacinprimariarojoazulamarilloyestacombinacin
primaria es perfecta para una web de juegos infantiles. Observad que predomina el
azul y que los rojos y amarillos se utilizan para acentuar y conducir la vista por la
pgina.

8.1.5.Combinacionesdecolorestetrdicas
Cuantos ms colores elijis, ms complicada ser la combinacin de colores. No
obstante,untrucoesencontraruntono,tonalidadomatizylimitarseaestaszonasdel
tablero en vez de mezclar colores puros y sus tonos, tonalidades y matices. Este
mtodofuncionabienconunacombinacindecolorescomolacombinacintetrdica
de cuatro colores. Esta combinacin (podis ver la figura 13) es casi igual que la
combinacin complementaria, con la diferencia de que se utilizan dos
complementariosequidistantes.

Figura13.Combinacionesdecolorestetrdicas.

Enlafigura14semuestracmofuncionaunacombinacintetrdicaenlnea:
http://mosaic.uoc.edu/ac/le/es/m2/ud3/

9/12

13/10/2016

ConceptosdediseowebTeoradelcolor

Figura14.Unacombinacindecolorestetrdicaenel
generadorenlnea

Fijaosenelpuntonegrobajoelrojoenlaruedadecolores,alaizquierda.steesel
primer color que hemos seleccionado despus, hemos pinchado en el
botn Tetraddebajo de la rueda. Los cuatro colores que han aparecido esta vez
tambin eran un poco diferentes de la rueda de colores que tenamos en la mano,
perocuando hemos colocadolaherramienta Angle/Distance debajo de la rueda de
coloreshasta"max",hacoincididomuchoconlaruedadecoloresquetenamosenla
mano. Los resultados mostrados anteriormente son los que ms se acercaban a la
ruedadecolores.
Esta combinacin de colores puede complicarse bastante, de manera que lo que
podraishacer,llegadosaestepunto,eselegirloscuatrotonos,tonalidadesomatices
de los colores de la columna de la derecha. Podis elegir vuestras opciones
pinchando en las flechas del extremo derecho. Por ejemplo, la figura 15 muestra un
ejemplodebloquerellenadoconlostonosdeestacombinacindecolores:

Figura15.Tonostetrdicos

Yenlafigura16semuestraunejemplodelastonalidadesdelagamademedios:

http://mosaic.uoc.edu/ac/le/es/m2/ud3/

10/12

13/10/2016

ConceptosdediseowebTeoradelcolor

Figura16.Tonalidadesdelagamademediostetrdica.

Si observis atentamente los cuadros anteriores, veris que el generador tambin

facilita cuatro combinaciones de colores monocromticas. Estas combinaciones
aparecen tanto en la columna de la derecha como en cada cuadrado del cuadrado
mayor.
JaneGoodallInstitute
La web del Jane Goodall Institute (figura 17) es uno de los pocos
sitios que realmente resuelve bien la combinacin de colores
tetrdica.Observadelprpura,eltonoamarillo,losreflejosrojosde
lafotografa(lawebcontienemsrojomsadelanteenlapgina)y
losverdes.Elprpuranocoincideexactamenteconlacombinacin
decoloresgeneradaporlaherramientadecoloresenlneatiendea
unrojovioleta,peroseacercalosuficientealcomoparautilizarlo
comoejemplodecmosepuedeutilizartantounaruedadecolores
comoelgeneradordecoloresenlneaparacrearideasparavuestra
web.

Figura17.LawebdelJaneGoodallInstitute:unbuenejemplo
decombinacindecolorestetrdica

http://mosaic.uoc.edu/ac/le/es/m2/ud3/

11/12

13/10/2016

ConceptosdediseowebTeoradelcolor

Ahora, cuando naveguis por la web buscando ideas de colores y diseos, tened a
mano la rueda de colores para aprender ms cosas sobre cmo los diseadores
utilizanlascombinacionesdecoloresenvuestraswebspreferidas.

Resumen
Aunque las combinaciones de colores pueden parecer complicadas, todas suponen
ciertas "reglas". Estas directrices facilitan la comprensin de qu colores funcionan
entreellosparaaadirintersycontrasteaunaweb.
Elmotivoporelqueexistenlasruedasdecoloresquelagentelasutilice.Lasruedas
y herramientas de colores como el Color Generator en lnea facilitan la eleccin del
color,inclusoadiseadoressinexperiencia.
Las cuatro combinaciones de colores que se tratan en este apartado son
monocromticas, complementarias, tridicas y tetrdicas. Aunque existen otras
combinaciones de colores, estas cuatro combinaciones son las ms fciles de
entendereimplementar.

Preguntasderepaso
1.Mencionad los tres colores primarios y explicad por qu se denominan colores
primarios.
2.Mencionadlostrescoloressecundariosyloscoloresprimariosqueseutilizanpara
conseguirestastonalidadessecundarias.
3.Describidcmosecreauntono,unatonalidadyunmatiz.
4.Quesunacombinacindecoloresmonocromtica?
5.Quesunacombinacindecolorescomplementarios?
6.Describidloscoloresclidosyfros.
7.Qu es una combinacin de colores tridica? Podis seleccionar tres colores
queencajaranenestacombinacin?
8.Qu es una combinacin de colores tetrdica? Podis seleccionar cuatro
coloresqueencajaranenestacombinacin?
9.Qucombinacindecoloresparecemsfcildeutilizar?
10.Qucombinacindecoloresparecelamscomplicada?
Lasltimasdospreguntasnotienenrespuestasdeltipo"correcta"o"incorrecta".

http://mosaic.uoc.edu/ac/le/es/m2/ud3/

12/12