Escolar Documentos
Profissional Documentos
Cultura Documentos
ConceptosdediseowebTeoradelcolor
8.Teoradelcolor
LindaGoin.8dejuliodel2008.Publicadoen:tridico,color,tetrdico,monocromtico,teora
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.
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
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
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.
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