Teoria del Color

Diapositivas tomadas de Internet

 Teoria del Color
Constantemente recibimos impresiones de color
por medio de nuestra vista, y estas impresiones
tienen la facultad de excitarnos, de
tranquilizarnos, de ponernos de buen humor o
de inspirarnos pena. Es el mundo de color.
El color es la primera forma de
comunicacin entre una pgina web y el
usuario.
Modelos de color
 Color luz, sntesis aditiva
Los colores producidos por luces (en el monitor de nuestro
ordenador, en el cine, televisin, etc) tienen como colores
primarios, al rojo, el verde y el azul ( RGB) cuya fusin de estos,
crean y componen la luz blanca, por eso a esta mezcla se le
denomina, sntesis aditiva y las mezclas parciales de estas luces
dan origen a la mayora de los colores del espectro visible.
Color pigmento, sntesis sustractiva

Los colores sustractivos, son colores basados en la

luz reflejada de los pigmentos aplicados a las
superfcies. Forman esta sntesis sustractiva, el
color magenta, el cyan y el amarillo. Son los colores
bsicos de las tintas que se usan en la mayora de
los sistemas de impresin, motivo por el cual estos
colores han desplazado en la consideracin de
colores primarios a los tradicionales.
La mezcla de los tres colores primarios pigmento en
teora debera producir el negro, el color ms
oscuro y de menor cantidad de luz, por lo cual esta
mezcla es conocida como sntesis sustractiva. En la
prctica el color as obtenido no es lo bastante
intenso, motivo por el cual se le agrega negro
pigmento conformandose el espacio de color CMYK.
 Tipos de Color
Circulo Cromtico
Descomposicin en colores de la luz solar, que nos
va a ayudar a clasificar stos y a obtener sus
combinaciones idneas.
 Colores clidos y fros

Text
Text

Los colores clidos dan sensacin de actividad, de

alegra, de dinamismo, de confianza y amistad

Los colores fros dan sensacin de tranquilidad, de

seriedad, de distanciamiento.
Ejemplo de
una
aplicacin
Web

Qu
observa; que
le llama la
atencin de
esta pgina?

Qu imagen
te da la
empresa?

Qu opinas
de la pgina?
Ejemplo de
una
aplicacin
Web

Qu
observa; que
le llama la
atencin de
esta pgina?

Qu imagen
le da la
empresa?

Qu opina
de la pgina?
 Colores claros o luminosos y oscuros

Los colores claros inspiran limpieza, juventud, jovialidad,

como ocurre con amarillos, verdes y naranjas, mientras
que los colores oscuros inspiran seriedad, madurez, calma,
como es el caso de los tonos rojos, azules y negros.
 Colores apagados o sucios y los
colores pastel

Los colores apagados expresan oscuridad, muerte,

seriedad, mientras que los pastel sugieren luz,
frescura y naturalidad.
 Propiedades del Color
Matiz (Hue)
Es el estado puro del color, sin el blanco o negro
agregados. Se refiere al recorrido que hace un
tono hacia uno u otro lado del circulo cromtico
Saturacin o Intensidad

Representa la pureza o intensidad de un color

particular, la viveza o palidez del mismo.
Valor o Brillo (Value)
Es un trmino que se usa para describir que tan
claro u oscuro parece un color, y se refiere a la
cantidad de luz percibida.
 Grupos de Colores

Tomando como base la rueda de colores podemos

definir los siguientes grupos de colores, que nos
crearn buenas combinaciones en una pgina
web:
Colores acromticos : aquellos situados en la zona
central del crculo cromtico, prximos al centro de
este, que han perdido tanta saturacin que no se
aprecia en ellos el matiz original.
 Los colores que se
utilizan en esta imagen
son acromticos

son acromticos del col azul o rosa, o es combinacin entre

ambos?
 Colores cromticos grises : situados cerca del centro
del crculo cromtico, pero fuera de la zona de colores
acromticos, en ellos se distingue el matiz original,
aunque muy poco saturado.
Los colores de esta imagen son
cromticos grises

Observe los tonos verdes y

amarillos de la imagen
Colores monocromticos : variaciones de saturacin
de un mismo color (matiz), obtenidas por
desplazamiento desde un color puro hasta el centro
del crculo cromtico.
Colores que
cupan en la
gen son
ocromticos

Observe los
diferentes matices
Ejemplo de
una
aplicacin
Web

Qu
observa; que
le llama la
atencin de
esta pgina?

Con que
imagen te
quedas de la
empresa?

Qu opinas
de la pgina?
Ejemplo de
una
aplicacin
Web

Qu
observas?

Que te llama
la atencin de
esta pgina?

Qu imagen
te da la
empresa?

Qu opinas
de la pgina?
Colores complementarios : colores que se
encuentran simtricos respecto al centro de la
rueda. El Matiz vara en 180 entre uno y otro.
Ejemplo de
una
aplicacin
Web

Observe el
uso de tres
colores
complemen-
tarios
(verde,
naranja y
blanco)
 Colores complementarios cercanos : tomando como
base un color en la rueda y despus otros dos que
equidisten del complementario del primero.
 Dobles complementarios : dos parejas de colores
complementarios entre s.
 Observe que utilizan en la
iluminacin dos colores
complementarios

Iluminacin del Gran Arco de la

Fraternidad (Grande Arche de la
Fraternit), Paris
 Tradas complementarias : tres colores equidistantes
tanto del centro de la rueda, como entre s, es decir,
formando 120 uno del otro.
Observe la misma figura con diferentes triadas de colores
complementarias

Observe cuando resaltan y cuando se ocultan los rasgos

 Gamas mltiples : escala de colores entre dos
siguiendo una graduacin uniforme. Cuando los
colores extremos estn muy prximos en el crculo
cromtico, la gama originada es conocida tambin
con el nombre de colores anlogos.
Observe que para
conformar la gama
multiple de colores
se juega con la
intensidad y brillo
Ejemplo de
una
aplicacin
Web

Observe que
la
composicin
se realiza con
una gama
mutiple del
color
 Mezcla brillante-tenue : se elige un color brillante
puro y una variacin tenue de su complementario.
La imagen utiliza
colores mezclando
brillante y tenue

Observe que la
composicin del color
es una Trada
complementaria, con
mezcla brillante
tenue
 Contrastes de color
El efecto de contraste es recproco, ya que afecta a
los dos colores que intervienen.
Existen diferentes tipos de contrastes:

CONTRASTE DE LUMINOSIDAD
Denominado contraste claro-oscuro, se produce al
confrontar un color claro o saturado con blanco y
un color oscuro o saturado de negro.
CONTRASTE DE LUMINOSIDAD
Observe qu
luminosidad
este caso
provoca que
destaque
 Observe que es tanta
luminosidad que
resalta lo obscuro

CONTRASTE DE LUMINOSIDAD

46
47
CONTRASTE DE LUMINOSIDAD

Observe que la
luminosidad, en
este caso
provoca que
destaque
49
CONTRASTE DE VALOR
Cuando se presentan dos valores diferentes en
contraste simultneo, el ms claro parecer ms
alto y el ms oscuro, mas bajo.
CONTRASTE DE VALOR
CONTRASTE DE SATURACIN
Se origina de la modulacin de un tono puro,
saturndolo con blanco, negro o gris. El contraste
puede darse entre colores puros o bien por la
confrontacin de stos con otros no puros.
Contraste de
saturacin
CONTRASTE DE TEMPERATURA
Es el contraste producido al confrontar un color
clido con otro fro.
CONTRASTE DE
57
TEMPERATURA
58
CONTRASTE DE COMPLEMENTARIOS
Dos colores complementarios son los que ofrecen
juntos mejores posibilidades de contraste, aunque
resultan muy violentos visualmente combinar dos
colores complementarios intensos.
 CONTRASTE DE
COMPLEMENTARIOS
El color en la web
 Colores disponibles para la web
El sistema operativo identifica tres colores bsicos,
a partir de los cuales construye todos los dems
mediante un proceso de mezcla por unidades de
pantalla (pixels). En 1994 la empresa Netscape
estableci una subdivisin del crculo cromtico en
216 colores equidistantes entre s.
Tradicionalmente se ha
considerado como paleta
de colores segura la que
hemos antes
mencionado, formada por
los 216 colores, que
recibe el nombre de
WebSafe o Web Safe
Colors
 Colores y partes de una pgina

En los casos de pginas

ms complejas, y
desde el punto de vista
de lo que observa el
usuario, podemos
dividir estas en:
cabecero o dintel
cuerpo o seccin principal
men
pie de pgina
Las pginas pueden tener todos los elemento o
carecer de algunos de ellos.
Los enlaces que figuren deben ser claramente
diferenciados por el usuario, sobre todo si la pgina va
dirigida a al pblico en general.
 Eleccin de la paleta para un
sitio web

A la hora construir una pgina lo primero que

tenemos que tener claro es la gama de colores
que vamos a emplear en sus distintas partes para
definir su pauta cromtica.
Podemos considerar las siguientes paletas genricas:
Observe un ejemplo de la
aplicacin de las paletas
de colores en decoracin
Podemos considerar las siguientes paletas genricas:
Observe un ejemplo
de la aplicacin de las
paletas en decoracin
Reglas generales

79
Adems, podemos seguir una serie de reglas generales
que nos orientar:
Los colores primarios, puros, brillantes, son demasiado
comunes, por lo que dan muy poca informacin al ojo.
Pginas destinadas a un pblico general deben estar
basadas en combinaciones blanco-negro- color
logotipo.
Pginas de empresa o de instituciones deben estar
diseadas de acuerdo con los colores corporativos de
la misma, incluyendo siempre el logotipo.
Pginas orientadas a un pblico joven pueden adoptar
colores vivos, primarios, con altos contrastes entre
fondo y contenido.
Pginas destinadas a un pblico adulto deben estar
diseadas con colores serios, elegantes, fros, sin
altos contrastes de tono.
Pginas de divulgacin, como manuales y artculos,
deben presentar el texto de forma que destaque
adecuadamente sobre el fondo, sin usar colores
chillones que cansen la vista.
Pginas exticas y a la vez elegantes se pueden
obtener con fondo negro o color muy oscuro y letras
y/o motivos dorados, blancos o prpuras-rojos.
Pginas destinadas a ser impresas por el usuario final
no deben emplear colores oscuros como fondo, ya que
obligar a dar colores claros a los textos para que se
pudieran visualizar.
 Conclusin del estudio de
algunos colores

Describiremos las sensaciones que

producen algunos colores como el
rojo, el verde y el azul, as como su
posible uso y su significado en la
web
Rojo
 El rojo es el nico color brillante de verdad
y puro en su composicin
Es un color clido, asociado con el sol y el
calor
Sugiere vitalidad, entusiasmo, agitacin,
intensidad, fuerza, calor, fuego, audacia,
valor, pasin, sexo, virilidad , amor,
clera, coraje, sangre y crueldad
Es el color ms sensual de todo el crculo
cromtico.
 Tambin sugiere alarma, peligro,
violencia, ira y enfado
lo utiliza en todo tipo de indicaciones de
prohibicin y peligro.
 En una composicin puede ser usado
para llamar la atencin, para incitar una
accin o para marcar los elementos ms
importantes de una composicin o pgina
web, pero cuando es usado en gran
cantidad cansa la vista en exceso.
 Un problema asociado al uso del color
rojo es la mala degradacin que ofrece
Web en con tonos rojos
Web en con tonos rojos, sin abusar del color
Verde
 El verde es el color ms tranquilo y
sedante de todos.
Es el color de la calma indiferencia: no
transmite alegra, tristeza o pasin
Est asociado a conceptos como salud,
dinero, frescura, crecimiento, abundancia,
fertilidad, naturaleza, plantas, bosques,
vegetacin, primavera, frescor,
esmeralda, honor, cortesa, civismo y
vigor.
 Su paleta de
variaciones es rica en
colores aprovechables
para el diseo grfico
en la web.
El verde que se
combina o tiende al
amarillo cobra fuerza
activa y alegria.
Si se combina con el
azul y este ltimo
predomina resulta ms
sobrio y sofisticado.
 En las composiciones grficas y pginas
web da buen juego.
Sus degradados son buenos y sus
variaciones tonales tambin, formando
gamas apropiadas para diseo.
Observe que no lastima el abuso del uso del color
Azul
 El color azul es el smbolo de la
profundidad,Inmaterial y fro

Expresa armona, amistad, fidelidad,

serenidad, sosiego, verdad, dignidad,
confianza, masculinidad, sensualidad y
comodidad.

El azul claro puede sugerir optimismo.

 Cuanto ms se clarifica ms pierde
atraccin y se vuelve indiferente y vaco.

Cuanto ms se oscurece ms atrae hacia

el infinito.

Posee tambin la virtud de crear la ilusin

ptica de retroceder
 Est asociado a conceptos como
seriedad, compromiso, lealtad, justicia y
fidelidad, pero tambin puede expresar
melancola, tristeza, pasividad y
depresin.

Si es muy plido puede inspirar frescura e

incluso fro.
 Si es intermedio, da sensacin
de elegancia, de frescura.

Si es oscuro da sensacin de
espiritualidad, de seriedad, de
responsabilidad.
 El azul es un color que da mucho juego en las
composiciones grficas en general y en las
pginas web en concreto.

Es utilizado ampliamente como color

corporativo, por la seriedad y confianza que
inspira, y admite buenas degradaciones,
pudiendo ser el color dominante en una pgina.
 Combina muy bien con su
complementario, el naranja, y con las
variaciones de ste, siendo tpicos los
fondos azules con textos naranjas
 Es un color que influye sobre el apetito,
disminuyendo ste, seguramente porque
no hay ningn alimento azul en la
naturaleza, por lo que no es aconsejable
su uso para una pgina sobre recetas de
cocina o productos alimenticios.
Amarillo
 Es el color ms luminoso, ms clido,
ardiente y expresivo.

Es un color optimista, moderno, y

denota alegra, entusiasmo, pasin,
sexo, fuerza, calor, primavera,
inocencia, infancia, juventud.
 Se ha asociado siempre el amarillo a la
intelectualidad y al pensamiento claro y
hay psiclogos que dicen que este color
ayuda a memorizar datos a las personas.

El amarillo llama mucho la atencin en un

entorno o composicin, utilizndose a
menudo en elementos que conviene
hacer visibles.
 Hay que tener en cuenta que es el color
que fatiga mas a la vista humana,
pudiendo llegar a ser aplastante,
porque causa una estimulacin visual
excesiva, pudiendo originar sensacin
de irritabilidad en las personas.
Observe unos minutos esta pgina. Le ha
cansado a la vista?
 Con el amarillo se obtienen mejores
degradados que con el rojo, pero
conforme se le va quitando saturacin se
va haciendo poco perceptible sobre
fondos claros.
 Como regla general, su uso en una
pgina web debe quedar limitado a
elementos puntuales (formando parte
de un logotipo o icono, en textos cortos
sobre fondo oscuro, etc), procurando
siempre que ocupe una zona limitada.
Naranja
 El color naranja tiene un carcter
acogedor, clido, estimulante y una
cualidad dinmica muy positiva y
energtica.

Posee una fuerza activa, radiante y

expansiva.
 Es vibrante como la luz del sol, extico
como las frutas tropicales, jugoso como
la naranja, sugiere informalidad en el
trato y amistad.

Tambin puede expresar inestabilidad,

disimulo e hipocresa.
 Es un color que destaca mucho sobre
el entorno que le rodea, por lo que se
puede usar para dar un mayor peso
visual a ciertos elementos de una
composicin, aunque hay que ser
comedido en su uso, ya que si es
brillante llena mucho la vista del
espectador.
 Admite buenos degradados, y combina
muy bien con su complementario, dando
buenos contrastes, sobre todo cuando
uno es claro y el otro oscuro.
 Negro, gris y blanco
El color negro viene definido por la ausencia
de luz y color

El negro confiere nobleza y elegancia, sobre

todo cuando es brillante, y es el color de la
elegancia, de la seduccin, del misterio, del
silencio, de la noche, del cuervo, del mal, de
lo clandestino o ilegal y, de la tristeza y la
melancola, de la infelicidad y desventura, del
enfado y la irritabilidad.
 Es un color casi imprescindible en toda
composicin, pudiendo usarse como color
del contorno de ciertos elemento, en
elementos separadores de espacios o
como color de fondos

Es tambin el color ms usado para los

textos, debido al alto contraste que ofrece
sobre fondos blancos o claros.
 Gris
El gris es un color neutro y pasivo, que
aporta poco a ninguna informacin
visual.

Es el color del cielo cubierto, del hierro

y del mercurio, y sugiere seriedad,
madurez, neutralidad, equilibrio,
indecisin, ausencia de energa, duda y
melancola.
Recomendaciones

138
Utilizar colores claros como composicin
principal de la pgina

Utilizar letras negras u obscuras

Evite en lo posible fondos obscuros y
letras claras ya que cansan visualmente
al espectador . Son recomendadas en
caso de querer impactar , impresionar,
conmocionar, estremeser al espectador
al ver la pgina.
139
Colores intensos
Genere un mayor peso visual al elemento principal
con un color intenso, Para lograrlo es necesario que
al rededor haya una composicin de elementos
claros, para que destaque.
Si se satura la composicin de elementos brillantes e
intensos llena mucho la vista del espectador, pieden
peso los elementos destacados, cansa y hasta puede
provocar confusin.

140
Utilizar colores complementarios
Las paginas que utilizan en su composicin
dos o mas colores (adicionalmente utilizar el
blanco) provocan mayor inters visual en el
espectador.
Debe utilizar color en los elementos que
requiera destacar sin abusar de esto.

141
Colores monocromticos.
Con el uso de matiz de un solo color puede
diferencias las secciones de la pgina web.
Visualmente le esta dando informacin al
espectador.
Evite utilizar los matices obscuros o muy
intensos porque puede provocar cansancio,
confusin y que el espectador pierda el inters
en seguir navegando en la pagina

142