Blog

16/10/2006

Cómo utilizar los colores en diseño web (I Parte)

coloresEste post lo venia preparando hace algún tiempo y es la «I Parte» de una de las clases que doy habitualmente en el instituto IPAD, «Como utilizar bien los colores en un diseño web«. Me han resultado interesantes muchos artículos que he visto y libros que he leído sobre teorías del color, como nos afectan o provocan, este minitutorial lo he enfocado sobre la gráfica en internet aunque es aplicable en todo lo que tenga relación con el diseño gráfico, espero les sea de utilidad.

Cuando comenzamos a diseñar una web, la primero que debemos tener en cuenta que colores utilizaremos en sus distintas partes, colores bases o para destacar algún detalle de nuestro trabajo, todo esto con el fin de lograr una identidad o personalidad de nuestra web y que este tenga armonía.

Debemos recordar los colores nos provocan diferentes sensaciones de las que normalmente no somos conscientes. De una u otra manera nos afecta pues vivimos rodeados de ellos y culturalmente se han ido identificando con muchas de las cosas que nos pasan, como por ejemplo el matrimonio o la viudez son representadas por colores que ya conocemos o en la infancia si eres niño o niña los colores de tu ropa, habitación y juguetes tienen una tonalidad marcada.

dejar comentarios

A continuación definiremos las propiedades de los colores básicos generalmente aceptadas junto al uso más adecuado y posibles combinaciones para utilizarlos en sitios web.

negro
Negro

El negro representa el poder, la elegancia, la formalidad, la muerte y el misterio.
En una página web puede dar imagen de elegancia y sofisticación y aumenta la sensación de profundidad y perspectiva. Sin embargo, no es muy recomendable utilizarlo como fondo ya que disminuye la legibilidad.
web ejemplo

blanco
Blanco

El blanco es luz, la bondad, la inocencia, la pureza y la virginidad. Se le considera el color de la perfección.
En publicidad, al blanco se le asocia con la frescura y la limpieza porque es el color de nieve. En la promoción de productos de alta tecnología, el blanco puede utilizarse para comunicar simplicidad.
web ejemplo

azul
Azul

El azul es el color del cielo y del mar, por lo que se suele asociar con la estabilidad y la profundidad.
Es muy adecuado para presentar productos relacionados con la limpieza, y todo aquello relacionado directamente con el cielo, el aire, el mar o agua.
web ejemplo

rojo
Rojo

El color rojo es el del fuego y el de la sangre, por lo que se le asocia al peligro, la guerra, la energía, la fortaleza, la determinación, así como a la pasión, al deseo y al amor. Como está muy relacionado con la energía, es muy adecuado para anunciar coches, motos, bebidas energéticas, juegos, deportes y actividades de riesgo.
web ejemplo

orange
Naranja

El naranja combina la energía del rojo con la felicidad del amarillo. Es acogedor, cálido, estimulante y una cualidad dinámica muy positiva y energética. El color naranja tiene una visibilidad muy alta, por lo que es muy útil para captar atención y subrayar los aspectos más destacables de una página web.
web ejemplo

verde
Verde

El verde es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad y frescura.
Por su asociación a la naturaleza es ideal para promocionar productos de jardinería, turismo, actividades al aire libre o productos ecológicos.
web ejemplo

purpura
Púrpura

El púrpura aporta la estabilidad del azul y la energía del rojo. En la antiguedad era considerado el color mas bello. Es un color bastante contradictorio. Sugiere abundancia, sofisticación, inteligencia, espiritualidad, religiosidad, dignidad. Pero también puede evocar frivolidad, artificialidad y pomposidad.
El púrpura brillante es un color ideal para diseños dirigidos a la mujer. También es muy adecuado para promocionar artículos dirigidos a los niños.
web ejemplo

rosado
Rosado

Utilizado universalmente para el romance y presencia femenina por que sugiere calma y tranquilidad. Muy útil para crear una atmósferas relajadas, reflejar diversión o para demostrar un lado creativo.
Connotaciones del color de rosado; pasión, romance, amor, inocencia, relajación y frescura.
web ejemplo

marron
Marrón

El marrón puede ofrecer una variedad de significados desde la asociación con naturaleza, parques, hogar, hasta la vejez. Tiene connotaciones de calidad, comodidad, conservador y natural.
En páginas web se utiliza para demostrar formalidad, honradez y experiencia.
web ejemplo

gris
Gris

El color gris es un excelente acompañante que ayuda a resaltar los demás colores.
Connotaciones del gris: con estilo, elegante, fresco, innovador, moderno, futurista, tecnología, espacioso, de moda, suave, neutral.
web ejemplo

arcoirirs
Arco Iris

El Arco Iris representa la diversidad y cultura. Muchos sitios lo utilizan para simbolizar amistad y alegría.
Connotaciones de un arco iris: diversidad, multicultural, fantástico, ligero, feliz, amistoso, alegre, fantasía, orgullo, energía y promesa.
web ejemplo

II Parte «Cómo utilizar los colores en diseño web»
ver enlace

Tutoriales
About Luis Alarcón
15 Comments
  1. Gracias!!! Muy útil e interesante, sobre todo para quienes estamos estudiando, esto de lo colores es complejo. Y podría porfavor agregar algo sobre como combinar colores, nos ayudaria muchísimo. Bye Bel.

  2. La idea es contribuir con la experiencia sobre todo en un concepto del diseño que es el uso del color, espero te sea de utilidad a todos los diseñadores o personas que desean aprender.
    La II Parte viene lo que tu pides: Como combinar colores.
    Saludos

  3. Hola, la paleta de color es muy importante en el mundo de la gráfica, trabajar en RGB o CMYK tiene su grado de cuidado. Como bien dices en tu post, el color puede representar algún lugar o momento en especial.
    En la Europa antigua, el negro, color de la tierra fecunda, era el color de la vida, y el blanco, color de los huesos, era el color de la muerte.

    Buen blog y buen trabajo, saludos desde Japón

  4. Los colores son muy importantes en la vida misma. Y aunque no venga al caso, me has hecho retroceder en el tiempo hacia la secundaria y recordar las clases de religión, ufff…. como por ejemplo, en la Iglesia Católica, los colores de las casullas que usan los sacerdotes en las misas varían de color durante el año litúrgico: El rojo se usa en semana santa, viernes santo, pentecostés (fiesta del Espíritu Santo), también tiene que ver con el derramamiento de la sangre de los mártires (en la misa de la patrona de mi colegio el sacerdote usaba ese color). El verde se usa en el tiempo ordinario, significa esperanza y vida. El blanco se usa en Pascua y Navidad, en las celebraciones de la Virgen María, de Jesús. El morado y sus variaciones se usa en Adviento (cuatro domingos antes de la Navidad para los perdidos en el tema), y también en Cuaresma… Sorry si algunos se perdieron con el tema, jejejeje, bueno, creo que Luis no se perdió tanto… o sí??? 😮

  5. Lo único que recuerdo de mi paso por una escuela católica son los colores del vaticano (Blanco y Amarillo)

  6. Pucha, en serio??? Creo que ya te está atacando el alemán, jajajajaja, sorry… Bueno pues, es que ya pasaron taaaaaaaaaantos años no? jajajaja

  7. Espero que te encuentres bien junto a los tuyos, te he tratado de enviar un mail con respecto a este mismo tema pero me rebota por que al parecer tu mail esta repleto.

  8. ps esto era una tarea solamente pero est chido saver que roio con los colores yheaaaa!!!!

    arriba los del icest

  9. los colores son rrre copados. migue

  10. […] I Parte “Cómo utilizar los colores en diseño web” […]

  11. su pagina es muy buena por que ayuda a los diseñadores a diserenir las dudas que tenemos respecto al uso de colores, sistemas entre muchas otras herramientas que utiliza el diseñador para lograr sus objetivos, por eso los felicito

  12. muy buenos tus apuntes, me parece todo correcto.

    Les dejo aca una muy buena herramienta que te entrega la paleta de colores y seleccionando un solo color podras ver cuales son los mejores para tu sitio web.

    http://www.colorjack.com/

    saludos 🙂

  13. […] La cita es: Viernes 26 de Octubre, Centro Cultural CAFAE Av. Arequipa 2985, San Isidro. Mi charla comienza a als 12 del día pero el evento se inicia a las 10 de la mañana. Los Espero. (si quieres saber más sobre este tema visita el siguiente enlace) […]

  14. Muy pero muy bueno, simple y útil

  15. Muy buenos consejos siempre seran muy util

Leave a Reply to Cómo utilizar los colores en diseño web (II Parte) at Luis Alarcón, Blog Cancel reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *