¿Cómo combinar colores a la hora de realizar el diseño de un nuevo proyecto? La combinación de colores es fundamental al momento del diseño, ya que va a tener una influencia realmente grande en cómo lo perciban los usuarios y la sensación que les quede después 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 más de 6 colores simultáneos en una composicion pueden ser demasiados si existe un gran contraste entre ellos, pero pueden formar una combinación agradable si la relación entre ellos es adecuada.
Dos puntos a tener en cuenta
Siempre es mejor pocos colores antes que muchos. Como mínimo, el riesgo de estridencias es menor.
Podemos afirmar que 3 colores en una misma composición sería lo mínimo a utilizar y, en la mayoría de casos, debiera ser suficiente. Con menos de 3, las posibilidades de que la página o la imagen sea anodina y aburrida son muy grandes.
Estructura básica de una composición
(pensemos por ejemplo en un sitio web)
Color Primario: es el tono básico de la página, el que la define, y el que ocupa la gran mayoría de la misma. Sería el color del atributo "background" de la página.
Color Secundario: es el segundo tono predominante en la página, aunque en mucha menor medida que el primario. Normalmente debe acotar o resaltar áreas y debe ser bastante próximo en tono al primario.
Color Destacado: es el color que se utiliza para resaltar aspectos concretos de la página. Por definición debe contrastar mucho con los colores primario y secundario y, por tanto, debe utilizarse con moderación. Puede utilizarse el Complementario o el Complementario Escindido del color primario de la página.
Relación entre colores
Circulo Estandar del Color
Según su posición relativa en el Círculo Estándar de Color, los colores pueden ser:
Colores Análogos: Para un determinado color, sus colores análogos son aquellos que se encuentran a ambos lados del mismo en el círculo de color. Por ejemplo los análogos del naranja serían el rojo y el amarillo. En un sentido más específico, los análogos del rojo "red", serían rojo violáceo "crimson" y rojo anaranjado "orangered".
Usados juntos producen sensación de armonía. Suele ser una buena idea usar colores complementarios como primario y secundario de una página web.
Colores Complementarios: Son aquellos que se encuentran opuestos en el círculo 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 serían por ejemplo el rojo violáceo "crimson" y el turquesa "turquoise"
Suele funcionar muy bien usar el color complementario del primario de una página como color destacado. También suele ser una buena alternativa utilizar el color complementario del secundario.
Colores Monocromáticos: Son aquellos que se encuentran aislados, sin presencia de otros colores. Usados producen sensación de unidad, homogeneidad y robustez. Se puede evitar la monotonía utilizándolos con diferente luminosidad (más claros y más oscuros).
Colores Complementarios Adyacentes: Para un color, sus complementarios adyacentes son los colores análogos de su color complementario. Tres colores complementarios adyacentes del rojo "red" serían por ejemplo el verde primavera "springgreen" y el azul cielo "skyblue".
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. También suele ser mayor la sensación de armonía que usando el complementario directo.
Tríada de Colores: Tres colores constituyen una Tríada cuando sus tonos son equidistantes en el Círculo Estándar de Color. Un ejemplo de tríada lo constituirían el amarillo "yellow" junto al turquesa "turquoise" y al violeta "violet".
Utilizar un esquema de color en tríada suele ser una buena solución cuando se desea un diseño 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 saturación (o ambas).
Esquema Cromático Monotono: Un esquema de color monotono lo constituyen un único tono de color junto a sus posibles variaciones en términos de tintes, luminosidad y saturación.
Suele ser una buena solución si se desea un diseño robusto y homogéneo pero con las diferenciaciones y resaltes necesarios. En el caso probable de sensación de monotonía, siempre es una buena solución introducir negro y blanco.
Esquema Acromático Monotono: Un esquema de color acromático monotono es un caso particular del esquema de color monotono constituido sólo por colores neutros dentro de la gama del negro al blanco.
Suele ser un esquema eficaz con el que diseñar los distintos componentes de la página web, pero con seguridad resultará aburrido. Una buena solución es introducir un color resaltado como rojo o celeste.
Contraste entre colores
El contraste será mayor cuanto mayores sean las diferencias entre ambos en términos de:
Tono
Luminancia
Cromancia
Cuando se diseña un sitio el elegir el contraste entre los colores que vamos a usar es muy importante porque va a influir directamente en la sensación 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 recomendación es aplicable cuando elegimos colores para resaltar o separar áreas de contenidos (aquí es menos necesario y abusar de él puede ser aún más perjudicial). Si en nuestras páginas 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. combinación:
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 combinación resulte agresiva.
Teoría del color
La Teoría del color define muchos tipos de contraste y, aunque algunos no son especialmente aplicables a páginas 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 Círculo Estándar de Color descritas má arriba. Así, cuanta mayor es la distancia entre dos colores dentro del círculo, mayor es el contraste entre ambos.
Entonces, una pareja de colores complementarios produce el máximo contraste, mientras que para cualquier color el que menor contraste produce con este es su adyacente. Es interesante el contraste de tono entre colores fríos y cálidos. Los colores cálidos siempre aparecen al espectador más próximos, mientras que los colores fríos aparecen al espectador más distantes. En una página web será más conveniente utilizar colores fríos para marcos, tapices o elementos secundarios (como es el caso de Clab) y colores calientes para menús, iconos o barras de herramientas que queramos que el usuario siempre tenga presente. Para la relación texto y fondo normalmente no será suficiente contraste de tono ya que no garantizará legibilidad suficiente. Será necesario aplicar algún tipo de contraste adicional.
Contraste de Luminancia (o de Valor): Permite crear grandes contrastes con el mismo tono de color sólo mediante el brillo de luz:
En general este tipo de contraste, aún siendo grande, es agradable al ojo humano, con lo que usarlo en diseños web suele ser trabajar sobre seguro. Como contrapartida, no arriesgar en la combinación de tonos, puede significar apostar por un diseño convencional, poco impactante.
Contraste de Saturación: El contraste de saturación con frecuencia es el más adecuado para resaltar aspectos de la página web de una forma moderada, poco estridente.
Un efecto interesante se obtiene utilizando áreas con diferentes saturaciones con un fondo gris: se produce una sensación de transparencia que puede ser muy apropiada en ciertas circunstancias.
Contraste Simultáneo: 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 tensión 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 combinación debería aportar suficiente contraste de color. Sin embargo, vemos que para el caso de textos, no es así: la combinación no aporta suficiente contraste y leer el texto cansa la vista (sobre todo si fuera un párrafo largo). Aunque la mezcla es natural y no es desagradable, no es adecuada para textos.
Veamos con otra combinación
En este segundo caso, al contraste de color inicial le hemos añadido Contraste de Luminancia, oscureciendo el fondo e iluminando el texto. La combinación de ambos contrastes aumenta sensiblemente la legibilidad del texto.
Los colores tienen unas características naturales de luminosidad. Así el turquesa o azul mar es naturalmente más claro que el rojo violáceo. 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 saturación simultáneamente conseguimos oscurecer el turquesa y aclarar el crimson pero, aunque consiguiéramos suficiente contraste para resaltar el texto (que vemos que no es el caso), la vista no se sentiría cómoda 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 Guía básica para que al momento de plantear un diseño sepan más o menos desde dónde partir
Bravo, penHolder. Ya hacía tiempo que no veíamos tus tips por aquí. Por:The Fricky!
Me encantó este tip. Está genial, te felicito penHolder.
Es una información muy útil y está bien ilustrada y estructurada. Por:XKlibur
Es curioso, en principio asocié este tip a Sisco...
En cualquier caso está genial, ¡felicidades! Por:Juanlu_001
Gracias muy util en estos tiempos que piden al ingeniero ser diseñador y otro poco de cosas que no debería..pero que igual toca empaparse de ellas.. Por:vanvanero_blog
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, Variación, Tamaño), se la recomiendo al 100%. (No es Publicidad, sino la realidad) Por:torrealbaruben
Peb holder :alabadi: esto em servira de muchisimo, los ingenieros pro lo regular nos cuesta bastante encontrar los colores adecuados gracias Por:FeNtO
son pocos los tips o tutos asi, muy bien Por:eldervaz
Excelente. Sabes mas que picasso Por:medianero_blog
excelente tip. Gracias x el aporte Por:nick77_blog
exelente info. gracias
pd: Tres olores constituyen una Triada ajoajoajoja Por:egoman_blog
Yo no lo hubiese explicado mejor! Muy bien. Por:Sisco
egoman_blog :
Tres olores constituyen una Triada
es cierto tiene un par de errores de tipeado:
♦ En el Título le falta tilde a Combinación ♦ dice: Esquema Aromatico Monotono; en lugar de: Esquema Acromático 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:penHolder
El único tutorial que tengo, originalmente fue un tip, así que éste no deja de ser un buen paso para la inmortalidad. Por:HernanRivas (logout)
penHolder :
...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:Carloz.Yanez
Esto es una clase magistral sobre teoría de color, un tutorial en toda regla y un imprescindible referente a la hora de comenzar cualquier paleta de color. Muchas gracias!!!
Sólo puntualiar por término que nadie confunda tu definión de "primario" como color basico de tu paleta (el más predominante) con la definición 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. Sólo esta puntualización por el termino que has usado. Nada más. Muchas gracias de nuevo!! Por:Carmen Vivas_blog
Carmen Vivas_blog :
[...]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:CarlosRuminott
Carmen Vivas_blog :
Sólo puntualiar por término que nadie confunda tu definión de "primario" como color basico de tu paleta (el más predominante) con la definición 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. Sólo esta puntualización por el termino que has usado. Nada más. Muchas gracias de nuevo!!
sucede que antes ya habia explicado la teoria de RGB, quizas debi hacer algun tipo de referencia Por:
Carmen Vivas_blog :
Sólo puntualiar por término que nadie confunda tu definión de "primario" como color basico de tu paleta (el más predominante) con la definición 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. Sólo esta puntualización por el termino que has usado. Nada más. Muchas gracias de nuevo!!
sucede que antes ya habia explicado la teoria de RGB, quizas debi hacer algun tipo de referencia Por:penHolder (logOut)
exacto, lo que necesitaba, ahora ya se como defender una paleta, o humillar otra Por:ed_blog
Toda una lección que nos ayuda mucho a los que nos iniciamos en el proceloso mundo del diseño web. ¡Muchas gracias! Por:santi_blog
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 sólo tienes que decírmelo y lo quitaré.
bonito, funcional, clarisimo, importante, tiene muchisimas caracteristicas escenciales, mas que un tip, es todo un regalo, gracias, penHolder. Por:Señor Oz_blog
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 sólo tienes que decírmelo y lo quitaré Por:Señor Oz_blog_blog
bonito, funcional, clarisimo, importante, tiene muchisimas caracteristicas escenciales, mas que un tip, es todo un regalo, gracias, penHolder. Por:GeBeSa_blog_blog
esta pagina no sirve osea !hello! no se q le ven a esta pagina , porq yo no veo nada interesante Por:andrea_blog
andrea_blog :
esta pagina no sirve osea !hello! no se q le ven a esta pagina , porq yo no veo nada interesante
Alégranos la vida y cuéntanos algo tu Por:CarlosRuminott
por favor envien formulas para conbinar el color por ejemplo rojo mas aamarillo dara,etc. Por:dagoberto rafael_blog
como se combinan los tipos de letras y y los tipos de colores??? xfa me respoden a mi msn elbebe_123_9@.. Por:jean pierre_blog
Muy buena guía, muy intersante y útil al momento de buscar inspiración para un diseño. Por:Fepe_blog
con que colores puede convinar para obtener el color verde oscuro Por:jenny_blog
es un muy buen tip, interesante y practico a la hora de definir nuestro diseño... Por:nano300_blog
uff eres una genia jajaja Por:jennifer tatis_blog
como se forma el verde. ¡por favor respondan! gracias. Por:erick_blog
cual es el color magengta de que combinacion Por:Enoeia CARRASQUILLO_blog
muchos colores lindoosS Por:G'Cristina.GuedeZ
hola pos la verdad me parcio muy buena pagina puesto q m pos esta pase tecnoligiaaaaaaaaa.......... un bso Por:dinitaaaaaa......_blog
de lo mas pequeño nacen las cosas mas grandes. gracias Por:dg_max_blog
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 algún tip original?
Eso merece un CHAN CHAN! polémico. Y la ardillita que siempre ponen que mira a la cámara.
La verdad, no creo que PenHolder se valla trolleando. Creo que puede haber sido este un caso especial. Por:JaLeRu
En realidad el articulo lo saque de un apunte de la facultad, el cual no tenia titulo ni autor por eso no lo mencione, ahora q veo tambien hay varios articulos en internet muy parecidos (por no decir iguales), hasta en ingles; en fin, si alguien sabe quien es el autos real del articulo... por lo pronto juro y perjuro q no fue un copypaste malintencionado, asi q no creo q merezca le etiqueta de Troll.
Por otro lado tu F sabes q conozco muy bien las consecuencias de un Fake en clab, y creo q he sido responsable en mi accionar desde entonces... Por:penHolder (logOut)
Muy buena PenH da igual el rótulo que le añadas a tu avatar. Te felicito por el tiempo empleado en redactar este Tuto.
Por cierto por que te han puesto Troll ??? Por:koballo
koballo :
Muy buena PenH da igual el rótulo que le añadas a tu avatar. Te felicito por el tiempo empleado en redactar este Tuto.
gracias 
por eso no lo mencione, ahora q veo tambien hay varios articulos en internet muy parecidos (por no decir iguales), hasta en ingles; en fin, si alguien sabe quien es el autos real del articulo... por lo pronto juro y perjuro q no fue un copypaste malintencionado, asi q no creo q merezca le etiqueta de Troll. 
