TRABAJAR Y COMBINAR COLORES
INTRODUCCIÓN  <ul><li>Una de las primeras cosas que debemos considerar para el diseño web es la correcta  elección  de una...
Paleta de colores.  http://www.colorjack.com
ColorJack <ul><li>En la portada de ColorJack encontraremos una cuadrícula con un montón de colores. Simplemente situando e...
Otros sitios web importantes <ul><li>Color Palette Generator   </li></ul><ul><li>http://www.degraeve.com/color-palette/  U...
<ul><li>Daily Colors Scheme </li></ul><ul><li>http://beta.dailycolorscheme.com  Ofrece una paleta de colores al día y dive...
<ul><li>Adobe también nos ofrece herramientas para lo referente al trabajo con combinaciones de colores como es el kuler, ...
<ul><li>Estructura básica de una composición </li></ul><ul><li>Color Primario:  es el tono básico de la página, el que la ...
<ul><li>Circulo Estándar del Color </li></ul>
<ul><li>Según su posición relativa en el Círculo Estándar de Color, los colores pueden ser: </li></ul><ul><ul><li>Colores ...
Contraste entre los colores <ul><li>El contraste será mayor cuanto mayores sean las diferencias entre ambos en términos de...
<ul><li>Si en nuestras páginas utilizamos por ejemplo un marco del área de trabajo gris y queremos utilizar un verde para ...
Teoría del color <ul><li>Teoría del color </li></ul><ul><li>La Teoría del color  define muchos tipos de contraste y, aunqu...
<ul><li>Contraste de Luminancia (o de Valor): </li></ul><ul><li>Contraste de Saturación:   </li></ul><ul><li>Contraste Sim...
Ejemplos:
Bibliografía consultada  <ul><li>http://www.desarrolloweb.com/combinar_trabajar_con_colores </li></ul><ul><li>http://www.c...
Próxima SlideShare
Cargando en…5
×

DiseñO Web Y Multimedia.Pps

1.758 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
2 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.758
En SlideShare
0
De insertados
0
Número de insertados
18
Acciones
Compartido
0
Descargas
52
Comentarios
0
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.

DiseñO Web Y Multimedia.Pps

  1. 1. TRABAJAR Y COMBINAR COLORES
  2. 2. INTRODUCCIÓN <ul><li>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. </li></ul><ul><li>Existen algunas direcciones de sitios web interesantes que contienen herramientas que nos pueden ayudar a crear nuestra paleta de colores. </li></ul>
  3. 3. Paleta de colores. http://www.colorjack.com
  4. 4. ColorJack <ul><li>En 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. </li></ul>
  5. 5. Otros sitios web importantes <ul><li>Color Palette Generator </li></ul><ul><li>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. </li></ul><ul><li>Color Hunter </li></ul><ul><li>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. </li></ul>
  6. 6. <ul><li>Daily Colors Scheme </li></ul><ul><li>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! </li></ul>
  7. 7. <ul><li>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. </li></ul><ul><li>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. </li></ul><ul><li>Dos puntos a tener en cuenta para la combinación del color </li></ul><ul><li>Siempre es mejor pocos colores antes que muchos. Como mínimo, el riesgo de estridencias es menor. </li></ul><ul><li>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. </li></ul>
  8. 8. <ul><li>Estructura básica de una composición </li></ul><ul><li>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 &quot;background&quot; de la página. </li></ul><ul><li>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. </li></ul><ul><li>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. </li></ul>
  9. 9. <ul><li>Circulo Estándar del Color </li></ul>
  10. 10. <ul><li>Según su posición relativa en el Círculo Estándar de Color, los colores pueden ser: </li></ul><ul><ul><li>Colores Análogos: </li></ul></ul><ul><ul><li>Colores Complementarios: </li></ul></ul><ul><ul><li>Colores Monocromáticos: </li></ul></ul><ul><ul><li>Colores Complementarios Adyacentes: </li></ul></ul><ul><ul><li>Tríada de Colores: </li></ul></ul><ul><ul><li>Esquema Cromático Monótono: </li></ul></ul><ul><ul><li>Esquema Acromático Monótono: </li></ul></ul>
  11. 11. Contraste entre los colores <ul><li>El contraste será mayor cuanto mayores sean las diferencias entre ambos en términos de: </li></ul><ul><ul><li>Tono </li></ul></ul><ul><ul><li>Luminancia </li></ul></ul><ul><ul><li>Cromancia </li></ul></ul><ul><li>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. </li></ul>
  12. 12. <ul><li>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: </li></ul><ul><li>en contraposición con esta </li></ul><ul><li>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. </li></ul>
  13. 13. Teoría del color <ul><li>Teoría del color </li></ul><ul><li>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. </li></ul><ul><ul><li>Contraste de Tono: </li></ul></ul>
  14. 14. <ul><li>Contraste de Luminancia (o de Valor): </li></ul><ul><li>Contraste de Saturación: </li></ul><ul><li>Contraste Simultáneo: </li></ul>
  15. 15. Ejemplos:
  16. 16. Bibliografía consultada <ul><li>http://www.desarrolloweb.com/combinar_trabajar_con_colores </li></ul><ul><li>http://www.cristalab.com/tips/guia-basica-para-la-combinacion-de-colores-c53345l/ </li></ul><ul><li>http://alexsancho.name/archives/2008/06/combinando-colores/ </li></ul>

×