SlideShare una empresa de Scribd logo
1 de 100
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 comunicación entre una
página web y el usuario.
Modelos de color
Color luz, síntesis aditiva
• Los colores producidos por luces (en el monitor de
nuestro ordenador, en el cine, televisión, etc) tienen
como colores primarios, al rojo, el verde y el azul (
RGB) cuya fusión de estos, crean y componen la luz
blanca, por eso a esta mezcla se le denomina, síntesis
aditiva y las mezclas parciales de estas luces dan origen
a la mayoría de los colores del espectro visible.
Color pigmento, síntesis sustractiva
• Los colores sustractivos, son colores basados en la
luz reflejada de los pigmentos aplicados a las
superfícies. Forman esta síntesis sustractiva, el
color magenta, el cyan y el amarillo. Son los colores
básicos de las tintas que se usan en la mayoría de
los sistemas de impresión, motivo por el cual estos
colores han desplazado en la consideración de
colores primarios a los tradicionales.
• La mezcla de los tres colores primarios pigmento en
teoría debería producir el negro, el color más
oscuro y de menor cantidad de luz, por lo cual esta
mezcla es conocida como síntesis sustractiva. En la
práctica 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 Cromático
• descomposición en colores de la luz solar, que nos va a
ayudar a clasificar éstos y a obtener sus combinaciones
idóneas.
TextText
Los colores fríos dan sensación de tranquilidad, de
seriedad, de distanciamiento.
Los colores cálidos dan sensación de actividad, de alegría,
de dinamismo, de confianza y amistad
Colores cálidos y fríos
Colores claros o luminosos y oscuros
• Los colores claros inspiran limpieza, juventud,
jovialidad, como ocurre con amarillos, verdes y
naranjas, mientras que los oscuros inspiran seriedad,
madurez, calma, como es el caso de los tonos rojos,
azules y negros.
• Los colores apagados expresan oscuridad, muerte,
seriedad, mientras que los pastel sugieren luz,
frescura y naturalidad.
Colores apagados o sucios y
los colores pastel
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 cromático
• Saturación o Intensidad
Representa la pureza o intensidad de un color particular,
la viveza o palidez del mismo.
•Valor o Brillo (Value)
Es un término 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
crearán buenas combinaciones en una página
web:
• Colores acromáticos : aquellos situados en la zona
central del círculo cromático, próximos al centro de
este, que han perdido tanta saturación que no se
aprecia en ellos el matiz original.
• Colores cromáticos grises : situados cerca del centro
del círculo cromático, pero fuera de la zona de colores
acromáticos, en ellos se distingue el matiz original,
aunque muy poco saturado.
• Colores monocromáticos : variaciones de saturación de
un mismo color (matiz), obtenidas por desplazamiento
desde un color puro hasta el centro del círculo
cromático.
• Colores complementarios : colores que se encuentran
simétricos respecto al centro de la rueda. El Matiz
varía en 180 º entre uno y otro.
• Colores complementarios cercanos : tomando como base
un color en la rueda y después otros dos que equidisten
del complementario del primero.
• Dobles complementarios : dos parejas de colores
complementarios entre sí.
• Tríadas complementarias : tres colores equidistantes
tanto del centro de la rueda, como entre sí, es decir,
formando 120º uno del otro.
• Gamas múltiples : escala de colores entre dos
siguiendo una graduación uniforme. Cuando los
colores extremos están muy próximos en el círculo
cromático, la gama originada es conocida también con
el nombre de colores análogos.
• Mezcla brillante-tenue : se elige un color brillante puro y
una variación tenue de su complementario.
Contrastes de color
El efecto de contraste es recíproco, 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 VALOR
Cuando se presentan dos valores diferentes en
contraste simultáneo, el más claro parecerá más
alto y el más oscuro, mas bajo.
•CONTRASTE DE SATURACIÓN
Se origina de la modulación de un tono puro,
saturándolo con blanco, negro o gris. El contraste
puede darse entre colores puros o bien por la
confrontación de éstos con otros no puros.
•CONTRASTE DE TEMPERATURA
Es el contraste producido al confrontar un color
cálido con otro frío.
•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.
El color en la web
Colores disponibles para la web
El sistema operativo identifica tres colores básicos, a
partir de los cuales construye todos los demás mediante
un proceso de mezcla por unidades de pantalla (pixels).
En 1994 la empresa Netscape estableció una subdivisión
del círculo cromático 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.
Colores y partes de una página
En los casos de
páginas más
complejas, y desde el
punto de vista de lo
que observa el
usuario, podemos
dividir estas en cuerpo
o sección principal,
cabecero o dintel,
menú y pie de página.
Los enlaces que figuren en esta sección deben ser
claramente diferenciados por el usuario, sobre todo si la
página va dirigida a un público muy general.
Elección de la paleta para un sitio web
A la hora construir una página lo primero que tenemos
que tener claro es la gama de colores que vamos a
emplear en sus distintas partes para definir su pauta
cromática.
Podemos considerar las siguientes paletas genéricas:
Además, podemos seguir una serie de reglas generales
que nos orientará:
•Los colores primarios, puros, brillantes, son demasiado
comunes, por lo que dan muy poca información al ojo.
•Páginas destinadas a un público general deben estar
basadas en combinaciones blanco-negro- color logotipo.
•Páginas de empresa o de instituciones deben estar
diseñadas de acuerdo con los colores corporativos de la
misma, incluyendo siempre el logotipo.
•Páginas orientadas a un público joven pueden adoptar
colores vivos, primarios, con altos contrastes entre
fondo y contenido.
•Páginas destinadas a un público adulto deben estar
diseñadas con colores serios, elegantes, fríos, sin altos
contrastes de tono.
•Páginas divulgativas, como manuales y artículos, deben
presentar el texto de forma que destaque adecuadamente
sobre el fondo, sin usar colores chillones que cansen la
vista.
•Páginas exóticas y a la vez elegantes se pueden obtener
con fondo negro o color muy oscuro y letras y/o motivos
dorados, blancos o púrpuras-rojos.
•Páginas 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.
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 una
web
Rojo
• El rojo es el único color brillante de verdad
y puro en su composición
• Es un color cálido, asociado con el sol y el
calor
• Sugiere vitalidad, entusiasmo, pasión,
agitación, fuerza, sexo, calor, fuego,
sangre, amor, audacia, valor, coraje,
cólera, crueldad, intensidad y virilidad
• Es el color más sensual de todo el círculo
cromático.
• También sugiere alarma, peligro,
violencia, ira y enfado
• lo utiliza en todo tipo de indicaciones de
prohibición y peligro.
• En una composición puede ser usado
para llamar la atención, para incitar una
acción o para marcar los elementos más
importantes de una composición o página
web, pero cuando es usado en gran
cantidad cansa la vista en exceso.
• Un problema asociado al uso del color
rojo es la mala gradación que ofrece
Verde
• El verde es el color más tranquilo y
sedante de todos.
• Es el color de la calma indiferente: no
transmite alegría, tristeza o pasión
• Está asociado a conceptos como
Naturaleza, salud, dinero, frescura,
crecimiento, abundancia, fertilidad,
plantas, bosques, vegetación, primavera,
frescor, esmeralda, honor, cortesía,
civismo y vigor.
• El verde que tiende
al amarillo cobra
fuerza activa y
soleada; si en él
predomina el azul
resulta más sobrio y
sofisticado.
• Su paleta de
variaciones es rica
en colores
aprovechables para
el diseño gráfico y la
web.
• En las composiciones gráficas y páginas
web da buen juego.
• Sus degradados son buenos y sus
variaciones tonales también, formando
gamas apropiadas para diseño.
Azul
• El color azul es el símbolo de la
profundidad,Inmaterial y frío
• Expresa armonía, amistad, fidelidad,
serenidad, sosiego, verdad, dignidad,
confianza, masculinidad, sensualidad y
comodidad.
• El azul claro puede sugerir optimismo.
• Cuanto más se clarifica más pierde
atracción y se vuelve indiferente y vacío.
• Cuanto más se oscurece más atrae hacia
el infinito.
• Posee también la virtud de crear la ilusión
óptica de retroceder
• Está asociado a conceptos como
seriedad, compromiso, lealtad, justicia y
fidelidad, pero también puede expresar
melancolía, tristeza, pasividad y
depresión.
• Si es muy pálido puede inspirar frescura e
incluso frío.
• Si es intermedio, da sensación
de elegancia, de frescura.
• Si es oscuro da sensación de
espiritualidad, de seriedad, de
responsabilidad.
• El azul es un color que da mucho juego
en las composiciones gráficas en general
y en las páginas web en concreto.
• Es utilizado ampliamente como color
corporativo, por la seriedad y confianza
que inspira, y admite buenas gradaciones,
pudiendo ser el color dominante en una
página.
• Combina muy bien con su
complementario, el naranja, y con las
variaciones de éste, siendo típicos los
fondos azules con textos naranjas
• Es un color que influye sobre el apetito,
disminuyendo éste, seguramente porque
no hay ningún alimento azul en la
naturaleza, por lo que no es aconsejable
su uso para una página sobre recetas de
cocina o productos alimenticios.
Amarillo
• Es el color más luminoso, más cálido,
ardiente y expansivo.
• Es un color optimista, moderno, y
denota alegría, entusiasmo, pasión,
fuerza, sexo, calor, primavera,
inocencia, infancia, juventud.
• Se ha asociado siempre el amarillo a la
intelectualidad y al pensamiento claro y
hay psicólogos que dicen que este color
ayuda a memorizar datos a las personas.
• El amarillo llama mucho la atención en un
entorno o composición, utilizándose 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 estimulación visual
excesiva, pudiendo originar sensación
de irritabilidad en las personas.
• Con el amarillo se obtienen mejores
degradados que con el rojo, pero
conforme se le va quitando saturación se
va haciendo poco perceptible sobre
fondos claros.
• Como regla general, su uso en una
página 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 carácter
acogedor, cálido, estimulante y una
cualidad dinámica muy positiva y
energética.
• Posee una fuerza activa, radiante y
expansiva.
• Es vibrante como la luz del sol, exótico
como las frutas tropicales, jugoso como
la naranja, sugiere informalidad en el
trato y amistad.
• También puede expresar inestabilidad,
disimulo e hipocresía.
• 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
composición, 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 seducción,
del misterio, del silencio, de la noche,
del cuervo, del mal, de lo clandestino o
ilegal y, de la tristeza y la melancolía,
• Es un color casi imprescindible en toda
composición, pudiendo usarse como color
del contorno de ciertos elemento, en
elementos separadores de espacios o
como color de fondos
• Es también el color más 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 información
visual.
• Es el color del cielo cubierto, del hierro
y del mercurio, y sugiere seriedad,
madurez, neutralidad, equilibrio,
indecisión, ausencia de energía, duda y
melancolía.

Más contenido relacionado

La actualidad más candente

Teoria del color nelson freire
Teoria del color nelson freireTeoria del color nelson freire
Teoria del color nelson freireNelson Freire
 
Presentación teoria del color
Presentación teoria del colorPresentación teoria del color
Presentación teoria del colorEstefanieMedinaA
 
Teoría del color
Teoría del colorTeoría del color
Teoría del colorUPB
 
Guia del color para decorar tu hogar
Guia del color para decorar tu hogarGuia del color para decorar tu hogar
Guia del color para decorar tu hogarwilslideshare
 
Trabajo Power Point Colores --> Javier Martin
Trabajo Power Point Colores --> Javier MartinTrabajo Power Point Colores --> Javier Martin
Trabajo Power Point Colores --> Javier MartinColegio SAM
 
Diseño grafico-castelo-castillo
Diseño grafico-castelo-castilloDiseño grafico-castelo-castillo
Diseño grafico-castelo-castilloVivis Castillo
 
DiseñO Grafico Y Creatividad
DiseñO Grafico Y CreatividadDiseñO Grafico Y Creatividad
DiseñO Grafico Y CreatividadKeila Sanjuán
 
El color y las Combinaciones
El color y las CombinacionesEl color y las Combinaciones
El color y las CombinacionesAlba Pinturas
 
Teoria del color_andres_caza
Teoria del color_andres_cazaTeoria del color_andres_caza
Teoria del color_andres_cazaANDRES CAZA
 
Psicología del color-Diseño Ambiental
Psicología del color-Diseño Ambiental Psicología del color-Diseño Ambiental
Psicología del color-Diseño Ambiental Vladimir Araniva
 
T2 pa2yarannabeldisenografico
T2 pa2yarannabeldisenograficoT2 pa2yarannabeldisenografico
T2 pa2yarannabeldisenograficoAnnabellYar
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño graficocarlosk17
 

La actualidad más candente (17)

Teoria del color nelson freire
Teoria del color nelson freireTeoria del color nelson freire
Teoria del color nelson freire
 
Presentación teoria del color
Presentación teoria del colorPresentación teoria del color
Presentación teoria del color
 
Teoría del color
Teoría del colorTeoría del color
Teoría del color
 
Guia del color para decorar tu hogar
Guia del color para decorar tu hogarGuia del color para decorar tu hogar
Guia del color para decorar tu hogar
 
Trabajo Power Point Colores --> Javier Martin
Trabajo Power Point Colores --> Javier MartinTrabajo Power Point Colores --> Javier Martin
Trabajo Power Point Colores --> Javier Martin
 
El color
El colorEl color
El color
 
Diseño grafico-castelo-castillo
Diseño grafico-castelo-castilloDiseño grafico-castelo-castillo
Diseño grafico-castelo-castillo
 
DiseñO Grafico Y Creatividad
DiseñO Grafico Y CreatividadDiseñO Grafico Y Creatividad
DiseñO Grafico Y Creatividad
 
Práctica 4
Práctica 4Práctica 4
Práctica 4
 
Teoria del color
Teoria del colorTeoria del color
Teoria del color
 
Color e iluminacion. produccion audiovisual
Color e iluminacion. produccion audiovisualColor e iluminacion. produccion audiovisual
Color e iluminacion. produccion audiovisual
 
El color y las Combinaciones
El color y las CombinacionesEl color y las Combinaciones
El color y las Combinaciones
 
Teoria del color_andres_caza
Teoria del color_andres_cazaTeoria del color_andres_caza
Teoria del color_andres_caza
 
Psicología del color-Diseño Ambiental
Psicología del color-Diseño Ambiental Psicología del color-Diseño Ambiental
Psicología del color-Diseño Ambiental
 
T2 pa2yarannabeldisenografico
T2 pa2yarannabeldisenograficoT2 pa2yarannabeldisenografico
T2 pa2yarannabeldisenografico
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
Psicología del color
Psicología del colorPsicología del color
Psicología del color
 

Similar a Teoría del color para diseño web

Teoria del color
Teoria del colorTeoria del color
Teoria del colorvivaldezman
 
El uso del color en diseño web
El uso del color en diseño webEl uso del color en diseño web
El uso del color en diseño webCésar Jodra
 
El color espacio y texto
El color  espacio y textoEl color  espacio y texto
El color espacio y textolachegon
 
Uso de tecnologías en educación ii unidad 1 actividad 1
Uso de tecnologías en educación ii unidad 1 actividad 1Uso de tecnologías en educación ii unidad 1 actividad 1
Uso de tecnologías en educación ii unidad 1 actividad 1Antonio Estrada
 
Teoría de Colores Emilio Villagómez
Teoría de Colores Emilio VillagómezTeoría de Colores Emilio Villagómez
Teoría de Colores Emilio VillagómezEmilio Villagómez
 
Psicología de la percepción
Psicología de la percepciónPsicología de la percepción
Psicología de la percepciónCarlos Partida
 
Calamila diapositivas
Calamila diapositivasCalamila diapositivas
Calamila diapositivasseguraortega
 
23256177 psicologia-del-color
23256177 psicologia-del-color23256177 psicologia-del-color
23256177 psicologia-del-colorLaura Penas
 
Propiedades del color
Propiedades del colorPropiedades del color
Propiedades del colorMijailPm
 
TEORIA COoooooooooooopooooooooooLOR.pptx
TEORIA COoooooooooooopooooooooooLOR.pptxTEORIA COoooooooooooopooooooooooLOR.pptx
TEORIA COoooooooooooopooooooooooLOR.pptxJOSEMIGUELREYESCOBAR
 
Combinacion adecuada de colores
Combinacion adecuada de coloresCombinacion adecuada de colores
Combinacion adecuada de coloresEddy Lozoya Flores
 
Teoria de color
Teoria de colorTeoria de color
Teoria de colordevilemi
 
TEORIA DEL COLOR.pptx
TEORIA DEL COLOR.pptxTEORIA DEL COLOR.pptx
TEORIA DEL COLOR.pptxCamilo263108
 

Similar a Teoría del color para diseño web (20)

Teoria del color
Teoria del colorTeoria del color
Teoria del color
 
Comohacer
ComohacerComohacer
Comohacer
 
El uso del color en diseño web
El uso del color en diseño webEl uso del color en diseño web
El uso del color en diseño web
 
El color espacio y texto
El color  espacio y textoEl color  espacio y texto
El color espacio y texto
 
Uso de tecnologías en educación ii unidad 1 actividad 1
Uso de tecnologías en educación ii unidad 1 actividad 1Uso de tecnologías en educación ii unidad 1 actividad 1
Uso de tecnologías en educación ii unidad 1 actividad 1
 
Teoría de Colores Emilio Villagómez
Teoría de Colores Emilio VillagómezTeoría de Colores Emilio Villagómez
Teoría de Colores Emilio Villagómez
 
Psicología de la percepción
Psicología de la percepciónPsicología de la percepción
Psicología de la percepción
 
Psicología de los colores
Psicología de los coloresPsicología de los colores
Psicología de los colores
 
Calamila diapositivas
Calamila diapositivasCalamila diapositivas
Calamila diapositivas
 
23256177 psicologia-del-color
23256177 psicologia-del-color23256177 psicologia-del-color
23256177 psicologia-del-color
 
Propiedades del color
Propiedades del colorPropiedades del color
Propiedades del color
 
TEORIA COoooooooooooopooooooooooLOR.pptx
TEORIA COoooooooooooopooooooooooLOR.pptxTEORIA COoooooooooooopooooooooooLOR.pptx
TEORIA COoooooooooooopooooooooooLOR.pptx
 
Diiiiseño graficoo
Diiiiseño graficooDiiiiseño graficoo
Diiiiseño graficoo
 
Combinacion adecuada de colores
Combinacion adecuada de coloresCombinacion adecuada de colores
Combinacion adecuada de colores
 
Teorias de colores
Teorias de coloresTeorias de colores
Teorias de colores
 
Teoria de color
Teoria de colorTeoria de color
Teoria de color
 
TEORIA DEL COLOR.pptx
TEORIA DEL COLOR.pptxTEORIA DEL COLOR.pptx
TEORIA DEL COLOR.pptx
 
Teoria de color (1)
Teoria de color (1)Teoria de color (1)
Teoria de color (1)
 
Color
ColorColor
Color
 
Eleccion de colores
Eleccion de coloresEleccion de colores
Eleccion de colores
 

Más de ricardo herrera (20)

Reglamento del estudiante de TESCI 2023.pptx
Reglamento del estudiante de TESCI 2023.pptxReglamento del estudiante de TESCI 2023.pptx
Reglamento del estudiante de TESCI 2023.pptx
 
Comprobante federal
Comprobante federal Comprobante federal
Comprobante federal
 
Propuesta organizacional ead
Propuesta organizacional eadPropuesta organizacional ead
Propuesta organizacional ead
 
Filisofia
FilisofiaFilisofia
Filisofia
 
Histograma
HistogramaHistograma
Histograma
 
Presentacion 1
Presentacion 1Presentacion 1
Presentacion 1
 
Oxigen
OxigenOxigen
Oxigen
 
Enlace
EnlaceEnlace
Enlace
 
Guia nomenclatura qoi-iq-2020
Guia nomenclatura qoi-iq-2020Guia nomenclatura qoi-iq-2020
Guia nomenclatura qoi-iq-2020
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Autocad 2 d
Autocad 2 dAutocad 2 d
Autocad 2 d
 
Teoriadecolor
TeoriadecolorTeoriadecolor
Teoriadecolor
 
Teoriadecolor
TeoriadecolorTeoriadecolor
Teoriadecolor
 
contrato
contratocontrato
contrato
 
Teoriadecolor
TeoriadecolorTeoriadecolor
Teoriadecolor
 
Capitulo10 liderar el_cambio_positivo
Capitulo10 liderar el_cambio_positivoCapitulo10 liderar el_cambio_positivo
Capitulo10 liderar el_cambio_positivo
 
Liderazgo
LiderazgoLiderazgo
Liderazgo
 
Desarrollo de-equipos-2014
Desarrollo de-equipos-2014Desarrollo de-equipos-2014
Desarrollo de-equipos-2014
 
Facultamiento
FacultamientoFacultamiento
Facultamiento
 
facultamiento y_delegacion
facultamiento y_delegacionfacultamiento y_delegacion
facultamiento y_delegacion
 

Último

EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.DaluiMonasterio
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PCCesarFernandez937857
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscaeliseo91
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadAlejandrino Halire Ccahuana
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxOscarEduardoSanchezC
 
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptxPRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptxinformacionasapespu
 
Manual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdfManual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdfMaryRotonda1
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
30-de-abril-plebiscito-1902_240420_104511.pdf
30-de-abril-plebiscito-1902_240420_104511.pdf30-de-abril-plebiscito-1902_240420_104511.pdf
30-de-abril-plebiscito-1902_240420_104511.pdfgimenanahuel
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...JAVIER SOLIS NOYOLA
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxdanalikcruz2000
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPELaura Chacón
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxAna Fernandez
 
cortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuacortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuaDANNYISAACCARVAJALGA
 

Último (20)

EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fisca
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdad
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
 
La Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdfLa Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdf
 
Unidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDIUnidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDI
 
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptxPRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
 
Manual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdfManual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdf
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Razonamiento Matemático 1. Deta del año 2020
Razonamiento Matemático 1. Deta del año 2020Razonamiento Matemático 1. Deta del año 2020
Razonamiento Matemático 1. Deta del año 2020
 
30-de-abril-plebiscito-1902_240420_104511.pdf
30-de-abril-plebiscito-1902_240420_104511.pdf30-de-abril-plebiscito-1902_240420_104511.pdf
30-de-abril-plebiscito-1902_240420_104511.pdf
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPE
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docx
 
cortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuacortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahua
 

Teoría del color para diseño web

  • 1. 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.
  • 2. •El color es la primera forma de comunicación entre una página web y el usuario.
  • 4. Color luz, síntesis aditiva • Los colores producidos por luces (en el monitor de nuestro ordenador, en el cine, televisión, etc) tienen como colores primarios, al rojo, el verde y el azul ( RGB) cuya fusión de estos, crean y componen la luz blanca, por eso a esta mezcla se le denomina, síntesis aditiva y las mezclas parciales de estas luces dan origen a la mayoría de los colores del espectro visible.
  • 5. Color pigmento, síntesis sustractiva • Los colores sustractivos, son colores basados en la luz reflejada de los pigmentos aplicados a las superfícies. Forman esta síntesis sustractiva, el color magenta, el cyan y el amarillo. Son los colores básicos de las tintas que se usan en la mayoría de los sistemas de impresión, motivo por el cual estos colores han desplazado en la consideración de colores primarios a los tradicionales. • La mezcla de los tres colores primarios pigmento en teoría debería producir el negro, el color más oscuro y de menor cantidad de luz, por lo cual esta mezcla es conocida como síntesis sustractiva. En la práctica el color así obtenido no es lo bastante intenso, motivo por el cual se le agrega negro pigmento conformandose el espacio de color CMYK.
  • 6.
  • 7. Tipos de Color Circulo Cromático • descomposición en colores de la luz solar, que nos va a ayudar a clasificar éstos y a obtener sus combinaciones idóneas.
  • 8. TextText Los colores fríos dan sensación de tranquilidad, de seriedad, de distanciamiento. Los colores cálidos dan sensación de actividad, de alegría, de dinamismo, de confianza y amistad Colores cálidos y fríos
  • 9.
  • 10.
  • 11. Colores claros o luminosos y oscuros • Los colores claros inspiran limpieza, juventud, jovialidad, como ocurre con amarillos, verdes y naranjas, mientras que los oscuros inspiran seriedad, madurez, calma, como es el caso de los tonos rojos, azules y negros.
  • 12. • Los colores apagados expresan oscuridad, muerte, seriedad, mientras que los pastel sugieren luz, frescura y naturalidad. Colores apagados o sucios y los colores pastel
  • 13. 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 cromático
  • 14. • Saturación o Intensidad Representa la pureza o intensidad de un color particular, la viveza o palidez del mismo.
  • 15. •Valor o Brillo (Value) Es un término que se usa para describir que tan claro u oscuro parece un color, y se refiere a la cantidad de luz percibida.
  • 16. Grupos de Colores • Tomando como base la rueda de colores podemos definir los siguientes grupos de colores, que nos crearán buenas combinaciones en una página web:
  • 17. • Colores acromáticos : aquellos situados en la zona central del círculo cromático, próximos al centro de este, que han perdido tanta saturación que no se aprecia en ellos el matiz original.
  • 18. • Colores cromáticos grises : situados cerca del centro del círculo cromático, pero fuera de la zona de colores acromáticos, en ellos se distingue el matiz original, aunque muy poco saturado.
  • 19. • Colores monocromáticos : variaciones de saturación de un mismo color (matiz), obtenidas por desplazamiento desde un color puro hasta el centro del círculo cromático.
  • 20.
  • 21.
  • 22. • Colores complementarios : colores que se encuentran simétricos respecto al centro de la rueda. El Matiz varía en 180 º entre uno y otro.
  • 23.
  • 24. • Colores complementarios cercanos : tomando como base un color en la rueda y después otros dos que equidisten del complementario del primero.
  • 25. • Dobles complementarios : dos parejas de colores complementarios entre sí.
  • 26. • Tríadas complementarias : tres colores equidistantes tanto del centro de la rueda, como entre sí, es decir, formando 120º uno del otro.
  • 27. • Gamas múltiples : escala de colores entre dos siguiendo una graduación uniforme. Cuando los colores extremos están muy próximos en el círculo cromático, la gama originada es conocida también con el nombre de colores análogos.
  • 28.
  • 29. • Mezcla brillante-tenue : se elige un color brillante puro y una variación tenue de su complementario.
  • 30. Contrastes de color El efecto de contraste es recíproco, ya que afecta a los dos colores que intervienen.
  • 31. 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.
  • 32. •CONTRASTE DE VALOR Cuando se presentan dos valores diferentes en contraste simultáneo, el más claro parecerá más alto y el más oscuro, mas bajo.
  • 33. •CONTRASTE DE SATURACIÓN Se origina de la modulación de un tono puro, saturándolo con blanco, negro o gris. El contraste puede darse entre colores puros o bien por la confrontación de éstos con otros no puros.
  • 34. •CONTRASTE DE TEMPERATURA Es el contraste producido al confrontar un color cálido con otro frío.
  • 35. •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.
  • 36. El color en la web
  • 37. Colores disponibles para la web El sistema operativo identifica tres colores básicos, a partir de los cuales construye todos los demás mediante un proceso de mezcla por unidades de pantalla (pixels). En 1994 la empresa Netscape estableció una subdivisión del círculo cromático en 216 colores equidistantes entre sí.
  • 38. 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.
  • 39. Colores y partes de una página En los casos de páginas más complejas, y desde el punto de vista de lo que observa el usuario, podemos dividir estas en cuerpo o sección principal, cabecero o dintel, menú y pie de página.
  • 40.
  • 41. Los enlaces que figuren en esta sección deben ser claramente diferenciados por el usuario, sobre todo si la página va dirigida a un público muy general.
  • 42. Elección de la paleta para un sitio web A la hora construir una página lo primero que tenemos que tener claro es la gama de colores que vamos a emplear en sus distintas partes para definir su pauta cromática.
  • 43. Podemos considerar las siguientes paletas genéricas:
  • 44.
  • 45.
  • 46. Además, podemos seguir una serie de reglas generales que nos orientará: •Los colores primarios, puros, brillantes, son demasiado comunes, por lo que dan muy poca información al ojo.
  • 47. •Páginas destinadas a un público general deben estar basadas en combinaciones blanco-negro- color logotipo.
  • 48. •Páginas de empresa o de instituciones deben estar diseñadas de acuerdo con los colores corporativos de la misma, incluyendo siempre el logotipo.
  • 49. •Páginas orientadas a un público joven pueden adoptar colores vivos, primarios, con altos contrastes entre fondo y contenido.
  • 50. •Páginas destinadas a un público adulto deben estar diseñadas con colores serios, elegantes, fríos, sin altos contrastes de tono.
  • 51. •Páginas divulgativas, como manuales y artículos, deben presentar el texto de forma que destaque adecuadamente sobre el fondo, sin usar colores chillones que cansen la vista.
  • 52. •Páginas exóticas y a la vez elegantes se pueden obtener con fondo negro o color muy oscuro y letras y/o motivos dorados, blancos o púrpuras-rojos.
  • 53. •Páginas 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.
  • 54. 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 una web
  • 55. Rojo
  • 56. • El rojo es el único color brillante de verdad y puro en su composición • Es un color cálido, asociado con el sol y el calor • Sugiere vitalidad, entusiasmo, pasión, agitación, fuerza, sexo, calor, fuego, sangre, amor, audacia, valor, coraje, cólera, crueldad, intensidad y virilidad • Es el color más sensual de todo el círculo cromático.
  • 57.
  • 58. • También sugiere alarma, peligro, violencia, ira y enfado • lo utiliza en todo tipo de indicaciones de prohibición y peligro.
  • 59. • En una composición puede ser usado para llamar la atención, para incitar una acción o para marcar los elementos más importantes de una composición o página web, pero cuando es usado en gran cantidad cansa la vista en exceso.
  • 60. • Un problema asociado al uso del color rojo es la mala gradación que ofrece
  • 61.
  • 62. Verde
  • 63. • El verde es el color más tranquilo y sedante de todos. • Es el color de la calma indiferente: no transmite alegría, tristeza o pasión • Está asociado a conceptos como Naturaleza, salud, dinero, frescura, crecimiento, abundancia, fertilidad, plantas, bosques, vegetación, primavera, frescor, esmeralda, honor, cortesía, civismo y vigor.
  • 64. • El verde que tiende al amarillo cobra fuerza activa y soleada; si en él predomina el azul resulta más sobrio y sofisticado. • Su paleta de variaciones es rica en colores aprovechables para el diseño gráfico y la web.
  • 65. • En las composiciones gráficas y páginas web da buen juego. • Sus degradados son buenos y sus variaciones tonales también, formando gamas apropiadas para diseño.
  • 66.
  • 67.
  • 68.
  • 69. Azul
  • 70. • El color azul es el símbolo de la profundidad,Inmaterial y frío • Expresa armonía, amistad, fidelidad, serenidad, sosiego, verdad, dignidad, confianza, masculinidad, sensualidad y comodidad. • El azul claro puede sugerir optimismo.
  • 71. • Cuanto más se clarifica más pierde atracción y se vuelve indiferente y vacío. • Cuanto más se oscurece más atrae hacia el infinito. • Posee también la virtud de crear la ilusión óptica de retroceder
  • 72. • Está asociado a conceptos como seriedad, compromiso, lealtad, justicia y fidelidad, pero también puede expresar melancolía, tristeza, pasividad y depresión. • Si es muy pálido puede inspirar frescura e incluso frío.
  • 73. • Si es intermedio, da sensación de elegancia, de frescura. • Si es oscuro da sensación de espiritualidad, de seriedad, de responsabilidad.
  • 74.
  • 75. • El azul es un color que da mucho juego en las composiciones gráficas en general y en las páginas web en concreto. • Es utilizado ampliamente como color corporativo, por la seriedad y confianza que inspira, y admite buenas gradaciones, pudiendo ser el color dominante en una página.
  • 76. • Combina muy bien con su complementario, el naranja, y con las variaciones de éste, siendo típicos los fondos azules con textos naranjas
  • 77. • Es un color que influye sobre el apetito, disminuyendo éste, seguramente porque no hay ningún alimento azul en la naturaleza, por lo que no es aconsejable su uso para una página sobre recetas de cocina o productos alimenticios.
  • 78.
  • 80. • Es el color más luminoso, más cálido, ardiente y expansivo. • Es un color optimista, moderno, y denota alegría, entusiasmo, pasión, fuerza, sexo, calor, primavera, inocencia, infancia, juventud.
  • 81. • Se ha asociado siempre el amarillo a la intelectualidad y al pensamiento claro y hay psicólogos que dicen que este color ayuda a memorizar datos a las personas. • El amarillo llama mucho la atención en un entorno o composición, utilizándose a menudo en elementos que conviene hacer visibles.
  • 82.
  • 83. • Hay que tener en cuenta que es el color que fatiga mas a la vista humana, pudiendo llegar a ser aplastante, porque causa una estimulación visual excesiva, pudiendo originar sensación de irritabilidad en las personas.
  • 84.
  • 85. • Con el amarillo se obtienen mejores degradados que con el rojo, pero conforme se le va quitando saturación se va haciendo poco perceptible sobre fondos claros.
  • 86.
  • 87. • Como regla general, su uso en una página 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.
  • 89. • El color naranja tiene un carácter acogedor, cálido, estimulante y una cualidad dinámica muy positiva y energética. • Posee una fuerza activa, radiante y expansiva.
  • 90. • Es vibrante como la luz del sol, exótico como las frutas tropicales, jugoso como la naranja, sugiere informalidad en el trato y amistad. • También puede expresar inestabilidad, disimulo e hipocresía.
  • 91.
  • 92. • 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 composición, aunque hay que ser comedido en su uso, ya que si es brillante llena mucho la vista del espectador.
  • 93.
  • 94. • Admite buenos degradados, y combina muy bien con su complementario, dando buenos contrastes, sobre todo cuando uno es claro y el otro oscuro.
  • 95.
  • 96. 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 seducción, del misterio, del silencio, de la noche, del cuervo, del mal, de lo clandestino o ilegal y, de la tristeza y la melancolía,
  • 97.
  • 98. • Es un color casi imprescindible en toda composición, pudiendo usarse como color del contorno de ciertos elemento, en elementos separadores de espacios o como color de fondos • Es también el color más usado para los textos, debido al alto contraste que ofrece sobre fondos blancos o claros.
  • 99.
  • 100. Gris • El gris es un color neutro y pasivo, que aporta poco a ninguna información visual. • Es el color del cielo cubierto, del hierro y del mercurio, y sugiere seriedad, madurez, neutralidad, equilibrio, indecisión, ausencia de energía, duda y melancolía.