Gu A B Sica para La Combinaci N de Colores

cristalab.
com
el 04 de Marzo de 2008
Gua bsica para la combinacin de colores

Tutoriales / Gua bsica para la combinacin de colores 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.
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.
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.
Printed with
joliprint
http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/
Page 1
cristalab.com
Relacin entre colores
ser una buena idea usar colores complementarios como primario y secundario de una pgina web.
Circulo Estandar del Color Segn su posicin relativa en el Crculo Estndar de Color, los colores pueden ser:
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
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. 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.
Printed with
Usados juntos producen sensacin de armona. Suele
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).
joliprint
Page 2
cristalab.com
sacin 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.
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. 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).
Printed with
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 sen-
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.
joliprint
Page 3
cristalab.com
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
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.
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 el segundo caso la gran luninosidad de am-
Printed with
joliprint
Suele ser un esquema eficaz con el que disear los distintos componentes de la pgina web, pero con
Page 4
cristalab.com
bos colores, y en especial la del verde, hace que el contraste sea demasido grande y la combinacin resulte agresiva.
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.
cundarios (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. 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 se-
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.
Printed with
joliprint
Page 5
cristalab.com
bilidad y debe utilizarse con prudencia.
Veamos un poco sobre el contraste en los textos
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).
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
joliprint
Printed with
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 inesta-
En este segundo caso, al contraste de color inicial
Page 6
cristalab.com
le hemos aadido Contraste de Luminancia, oscureciendo el fondo e iluminando el texto. La combinacin de ambos contrastes aumenta sensiblemente la legibilidad del texto.
Quizs tambin te interesen estos otros tips :
Nota de Cristalab :
Tweet Excelente tip!!! Interesante tip. well done penholder 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 Bravo, penHolder. Ya haca tiempo que no veamos tus tips por aqu. Me encant este tip. Est genial, te felicito penHolder. Es una informacin muy til y est bien ilustrada y estructurada. Es curioso, en principio asoci este tip a Sisco... En cualquier caso est genial, felicidades! Por vanvanero el 05 de Marzo de 2008 Gracias muy util en estos tiempos que piden al ingeniero ser diseador y otro poco de cosas que no debera..pero que igual toca empaparse de ellas..
Printed with
joliprint
Page 7
cristalab.com
Excelente tip, te felicito..! Una muy buena herramienta para combinar los colores es el CorelDraw, si, el CorelDraw; es perfecto para jugar con los colores ya que trae incorporado una paleta con todo lo que uno necesite a la hora de mezclar color (Modelo, Matices, Variacin, Tamao), se la recomiendo al 100%. (No es Publicidad, sino la realidad) son pocos los tips o tutos asi, muy bien Por noctam el 05 de Marzo de 2008 Esto no es un tip, es un artculo en toda regla! Me ha gustado mucho, gracias penHolder Por medianero el 05 de Marzo de 2008 Excelente. Sabes mas que picasso Por nick77 el 06 de Marzo de 2008
joliprint
pd: Tres olores constituyen una Triada ajoajoajoja Yo no lo hubiese explicado mejor! Muy bien.
egoman_blog :
Tres olores constituyen una Triada es cierto tiene un par de errores de tipeado: En el Ttulo le falta tilde a Combinacin dice: Esquema Aromatico Monotono; en lugar de: Esquema Acromtico Monotono:
__________________________________________ Por otro lado, esto es en si un tutorial, y estaba en sala de espera para ser revisado, y asi lograr su aprobacion para entrar en esa tan selecto grupo; pero en definitiva, para que escribimos tips y/o tutoriales sino para el crecimiento de Clab, si mandamos un Tutorial y no un tip, no es mas q por 50 puntos mas en nuestro clabLevel, y para q debajo de nuestro avatar diga fastuosamente x Tutorial, y q es eso... nada. Perdon si me puse algo altruista Por HernanRivas (lo el 06 de Marzo de 2008 El nico tutorial que tengo, originalmente fue un tip, as que ste no deja de ser un buen paso para la inmortalidad.
excelente tip. Gracias x el aporte Por egoman el 06 de Marzo de 2008 exelente info. gracias
Printed with
Page 8
cristalab.com
Carmen Vivas_blog : penHolder :

[...]aquellos tres (cyan, amarillo y magenta) que no se pueden obtener a partir de ninguna mezcla[...] Si hablamos de colores para la web, osea colores luz, los primarios son: Rojo, Azul y Verde, y los secundarios son el cyan, amarillo y magenta Por el 08 de Marzo de 2008
...Por otro lado, esto es en si un tutorial, y estaba en sala de espera para ser revisado, y asi lograr su aprobacion para entrar en esa tan selecto grupo; pero en definitiva, para que escribimos tips y/o tutoriales sino para el crecimiento de Clab, si mandamos un Tutorial y no un tip, no es mas q por 50 puntos mas en nuestro clabLevel, y para q debajo de nuestro avatar diga fastuosamente x Tutorial, y q es eso... nada. Perdon si me puse algo altruista Un Tutorial se caracteriza por tener una mayor calidad y por que generalmente el objetivo es mas complicado que en un Tip, seguramente tu tutorial fue revisado y anotado para publicacion pero por cuestiones de tiempo no pudo hacerlo. Aunque eso cambiara muy pronto no es asi elder? Por Carmen Vivas el 08 de Marzo de 2008 Esto es una clase magistral sobre teora de color, un tutorial en toda regla y un imprescindible referente a la hora de comenzar cualquier paleta de color. Muchas gracias!!! Slo puntualiar por trmino que nadie confunda tu definin de primario como color basico de tu paleta (el ms predominante) con la definicin tradicional de color primario, es decir, aquellos tres (cyan, amarillo y magenta) que no se pueden obtener a partir de ninguna mezcla y en cambio, a partir de estos tres s se puede producir cualquier color existente (los llamados secundarios y terciarios), incluido e negro bajo una mezcla proporcional de los tres. Slo esta puntualizacin por el termino que has usado. Nada ms. Muchas gracias de nuevo!!
Carmen Vivas_blog :
Slo puntualiar por trmino que nadie confunda tu definin de primario como color basico de tu paleta (el ms predominante) con la definicin tradicional de color primario, es decir, aquellos tres (cyan, amarillo y magenta) que no se pueden obtener a partir de ninguna mezcla y en cambio, a partir de estos tres s se puede producir cualquier color existente (los llamados secundarios y terciarios), incluido e negro bajo una mezcla proporcional de los tres. Slo esta puntualizacin por el termino que has usado. Nada ms. Muchas gracias de nuevo!!
sucede que antes ya habia explicado la teoria de RGB, quizas debi hacer algun tipo de referencia Por penHolder (lo el 08 de Marzo de 2008
Carmen Vivas_blog :
Slo puntualiar por trmino que nadie confunda tu definin de primario como color basico de tu paleta (el ms predominante) con la definicin tradicional de color primario, es decir, aquellos tres (cyan, amarillo y magenta) que no se pueden obtener a partir de ninguna mezcla y en cambio, a partir
Printed with
joliprint
Page 9
cristalab.com
de estos tres s se puede producir cualquier color existente (los llamados secundarios y terciarios), incluido e negro bajo una mezcla proporcional de los tres. Slo esta puntualizacin por el termino que has usado. Nada ms. Muchas gracias de nuevo!!
bonito, funcional, clarisimo, importante, tiene muchisimas caracteristicas escenciales, mas que un tip, es todo un regalo, gracias, penHolder. Por Seor Oz_blog el 13 de Marzo de 2008
sucede que antes ya habia explicado la teoria de RGB, quizas debi hacer algun tipo de referencia Por ed el 10 de Marzo de 2008 exacto, lo que necesitaba, ahora ya se como defender una paleta, o humillar otra Por santi el 10 de Marzo de 2008 Toda una leccin que nos ayuda mucho a los que nos iniciamos en el proceloso mundo del diseo web. Muchas gracias! Por GeBeSa el 10 de Marzo de 2008 Hola, me ha encantado tu post y he escrito uno en mi blog haciendo referencia a l y he puesto un link hacia tu blog y este post en concreto. Si te molesta slo tienes que decrmelo y lo quitar. Saludos! http://recursosartedigital.blogspot.com/2008/03/ uno-de-las-aspecto-ms-importantes-la.html Por Seor Oz el 11 de Marzo de 2008
Hola, me ha encantado tu post y he escrito uno en mi blog haciendo referencia a l y he puesto un link hacia tu blog y este post en concreto. Si te molesta slo tienes que decrmelo y lo quitar Por GeBeSa_blog el 13 de Marzo de 2008 bonito, funcional, clarisimo, importante, tiene muchisimas caracteristicas escenciales, mas que un tip, es todo un regalo, gracias, penHolder. Por dagoberto rafael el 14 de Marzo de 2008 por favor envien formulas para conbinar el color por ejemplo rojo mas aamarillo dara,etc. Por jean pierre el 14 de Marzo de 2008 como se combinan los tipos de letras y y los tipos de colores??? xfa me respoden a mi msn elbebe_123_9@.. Por Fepe el 14 de Marzo de 2008 Muy buena gua, muy intersante y til al momento de buscar inspiracin para un diseo.
Printed with
joliprint
Page 10
cristalab.com
Por jenny el 22 de Marzo de 2008 con que colores puede convinar para obtener el color verde oscuro Por nano300 el 24 de Marzo de 2008 es un muy buen tip, interesante y practico a la hora de definir nuestro diseo... Por jennifer tatis el 24 de Marzo de 2008 uff eres una genia jajaja Por erick el 29 de Marzo de 2008 como se forma el verde. por favor respondan! gracias. Por Enoeia CARRASQUILLO el 30 de Marzo de 2008 cual es el color magengta de que combinacion Por GCristina.G el 30 de Marzo de 2008
joliprint
Por dg_max el 05 de Abril de 2008 de lo mas pequeo nacen las cosas mas grandes. gracias Por NoInsp el 18 de Abril de 2008
NoInspirado :
Quien copi a quien?
NoInspirado :
Wow ! No es posible, realmente es de las cosas que asombran y/o asustan... Es por esto que todo el Tip de PenHolder esta TROLLeado ?...
M@U : NoInspirado :
Wow ! No es posible, realmente es de las cosas que asombran y/o asustan... Es por esto que todo el Tip de PenHolder esta TROLLeado ?... As es. Ahora la pregunta, penHolder ha hecho algn tip original?
Por dinitaaaaaa...... el 31 de Marzo de 2008 hola pos la verdad me parcio muy buena pagina puesto q m pos esta pase tecnoligiaaaaaaaaa.......... un bso
Printed with
Page 11
cristalab.com
Freddie : M@U : NoInspirado :

Wow ! No es posible, realmente es de las cosas que asombran y/o asustan... Es por esto que todo el Tip de PenHolder esta TROLLeado ?... As es. Ahora la pregunta, penHolder ha hecho algn tip original? Eso merece un CHAN CHAN! polmico. Y la ardillita que siempre ponen que mira a la cmara. La verdad, no creo que PenHolder se valla trolleando. Creo que puede haber sido este un caso especial. Por penHolder (lo el 22 de Abril de 2008 Muy buena PenH da igual el rtulo que le aadas a tu avatar. Te felicito por el tiempo empleado en redactar este Tuto. Por cierto por que te han puesto Troll ???
joliprint
Por cierto por que te han puesto Troll ??? rectifico la ultima frase
koballo : koballo :
Muy buena PenH da igual el rtulo que le aadas a tu avatar. Te felicito por el tiempo empleado en redactar este Tuto.
Por cierto por que te han puesto Troll ??? rectifico la ultima frase Por hola gracias el 24 de Abril de 2008 quuee guapa me ha servidoo para hacer mi trabajoo felicito akien haya sidoo !! Por laura el 06 de Mayo de 2008 yo quiero que hablen de como se crean los colores con los primarios
laura-blog :
yo quiero que hablen de como se crean los colores con los primarios
koballo :
Muy buena PenH da igual el rtulo que le aadas a tu avatar. Te felicito por el tiempo empleado en redactar este Tuto.
Printed with
bueno hablemos...
Page 12
cristalab.com
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 lola el 06 de Junio de 2008 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 cierto... alguien sabe por qu el post que abre este hilo est catalogado como troll? pobre penHolder...
andrea_blog :
esta pagina no sirve osea !hello! no se q le ven a esta pagina , porq yo no veo nada interesante
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.
joliprint
Jajajaja Perdn, pero me hizo rer. Osea, !Hello! Por kelly el 19 de Mayo de 2008 deberian colocarle combinaciones
Printed with
Page 13
cristalab.com
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 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
joliprint
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 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
o puedes...
Ests registrado en Cristalab y quieres publicar tu URL y avatar? No ests registrado an pero quieres hacerlo antes de publicar tu comentario?
no aparece como se combina el choclate.no me gusto Por faustooo el 24 de Junio de 2008 mui buena informacionn!!!!!*
Printed with
Page 14

Gu A B Sica para La Combinaci N de Colores

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Gu A B Sica para La Combinaci N de Colores

Diunggah oleh

Hak Cipta:

Format Tersedia

cristalab.

Gua bsica para la combinacin de colores

Estructura bsica de una composicin

Dos puntos a tener en cuenta

Relacin entre colores

Usados juntos producen sensacin de armona. Suele

sacin de armona que usando el complementario directo.

Contraste entre colores

Teora del color

bilidad y debe utilizarse con prudencia.

Veamos un poco sobre el contraste en los textos

En este segundo caso, al contraste de color inicial

Quizs tambin te interesen estos otros tips :

Carmen Vivas_blog : penHolder :

Quien copi a quien?

Freddie : M@U : NoInspirado :

Anda mungkin juga menyukai