Gua bsica para la combinacin de colores Pgina 1 de 15

Olvidaste tu usuario o clave? Usuario Contrasea Entrar o registrate Bsqueda personalizada

Foros Blog Tutoriales Cursos Videotutoriales Comic

Publica un tutorial Qu es Cristalab? Tags Ejemplos Anime

Qu quieres buscar? Buscar

Tutoriales / Gua bsica para la combinacin de colores

Gua bsica para la combinacin de colores

Por penHolder el 04 de Marzo de 2008 con 1,997,148 visitas 507
16
Diseo grfico Otros tutoriales por penHolder. Like
Twittear

Aprende en la Carrera de Diseo y UX cmo hacer de esto, tu profesin.

Mira el tutorial actualizado sobre Cmo combinar colores en diseo Web

Cmo combinar colores a la hora de realizar el diseo de un nuevo proyecto?

La combinacin de colores es fundamental al momento del diseo, ya que va a tener una influencia realmente grande en cmo lo perciban los usuarios y la
sensacin que les quede despus de verlo.

Una de las primeras cosas a tener en cuenta es el numero o cantidad de colores. Es arriesgado establecer una norma estricta, ya que ms de 6 colores
simultneos en una composicion pueden ser demasiados si existe un gran contraste entre ellos, pero pueden formar una combinacin agradable si la relacin
entre ellos es adecuada.

Dos puntos a tener en cuenta

Siempre es mejor pocos colores antes que muchos. Como mnimo, el riesgo de estridencias es menor.
Podemos afirmar que 3 colores en una misma composicin sera lo mnimo a utilizar y, en la mayora de casos, debiera ser suficiente. Con menos de 3,
las posibilidades de que la pgina o la imagen sea anodina y aburrida son muy grandes.

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 2 de 15

Estructura bsica de una composicin

(pensemos por ejemplo en un sitio web)

Color Primario: es el tono bsico de la pgina, el que la define, y el que ocupa la gran mayora de la misma. Sera el color del atributo "background" de la
pgina.
Color Secundario: es el segundo tono predominante en la pgina, aunque en mucha menor medida que el primario. Normalmente debe acotar o resaltar
reas y debe ser bastante prximo en tono al primario.
Color Destacado: es el color que se utiliza para resaltar aspectos concretos de la pgina. Por definicin debe contrastar mucho con los colores primario y
secundario y, por tanto, debe utilizarse con moderacin. Puede utilizarse el Complementario o el Complementario Escindido del color primario de la
pgina.

Relacin entre colores

Circulo Estandar del Color

Segn su posicin relativa en el Crculo Estndar de Color, los colores pueden ser:

Colores Anlogos: Para un determinado color, sus colores anlogos son aquellos que se encuentran a ambos lados del mismo en el crculo de color.
Por ejemplo los anlogos del naranja seran el rojo y el amarillo. En un sentido ms especfico, los anlogos del rojo "red", seran rojo violceo "crimson"
y rojo anaranjado "orangered".

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 3 de 15

Usados juntos producen sensacin de armona. Suele ser una buena idea usar colores complementarios como primario y secundario de una pgina web.

Colores Complementarios: Son aquellos que se encuentran opuestos en el crculo de color (por ejemplo el amarillo y el violeta o naranja y azul). Usados
juntos producen un gran contraste destacando mucho uno sobre el otro. Su efecto puede ser llamativo y hasta agresivo.
Dos colores complementarios seran por ejemplo el rojo violceo "crimson" y el turquesa "turquoise"

Suele funcionar muy bien usar el color complementario del primario de una pgina como color destacado. Tambin suele ser una buena alternativa utilizar
el color complementario del secundario.

Colores Monocromticos: Son aquellos que se encuentran aislados, sin presencia de otros colores. Usados producen sensacin de unidad,
homogeneidad y robustez. Se puede evitar la monotona utilizndolos con diferente luminosidad (ms claros y ms oscuros).

Colores Complementarios Adyacentes: Para un color, sus complementarios adyacentes son los colores anlogos de su color complementario.
Tres colores complementarios adyacentes del rojo "red" seran por ejemplo el verde primavera "springgreen" y el azul cielo "skyblue".

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 4 de 15

El uso de de un color y sus complementarios adyacentes aporta un alto nivel de contraste, sin llegar al extremo cuando se usa directamente su
complementario. Tambin suele ser mayor la sensacin de armona que usando el complementario directo.

Trada de Colores: Tres colores constituyen una Trada cuando sus tonos son equidistantes en el Crculo Estndar de Color.
Un ejemplo de trada lo constituiran el amarillo "yellow" junto al turquesa "turquoise" y al violeta "violet".

Utilizar un esquema de color en trada suele ser una buena solucin cuando se desea un diseo colorido, ya que la mezcla estar bien balanceada. Si el
conjunto resulta demasiado colorido para lo que necesitamos, siempre se pueden apagar un poco los colores disminuyendo su luminosidad o su
saturacin (o ambas).

Esquema Cromtico Monotono: Un esquema de color monotono lo constituyen un nico tono de color junto a sus posibles variaciones en trminos de
tintes, luminosidad y saturacin.

Suele ser una buena solucin si se desea un diseo robusto y homogneo pero con las diferenciaciones y resaltes necesarios. En el caso probable de
sensacin de monotona, siempre es una buena solucin introducir negro y blanco.

Esquema Acromtico Monotono: Un esquema de color acromtico monotono es un caso particular del esquema de color monotono constituido slo por
colores neutros dentro de la gama del negro al blanco.

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 5 de 15

Suele ser un esquema eficaz con el que disear los distintos componentes de la pgina web, pero con seguridad resultar aburrido. Una buena solucin
es introducir un color resaltado como rojo o celeste.

Contraste entre colores

El contraste ser mayor cuanto mayores sean las diferencias entre ambos en trminos de:

Tono
Luminancia
Cromancia

Cuando se disea un sitio el elegir el contraste entre los colores que vamos a usar es muy importante porque va a influir directamente en la sensacin que
vamos a transmitir a los visitantes.
En primer lugar ser importante que exita un gran contraste entre el testo ordinario y el fondo. Sin embargo habr que tener sumo cuidado en no caer en
estridencias que generalmente son tomadas como inmadurez o falta de profesionalidad.

Esta misma recomendacin es aplicable cuando elegimos colores para resaltar o separar reas de contenidos (aqu es menos necesario y abusar de l
puede ser an ms perjudicial).
Si en nuestras pginas utilizamos por ejemplo un marco del rea de trabajo gris y queremos utilizar un verde para reas resaltadas, no es lo mismo elegir la
sig. combinacin:

en contraposicion con esta

En el segundo caso la gran luninosidad de ambos colores, y en especial la del verde, hace que el contraste sea demasido grande y la combinacin resulte
agresiva.

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 6 de 15

Teora del color

La Teora del color define muchos tipos de contraste y, aunque algunos no son especialmente aplicables a pginas web, es muy interesante conocerlos
para profundizar en el conocimiento del efecto de los colores.

Contraste de Tono: Est relacionado directamente con las distancias entre dos colores dentro del Crculo Estndar de Color descritas m arriba. As,
cuanta mayor es la distancia entre dos colores dentro del crculo, mayor es el contraste entre ambos.

Entonces, una pareja de colores complementarios produce el mximo contraste, mientras que para cualquier color el que menor contraste produce con
este es su adyacente.
Es interesante el contraste de tono entre colores fros y clidos. Los colores clidos siempre aparecen al espectador ms prximos, mientras que los
colores fros aparecen al espectador ms distantes.
En una pgina web ser ms conveniente utilizar colores fros para marcos, tapices o elementos secundarios (como es el caso de Clab) y colores
calientes para mens, iconos o barras de herramientas que queramos que el usuario siempre tenga presente.
Para la relacin texto y fondo normalmente no ser suficiente contraste de tono ya que no garantizar legibilidad suficiente. Ser necesario aplicar algn
tipo de contraste adicional.

Contraste de Luminancia (o de Valor): Permite crear grandes contrastes con el mismo tono de color slo mediante el brillo de luz:

En general este tipo de contraste, an siendo grande, es agradable al ojo humano, con lo que usarlo en diseos web suele ser trabajar sobre seguro.
Como contrapartida, no arriesgar en la combinacin de tonos, puede significar apostar por un diseo convencional, poco impactante.

Contraste de Saturacin: El contraste de saturacin con frecuencia es el ms adecuado para resaltar aspectos de la pgina web de una forma
moderada, poco estridente.

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 7 de 15

Un efecto interesante se obtiene utilizando reas con diferentes saturaciones con un fondo gris: se produce una sensacin de transparencia que puede
ser muy apropiada en ciertas circunstancias.

Contraste Simultneo: Es un efecto creado por nuestro sistema visual que, dado un color predominante, tiende a requerir su color complementario.
Este efecto puede obtenerse combinando dos colores brillantes pero que no sean complementarios, o, simplemente, utilizando un color brillante sobre un
fondo neutro (un color de la gama de los grises).

Este tipo de contraste tiene la ventaja de resaltar diferencias entre reas de forma impactante, pero sin la agresividad que producen los complementarios.
Sin embargo puede provocar tensin e inestabilidad y debe utilizarse con prudencia.

Veamos un poco sobre el contraste en los textos

En este caso he utilizado un Contraste de Tono, poniendo un lienzo violeta y el texto en turquesa, que es complementario adyacente del primero, por lo que
la combinacin debera aportar suficiente contraste de color.
Sin embargo, vemos que para el caso de textos, no es as: la combinacin no aporta suficiente contraste y leer el texto cansa la vista (sobre todo si fuera un
prrafo largo). Aunque la mezcla es natural y no es desagradable, no es adecuada para textos.

Veamos con otra combinacin

En este segundo caso, al contraste de color inicial le hemos aadido Contraste de Luminancia, oscureciendo el fondo e iluminando el texto. La combinacin
de ambos contrastes aumenta sensiblemente la legibilidad del texto.

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 8 de 15

Los colores tienen unas caractersticas naturales de luminosidad. As el turquesa o azul mar es naturalmente ms claro que el rojo violceo. Nos damos
cuenta que son complementarios, la mezcla funciona bien y aporta suficiente contraste.

Sin embargo, invertir las relaciones naturales entre colores no funciona.

Aportando contraste de luminancia y de saturacin simultneamente conseguimos oscurecer el turquesa y aclarar el crimson pero, aunque consiguiramos
suficiente contraste para resaltar el texto (que vemos que no es el caso), la vista no se sentira cmoda ante la mezcla.

Como acabamos de comentar usar convenientemente el contraste es especialmente importante cuando se trata de escribir texto y resaltarlo suficientemente
para garantizar su legibilidad a la totalidad de nuestros usuarios.

Con esto ya tienen una Gua bsica para que al momento de plantear un diseo sepan ms o menos desde dnde partir

Quizs tambin te interesen estos otros tips :

Obtener la paleta de colores de una imagen

Colorear imgenes en blanco y negro
Propiedades bsicas de los archivos .psd

Nota de Cristalab :

Aparentemente este usuario copi el artculo de este sitio web

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 9 de 15

Sabes SQL? No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y ms con el Curso Profesional de Bases de Datos que empieza el martes, en
vivo.

Envia un comentario (73)

Propiedades bsicas de archivos Crear efecto de imagen reflejada en un Extraer cabello de fotografas de forma
Photoshop (.psd) ojo con Photoshop fcil con Photoshop

Hemos esperado mucho,

Linterna Lumify X9 pero esta potente linterna ya
est disponible

Anterior 1 2 3

Por laura el 06 de Mayo de 2008

yo quiero que hablen de como se crean los colores con los primarios

Por penHolder el 07 de Mayo de 2008

laura-blog :

yo quiero que hablen de como se crean los colores con los primarios

bueno hablemos...

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 10 de 15

Por abigail el 16 de Mayo de 2008

gracias ppor

esos

tips

bye

Por melisa el 16 de Mayo de 2008

muy bueno por que lo informan mas a uno

yo qiero que cuenten cales colores se mesclanpara que den otros colores

Por fory el 18 de Mayo de 2008

buenazo gracias por el tiempo redactado suerteeeeeeeeeeee..............

Por JaLeRu el 18 de Mayo de 2008

andrea_blog :

esta pagina no sirve osea !hello! no se q le ven a esta pagina , porq yo no veo nada interesante

Jajajaja Perdn, pero me hizo rer.

Osea, !Hello!

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 11 de 15

Por kelly el 19 de Mayo de 2008

deberian colocarle combinaciones

Por lola el 06 de Junio de 2008

que color sale violeta

Por Lax Barbaroothaaaa!! el 06 de Junio de 2008

osea io andaba buscando combinaciones no estas cuestiones

Por kenny Ronal Cruzado el 08 de Junio de 2008

Es un excelente trabajo,se ve q sabes mucho...la verdad me sacaste de apuros, busque y busque en internet y nada. QUE BUENO Q EXISTAN PAGINAS COMO
ESTAS

Por El Oso Amoroso el 11 de Junio de 2008

Por cierto...
alguien sabe por qu el post que abre este hilo est catalogado como "troll"?

pobre penHolder...

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 12 de 15

Por Freddie el 11 de Junio de 2008

rizome :

Por cierto...
alguien sabe por qu el post que abre este hilo est catalogado como "troll"?

pobre penHolder...

penHolder hizo copypaste de este artculo. No es de l originalmente.

Por El Oso Amoroso el 11 de Junio de 2008

Freddie :

penHolder hizo copypaste de este artculo. No es de l originalmente.

Informado quedo.

asias

Por isabel6 el 18 de Junio de 2008

que colores quedan mejor con el verde pino el plateado o el dorado?

Por Graciela el 18 de Junio de 2008

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 13 de 15

Les estaria muy agradecidos si uds me dijeran cual es la mejor combinacin de color que puedo poner a una pared azul cielo, es que no se que color usar en las
alfombras. ES para una oficina. Gracias

Por Cesar Padilla el 18 de Junio de 2008

Muy interesante la Pagina de colores, me gustaria que me ayuden proporcionandome una relacion de mezcla de colores. Por ejemplo mezclando qu colores se
obtiene el rojo violaceo?
Muy agradecido

Por joostyn el 18 de Junio de 2008

no aparece como se combina el choclate.no me gusto

Por faustooo el 24 de Junio de 2008

mui buena informacionn!!!!!*

Por anita el 26 de Junio de 2008

por favor diganme que el marron y el negro no combinan,

Por camilo el 04 de Julio de 2008

como ago el clor calipso

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 14 de 15

Por malimba el 07 de Julio de 2008

Muy bien , me ayudo mucho en clase y por esto me saque la mejor nata , gracias
y el que lee aprende si lo lo aplica o si no solo pasa.

Por feli el 12 de Julio de 2008

esta muy bueno , yo lo e utilizado para el email , muy bueno

Por dayamar el 15 de Julio de 2008

que te pasa ovio que nos gusta eso es arte otra cosa es que otros tarados no lo aprecien

Anterior 1 2 3

Publica tu comentario o puedes...

Ests registrado en
El autor de este artculo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes Cristalab y quieres
hacerlos en el foro publicar tu URL y avatar?
Entra al foro y participa en la discusin
Inicia sesin

No ests registrado an
pero quieres hacerlo antes
de publicar tu comentario?

Registrate

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017
Gua bsica para la combinacin de colores Pgina 15 de 15

Blog Foros Tutoriales Tutoriales de Flash Ejemplos .fla Anime Videotutoriales Cursos Curso de Flash Curso de HTML Tags

http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/ 05-05-2017