16
TRABAJAR Y COMBINAR COLORES

DiseñO Web Y Multimedia.Pps

Embed Size (px)

Citation preview

Page 1: DiseñO Web Y Multimedia.Pps

TRABAJAR Y COMBINAR COLORES

Page 2: DiseñO Web Y Multimedia.Pps

INTRODUCCIÓN Una de las primeras cosas que debemos considerar

para el diseño web es la correcta elección de una paleta de colores. Esto consiste en elegir un conjunto de colores, más o menos grande, que utilizar en los distintos elementos que formen parte de nuestro diseño. Combinar colores es algo sencillo, pero tenemos que ser cuidadosos para escoger un conjunto que haga que el aspecto de nuestra web sea lo más agradable posible.

Existen algunas direcciones de sitios web interesantes que contienen herramientas que nos pueden ayudar a crear nuestra paleta de colores.

Page 3: DiseñO Web Y Multimedia.Pps

Paleta de colores. http://www.colorjack.com

Page 4: DiseñO Web Y Multimedia.Pps

ColorJackEn la portada de ColorJack encontraremos una cuadrícula

con un montón de colores. Simplemente situando el ratón en uno de los cuadrados de color nos mostrará una serie de colores que combinan a partir de él. Pero tiene otra serie de herramientas interesantes que seguro que

disfrutaremos investigando un poco.

Page 5: DiseñO Web Y Multimedia.Pps

Otros sitios web importantes Color Palette Generator http://www.degraeve.com/color-palette/

Un sitio web que genera paletas de colores por nosotros, obteniendo los colores a partir de una foto que nosotros indiquemos. Basta con introducir una URL de la foto que debe procesar el sitio para que nos ofrezca una paleta de colores a partir de ella.

Color Hunter

http://www.colorhunter.com/

Esta interesante aplicación web también genera paletas de colores a partir de una foto, pero en este caso utiliza la base de datos de fotografías de Flickr para generalas. Podemos buscar fotos a partir de una etiqueta o texto, así como indicar un valor RGB de un color para nos muestre fotos que lo tienen, con sus respectivas paletas.

Page 6: DiseñO Web Y Multimedia.Pps

Daily Colors Scheme

http://beta.dailycolorscheme.com

Ofrece una paleta de colores al día y diversos comentarios y herramientas sobre dicha paleta. Este servicio web está en fase beta en el momento de escribir este artículo de desarrollo web .com, pero aun así se puede acceder para echar un vistazo previo a las paletas de colores que vienen publicando.

Eso es todo por ahora. Desde desarrolloweb.com esperamos que hayas encontrado la inspiración que buscabas para el manejo del color en tu sitio web!

Page 7: DiseñO Web Y Multimedia.Pps

Adobe también nos ofrece herramientas para lo referente al trabajo con combinaciones de colores como es el kuler, pero este utiliza una interface basada en flash.

Esta es quizás un poco mas avanzada y la mayoría de sus funcionalidades solo están disponibles para usuarios registrados (el proceso de registro no dura mas de 2 minutos). Aunque después de experimentar un par de horas con el creador de temas se pueden conseguir resultados muy satisfactorios.

Dos puntos a tener en cuenta para la combinación del color

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.

Page 8: DiseñO Web Y Multimedia.Pps

Estructura básica de una composiciónColor 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.

Page 9: DiseñO Web Y Multimedia.Pps

Circulo Estándar del Color

Page 10: DiseñO Web Y Multimedia.Pps

Según su posición relativa en el Círculo Estándar de Color, los colores pueden ser:Colores Análogos: Colores Complementarios: Colores Monocromáticos:Colores Complementarios Adyacentes: Tríada de Colores: Esquema Cromático Monótono:Esquema Acromático Monótono:

Page 11: DiseñO Web Y Multimedia.Pps

Contraste entre los coloresEl contraste será mayor cuanto mayores sean las

diferencias entre ambos en términos de:TonoLuminanciaCromancia

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.

Page 12: DiseñO Web Y Multimedia.Pps

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 contraposición con esta

En el segundo caso la gran luminosidad de ambos colores, y en especial la del verde, hace que el contraste sea demasiado grande y la combinación resulte agresiva.

Page 13: DiseñO Web Y Multimedia.Pps

Teoría del colorTeorí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:

Page 14: DiseñO Web Y Multimedia.Pps

Contraste de Luminancia (o de Valor):

Contraste de Saturación:

Contraste Simultáneo:

Page 15: DiseñO Web Y Multimedia.Pps

Ejemplos:

Page 16: DiseñO Web Y Multimedia.Pps

Bibliografía consultada http://www.desarrolloweb.com/

combinar_trabajar_con_coloreshttp://www.cristalab.com/tips/guia-basica-

para-la-combinacion-de-colores-c53345l/http://alexsancho.name/archives/2008/06/

combinando-colores/