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
comunicación entre una página web y el
usuario.

Modelos de color .

etc) tienen como colores primarios. el verde y el azul ( RGB) cuya fusión de estos. síntesis aditiva Los colores producidos por luces (en el monitor de nuestro ordenador. en el cine. televisión. síntesis aditiva y las mezclas parciales de estas luces dan origen a la mayoría de los colores del espectro visible. al rojo. Color luz. . por eso a esta mezcla se le denomina. crean y componen la luz blanca.

• La mezcla de los tres colores primarios pigmento en teoría debería producir el negro. .Color pigmento. son colores basados en la luz reflejada de los pigmentos aplicados a las superfícies. el color magenta. motivo por el cual estos colores han desplazado en la consideración de colores primarios a los tradicionales. síntesis sustractiva • Los colores sustractivos. el color más oscuro y de menor cantidad de luz. Son los colores básicos de las tintas que se usan en la mayoría de los sistemas de impresión. Forman esta síntesis sustractiva. motivo por el cual se le agrega negro pigmento conformandose el espacio de color CMYK. En la práctica el color así obtenido no es lo bastante intenso. por lo cual esta mezcla es conocida como síntesis sustractiva. el cyan y el amarillo.

.

que nos va a ayudar a clasificar éstos y a obtener sus combinaciones idóneas. Tipos de Color Circulo Cromático Descomposición en colores de la luz solar. .

de alegría. Colores cálidos y fríos Text Text Los colores cálidos dan sensación de actividad. de distanciamiento. de seriedad. de confianza y amistad Los colores fríos dan sensación de tranquilidad. de dinamismo. .

Ejemplo de una aplicación Web ¿Qué observa. que le llama la atención de esta página? ¿Qué imagen te da la empresa? ¿Qué opinas de la página? .

Ejemplo de una aplicación Web ¿Qué observa. que le llama la atención de esta página? ¿Qué imagen le da la empresa? ¿Qué opina de la página? .

calma. mientras que los colores oscuros inspiran seriedad. como es el caso de los tonos rojos. jovialidad. . como ocurre con amarillos. azules y negros. madurez. Colores claros o luminosos y oscuros • Los colores claros inspiran limpieza. juventud. verdes y naranjas.

. seriedad. mientras que los pastel sugieren luz. muerte. frescura y naturalidad. Colores apagados o sucios y los colores pastel • Los colores apagados expresan oscuridad.

.

sin el blanco o negro agregados. Se refiere al recorrido que hace un tono hacia uno u otro lado del circulo cromático . Propiedades del Color • Matiz (Hue) Es el estado puro del color.

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.

Los colores que se utilizan en esta imagen son acromáticos ¿son acromáticos del col azul o rosa. o es combinación entre ambos? .

aunque muy poco saturado. en ellos se distingue 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.

Los colores de esta imagen son cromáticos grises Observe los tonos verdes y amarillos de la imagen .

.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 que cupan en la gen son ocromáticos Observe los diferentes matices .

Ejemplo de
una
aplicación
Web

¿Qué
observa; que
le llama la
atención de
esta página?

¿Con que
imagen te
quedas de la
empresa?

¿Qué opinas
de la página?

Ejemplo de
una
aplicación
Web

¿Qué
observas?

¿Que te llama
la atención de
esta página?

¿Qué imagen
te da la
empresa?

¿Qué opinas
de la página?

Colores complementarios : colores que se encuentran simétricos respecto al centro de la rueda. El Matiz varía en 180 º entre uno y otro. .

naranja y blanco) .Ejemplo de una aplicación Web Observe el uso de tres colores complemen- tarios (verde.

• 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í.

Observe que utilizan en la
iluminación dos colores
complementarios

Iluminación del Gran Arco de la
Fraternidad (Grande Arche de la
Fraternité), Paris

.

es decir.• Tríadas complementarias : tres colores equidistantes tanto del centro de la rueda. . como entre sí. 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 múltiples : escala de colores entre dos siguiendo una graduación uniforme. . la gama originada es conocida también con el nombre de colores análogos. Cuando los colores extremos están muy próximos en el círculo cromático.

Observe que para conformar la gama multiple de colores se juega con la intensidad y brillo .

Ejemplo de una aplicación Web Observe que la composición se realiza con una gama mutiple del color .

• Mezcla brillante-tenue : se elige un color brillante puro y una variación tenue de su complementario. .

con mezcla brillante tenue .La imagen utiliza colores mezclando brillante y tenue Observe que la composición del color es una Tríada complementaria.

.

.

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 LUMINOSIDAD Observe qu luminosidad este caso provoca que destaque .

Observe que es tanta luminosidad que resalta lo obscuro CONTRASTE DE LUMINOSIDAD 46 .

47 .

en este caso provoca que destaque .CONTRASTE DE LUMINOSIDAD Observe que la luminosidad.

49 .

el más claro parecerá más alto y el más oscuro. .•CONTRASTE DE VALOR Cuando se presentan dos valores diferentes en contraste simultáneo. mas bajo.

CONTRASTE DE VALOR .

.

El contraste puede darse entre colores puros o bien por la confrontación de éstos con otros no puros. negro o gris.•CONTRASTE DE SATURACIÓN Se origina de la modulación de un tono puro. . saturándolo con blanco.

Contraste de saturación .

.

.•CONTRASTE DE TEMPERATURA Es el contraste producido al confrontar un color cálido con otro frío.

CONTRASTE DE 57 TEMPERATURA .

58 .

.

aunque resultan muy violentos visualmente combinar dos colores complementarios intensos.•CONTRASTE DE COMPLEMENTARIOS Dos colores complementarios son los que ofrecen juntos mejores posibilidades de contraste. .

CONTRASTE DE COMPLEMENTARIOS .

.

.

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. que recibe el nombre de WebSafe o Web Safe Colors . formada por los 216 colores.

y desde el punto de vista de lo que observa el usuario. podemos dividir estas en: • cabecero o dintel • cuerpo o sección principal • menú • pie de página . Colores y partes de una página En los casos de páginas más complejas.

Las páginas pueden tener todos los elemento o carecer de algunos de ellos. .

sobre todo si la página va dirigida a al público en general.Los enlaces que figuren deben ser claramente diferenciados por el usuario. .

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: .

Observe un ejemplo de la aplicación de las paletas de colores en decoración .

.

Podemos considerar las siguientes paletas genéricas: .

.

Observe un ejemplo de la aplicación de las paletas en decoración .

.

.

Reglas generales 79 .

Además. . puros. podemos seguir una serie de reglas generales que nos orientará: Los colores primarios. por lo que dan muy poca información al ojo. brillantes. son demasiado comunes.

Páginas destinadas a un público general deben estar basadas en combinaciones blanco-negro.color logotipo. .

incluyendo siempre el logotipo. .Páginas de empresa o de instituciones deben estar diseñadas de acuerdo con los colores corporativos de la misma.

primarios.Páginas orientadas a un público joven pueden adoptar colores vivos. con altos contrastes entre fondo y contenido. .

.

elegantes. fríos. sin altos contrastes de tono.Páginas destinadas a un público adulto deben estar diseñadas con colores serios. .

. como manuales y artículos.Páginas de divulgación. deben presentar el texto de forma que destaque adecuadamente sobre el fondo. sin usar colores chillones que cansen la vista.

. blancos o púrpuras-rojos.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.

•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.

el verde y el azul. Conclusión del estudio de algunos colores • Describiremos las sensaciones que producen algunos colores como el rojo. así como su posible uso y su significado en la web .

Rojo .

. pasión. valor. amor. entusiasmo. fuego. coraje. sexo. calor. agitación. fuerza. intensidad. audacia. sangre y crueldad • Es el color más sensual de todo el círculo cromático. cólera.• 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. virilidad .

.

.

peligro. violencia. .• También sugiere alarma. ira y enfado • lo utiliza en todo tipo de indicaciones de prohibición y peligro.

. para incitar una acción o para marcar los elementos más importantes de una composición o página web.• En una composición puede ser usado para llamar la atención. pero cuando es usado en gran cantidad cansa la vista en exceso.

• Un problema asociado al uso del color rojo es la mala degradación que ofrece .

.

Web en con tonos rojos .

sin abusar del color .Web en con tonos rojos.

Verde .

bosques. civismo y vigor. frescura. frescor. • Es el color de la calma indiferencia: no transmite alegría. plantas. cortesía.• El verde es el color más tranquilo y sedante de todos. . abundancia. esmeralda. tristeza o pasión • Está asociado a conceptos como salud. fertilidad. crecimiento. vegetación. honor. naturaleza. dinero. primavera.

• Su paleta de variaciones es rica en colores aprovechables para el diseño gráfico en la web. . • Si se combina con el azul y este último predomina resulta más sobrio y sofisticado. • El verde que se combina o tiende al amarillo cobra fuerza activa y alegria.

• En las composiciones gráficas y páginas web da buen juego. formando gamas apropiadas para diseño. • Sus degradados son buenos y sus variaciones tonales también. .

Observe que no lastima el abuso del uso del color .

.

Azul .

masculinidad.Inmaterial y frío • Expresa armonía. • El azul claro puede sugerir optimismo. confianza. verdad. sensualidad y comodidad. sosiego. fidelidad. serenidad.• El color azul es el símbolo de la profundidad. dignidad. . amistad.

• Cuanto más se oscurece más atrae hacia el infinito. • Posee también la virtud de crear la ilusión óptica de retroceder .• Cuanto más se clarifica más pierde atracción y se vuelve indiferente y vacío.

tristeza. compromiso. pasividad y depresión. • Si es muy pálido puede inspirar frescura e incluso frío. pero también puede expresar melancolía. .• Está asociado a conceptos como seriedad. lealtad. justicia y fidelidad.

• Si es intermedio. de seriedad. de responsabilidad. • Si es oscuro da sensación de espiritualidad. de frescura. da sensación de elegancia. .

.

y admite buenas degradaciones. por la seriedad y confianza que inspira. pudiendo ser el color dominante en una página. • Es utilizado ampliamente como color corporativo. .• El azul es un color que da mucho juego en las composiciones gráficas en general y en las páginas web en concreto.

y con las variaciones de éste. el naranja. siendo típicos los fondos azules con textos naranjas .• Combina muy bien con su complementario.

• Es un color que influye sobre el apetito. por lo que no es aconsejable su uso para una página sobre recetas de cocina o productos alimenticios. seguramente porque no hay ningún alimento azul en la naturaleza. disminuyendo éste. .

.

Amarillo .

fuerza. moderno. más cálido.• Es el color más luminoso. pasión. infancia. • Es un color optimista. y denota alegría. primavera. entusiasmo. ardiente y expresivo. inocencia. sexo. . calor. juventud.

utilizándose a menudo en elementos que conviene hacer visibles.• 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. .

.

. porque causa una estimulación visual excesiva. pudiendo llegar a ser aplastante. pudiendo originar sensación de irritabilidad en las personas.• Hay que tener en cuenta que es el color que fatiga mas a la vista humana.

Observe unos minutos esta página. ¿Le ha cansado a la vista? .

• 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. en textos cortos sobre fondo oscuro. su uso en una página web debe quedar limitado a elementos puntuales (formando parte de un logotipo o icono. etc). procurando siempre que ocupe una zona limitada. .

Naranja .

• Posee una fuerza activa. radiante y expansiva. cálido. . estimulante y una cualidad dinámica muy positiva y energética.• El color naranja tiene un carácter acogedor.

. jugoso como la naranja. disimulo e hipocresía. exótico como las frutas tropicales. sugiere informalidad en el trato y amistad. • También puede expresar inestabilidad.• Es vibrante como la luz del sol.

.

aunque hay que ser comedido en su uso. .• Es un color que destaca mucho sobre el entorno que le rodea. ya que si es brillante llena mucho la vista del espectador. por lo que se puede usar para dar un mayor peso visual a ciertos elementos de una composición.

.

y combina muy bien con su complementario. .• Admite buenos degradados. sobre todo cuando uno es claro y el otro oscuro. dando buenos contrastes.

.

del enfado y la irritabilidad. de la noche. de la infelicidad y desventura. del silencio. Negro. del misterio. sobre todo cuando es brillante. . de la seducción. de la tristeza y la melancolía. del cuervo. del mal. de lo clandestino o ilegal y. y es el color de la elegancia. gris y blanco • El color negro viene definido por la ausencia de luz y color • El negro confiere nobleza y elegancia.

.

.• Es un color casi imprescindible en toda composición. debido al alto contraste que ofrece sobre fondos blancos o claros. 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.

.

que aporta poco a ninguna información visual. indecisión. neutralidad. y sugiere seriedad. • Es el color del cielo cubierto. ausencia de energía. madurez. Gris • El gris es un color neutro y pasivo. . del hierro y del mercurio. equilibrio. duda y melancolía.

Recomendaciones 138 .

conmocionar. estremeser al espectador al ver la página. Son recomendadas en caso de querer impactar . impresionar.Utilizar colores claros como composición principal de la página • Utilizar letras negras u obscuras • Evite en lo posible fondos obscuros y letras claras ya que cansan visualmente al espectador . 139 .

cansa y hasta puede provocar confusión. para que destaque.Colores intensos • Genere un mayor peso visual al elemento principal con un color intenso. Para lograrlo es necesario que al rededor haya una composición de elementos claros. 140 . pieden peso los elementos destacados. • Si se satura la composición de elementos brillantes e intensos llena mucho la vista del espectador.

Utilizar colores complementarios • Las paginas que utilizan en su composición dos o mas colores (adicionalmente utilizar el blanco) provocan mayor interés visual en el espectador. 141 . • Debe utilizar color en los elementos que requiera destacar sin abusar de esto.

Colores monocromáticos. • Con el uso de matiz de un solo color puede diferencias las secciones de la página web. Visualmente le esta dando información al espectador. • Evite utilizar los matices obscuros o muy intensos porque puede provocar cansancio. confusión y que el espectador pierda el interés en seguir navegando en la pagina 142 .