• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal
  • Saltar al pie de página

LoMejordeWP

Lo Mejor de WordPress - Plantillas, plugins y recursos para WordPress

  • Inicio
  • Blog
  • Secciones
    • WordPress
      • Colección de Temas
      • Colección de Plugins
    • Tiendas Online
    • Marketing Online
    • Diseño Web
  • Recursos
    • Mejores hosting
    • Contratar dominios
  • Contacto

Teoría del color y su aplicación en diseño web

19 enero, 2021 Diseño Web Palmira Ruiz 9 comentarios

Dicen que la primera impresión lo es todo. Cómo te ves y cómo te muestras determinará cómo te perciben los demás. Lo mismo es aplicable al diseño web de nuestro sitio. La impresión que generemos en nuestros usuarios dependerá de muchos factores, y uno de los más importantes es el color.


El color genera sensaciones y emociones, incluso recuerdos. Por tanto es importante conocer los fundamentos de la teoría del color y que si la conoces te ayudará a transmitir el mensaje que deseas en tu sitio web o bien generar nuevas ideas.

Averiguar qué colores funcionan bien con los demás no es sólo una cuestión de suerte. En realidad, existen muchos estudios sobre los efectos que provocan los colores en las personas.

En la teoría del color existen diversas combinaciones de colores que se agrupan por catogías y que van muy bien para lograr un objetivo concreto en el diseño web de tu página.

Empecemos con los fundamentos básicos de la teoría del color y luego pasaremos a las combinaciones más avanzadas.

Publi Global

Los mejores temas WordPress

La rueda de colores y combinaciones

Colores primarios

Teoría de los colores - Los colores primarios

Los colores primarios son aquellos que no se pueden obtener de la mezcla de ningún otro. Son los colores básicos que mezclados darán lugar al resto de colores de la gama cromática. Estos son el rojo, amarillo y azul. Sin embargo, si estamos hablando de colores de pantalla, tanto en dispositivos móviles como en monitores de sobremesa, los colores primarios son el rojo, verde y azul (RGB).

Colores secundarios

Teoría de los colores - Los colores secundarios

Si mezclamos a partes iguales los colores primarios, es decir, el rojo con el amarillo, el amarillo con el azul, y el azul con el rojo, se crean los colores secundarios, que son el naranja, verde y magenta. La combinación de estos colores en diseño web generan una gran variedad de contrastes.

Colores terciarios

Teoría de los colores - Los colores terciarios

Los colores terciarios se consiguen si mezclamos a partes iguales un color primario junto con uno secundario, es decir, rojo con magenta, azul con verde, amarillo con verde, rojo con naranja y amarillo con naranja.

Asi que, ahora que ya conoces cómo se crean los colores, podrás entender mejor cómo trabajan las combinaciones de colores en el modelo de rueda de colores.

Entender los principios de la combinación de colores te ayudará a elegir las combinaciones de colores que funcionan bien juntas, generar las emociones adecuadas, y crear una adecuada cantidad de contrastes en tu diseño web.

A continuación te mostramos las combinaciones de colores básicos derivados de la rueda de color.

Colores complementarios

Teoría de los colores - Los colores complementarios

Teoría de los colores - Los colores complementarios

Los colores complementarios son colores que están situados uno frente al otro en la rueda de color. Ejemplos de ello serían el el rojo y el verde, azul y el naranja, el amarillo y el púrpura, etc. Las combinaciones de colores complementarios crean un gran contraste entre sí al usarlos a la vez.

Colores análogos

Teoría de los colores - Los colores análogos

Teoría de los colores - Los colores análogos

Los colores análogos son colores que están uno justo al lado del otro en la rueda de color. Es buena idea elegir un conjunto de colores análogos para crear una sensación de variedad en el diseño de tu página web. Ejemplos de estos serían el azul con el verde, el azul con el azul-violeta o amarillo-verde, el amarillo con el amarillo-naranja.

Tríadas de colores

Teoría de los colores - Triadas

Teoría de los colores - Triadas

Una tríada de colores es un conjunto de tres colores que están dispuestos uniformemente alrededor de la rueda de color. Una tríada contiene una buena variedad de colores bien equilibrados. En el ejemplo de arriba, el cian, el naranja y el morado crean un bonito contraste balanceado entre ellos.

Complementarios divididos

Teoría de los colores - Complementarios divididos

Los complementarios divididos parten de toman un color y – en lugar de elegir el color complementario que le corresponde en la rueda de color – tomamos los dos situados en posiciones inmediatamente adyacentes. En el ejemplo anterior, si elegimos el amarillo, el color opuesto en la rueda de color es el morado, pero en vez elegir este, cogemos el azul-morado y rojo-morado, que crearán un gran contraste con el amarillo y entre ellos serán colores muy cooperativos.

Cuadrado de colores

Teoría de los colores - Cuadrado de colores

El modelo de cuadrado de color tiene cuatro colores uniformemente espaciados alrededor de la rueda de color. En el ejemplo anterior, los colores son azul, naranja, rojo-violeta, y amarillo-verde. Estos esquemas de color son muy bonitos y funcionan bien con un color fuerte y versiones más aclaradas de los otros tres colores.

Tetrádica (Doble Complementario)

Teoría de los colores - Tetrádica (Doble Complementario)

Los esquemas de color en tetrádica se construyen mediante la creación de un rectángulo en la rueda de color. Selecciona dos opuestos en la rueda de color y a continuación seleccionamos otro color desplazándonos dos espacios en la rueda y más su color complementario.

Aclarados y oscurecidos

Teoría de los colores - Aclarados y oscurecidos

El aclarado un color es cuando tomas un color, como el azul en el ejemplo anterior, y agregas blanco al mismo. Un oscurecido es un color al que se le ha añadido negro. Puedes crear un gran esquema de colores monocromáticos con aclarados y oscurecidos del mismo tono de color.

Colores cálidos

Teoría de los colores - Los colores cálidos

Los colores cálidos crean una sensación de calidez y calor en una imagen o un diseño. Cuando vemos colores cálidos, pensamos en el sol, el calor, el fuego y el amor (la pasión). El rojo es el color de la sangre, que es caliente, y naranja y amarillo están más relacionados con el verano. La adición de un filtro anaranjado a una fotografía hace que se vea más cálida y más alegre.

Colores fríos

Teoría de los colores - Los colores fríos

Los colores fríos llevan connotaciones de climas fríos, invierno, la muerte, la tristeza, el hielo, la noche y el agua. Los colores fríos se pueden asociar con la calma, la tranquilidad, la confianza, la limpieza. El morado está asociada con la realeza, ya que socialmente se supone que está reservado a ellos.


Los colores en el diseño web

Rojo

El rojo es el color del amor y la pasión. Las cajas de bombones son de color rojo en el día de San Valentín. Algunas son de color rosa, que es un aclarado del color rojo. El rojo es también el color de la ira y de la sangre. Los colores rojo, naranja y amarillo se encuentran todos ellos en el fuego. Rojo también puede significar peligro. Las señales de detención son de color rojo, y reciben toda nuestra atención pues nos dicen que debemos tener cuidado y mirar antes de continuar. El rojo es dominante, y cuando se combina con colores como el negro, puede crear un look muy masculino. Botones y enlaces en rojo pueden ayudarte a generar un mensaje de seriedad en el diseño de un sitio web. Aunque su uso excesivo puede resultar agresivo.

Diseño Web con rojo

Naranja

El naranja representa el calor, pero no es tan agresivo como el rojo. El naranja puede retratar un ambiente divertido porque es enérgico y crea una sensación de calor sin connotaciones de peligro y de sangre, como ocurre con el color rojo. El naranja puede estar asociada con la salud, como por ejemplo la vitamina C, que se encuentra comúnmente en las naranjas.

Diseño Web con naranja

Amarillo

El amarillo se asocia con el sol y el calor. Cuando se utiliza junto con el naranja, se crea una sensación de diversión relacionada con el verano. El amarillo puede estar asociado con la sed, y se puede encontrar en las paredes de muchas tiendas de refrescos. El amarillo también puede estar asociado con la cobardía y el miedo, que proviene de la antigua expresión de alguien está “pálido y amarillo”. Cuando se combina con el negro, se puede generar gran cantidad de atención. Un buen ejemplo sería el diseño exterior de un taxi.

Diseño Web con amarillo

Verde

El verde es el color del dinero, por lo que en nuestra cultura se asocia con la riqueza. Como la mayoría de las plantas son de color verde, también se asocia con el crecimiento y la salud. Se utiliza para mostrar que los productos son naturales y saludables. También puede tener una connotación de pérdidas y ganancias. Combinado con azules, el verde perpetúa la salud, la limpieza, la vida y la naturaleza.

Diseño Web con verde

Azul

Dependiendo del aclarado y oscurecimiento del azul, puede representar diferentes sentimientos, pensamientos y emociones. En las imágenes, azules con tonos oscuros pueden dar una sensación de tristeza. El azul claro es el color del cielo y del agua, que puede ser refrescante, libre y tranquilo. Los cielos azules generan calma y tranquilidad. El agua elimina la suciedad y limpia las heridas. El azul puede representar frescura y renovación, como cuando la lluvia lava la suciedad y el polvo. La tranquilidad del azul favorece la relajación.

Diseño Web con azul

Morado

Asociado por el color de las vestimentas reales, el morado se relaciona con la realeza. Los morados con más rojo pueden estar asociados con romances, intimidad, suavidad y confort. El morado puede generar sensación de misterio y de lujo.

Diseño Web con azul

Blanco

Es el color universal utilizado en artes gráficas. Está dentro de la gama de los grises y representa la paz, la pureza, la felicidad, etc. Su principal fortaleza es que potencia los colores que lo acompañan. El blanco puede también estar asociado con higiene y esterilidad, debido a que los médicos visten de blanco y la mayoría de los hospitales utilizan el blanco en sus ropas y camas. La mayoría de las representaciones artísticas de figuras religiosas son muy claras y blancas, representando la “bondad” y la santidad. También el blanco puede representar limpieza, como en el caso de la ropa limpia. Y puede representar suavidad por su analogíca con el algodón y las nubes.

Diseño Web con blanco

Negro

El negro se encuentra en el extremo opuesto de la tonalidad de grises. Simboliza el silencio, y el misterio. Es un color que sirve para otorgar elegancia y distinción. También se asocia con la muerte, especialmente en los paises occidentales. Mucha cantidad de negro en una imagen puede sugerir depresión y desesperación, así como soledad. Sin embargo, a pesar de todas las connotaciones negativas, cuando se combina con otros colores, como el oro, puede representar lujo. Combinado con plata o gris, puede representar sofisticación, como por ejemplo el sitio web de relojes que te mostramos a continuación.

Diseño Web con negro


Conclusiones

Es esencial entender la influencia del color en el diseño de una página web. Hay que tener muy encuenta lo que nos transmiten los colores y poner mucha atención a la hora de seleccionarlos. Las opciones de color que elijas pueden generar diversas sensaciones y estados de ánimo entre tus visitantes. Una combinación adecuada puede llamar la atención del usuario y transmitir visualmente el mensaje correcto. Tener en cuenta la influencia emocional de los colores en tu sitio web, puede ser muy beneficioso para ti, asi que si no lo estás teniendo en cuenta, deberías comenzar ahora mismo. Obtendrás mejores resultados con tus usuarios, y tu mensaje se transmitirá con mayor claridad y fuerza. El color consigue tanta conexión con las personals como lo hacen las propias imágenes.

¿Cómo eliges tú los colores en el diseño de tus páginas web? ¿Tienes algún método para elegir los colores más adecuados para tu proyecto?

Espero que este artículo te ayude a elegir los colores adecuado para tu sitio web. Si te ha gustado, asegúrate no perderte ninguno de nuestros posts… ;)

Si te gusta, compártelo:

  • Haz clic para compartir en Twitter (Se abre en una ventana nueva)
  • Haz clic para compartir en Facebook (Se abre en una ventana nueva)
  • Haz clic para compartir en LinkedIn (Se abre en una ventana nueva)
  • Haz clic para compartir en Pinterest (Se abre en una ventana nueva)
  • Haz clic para compartir en WhatsApp (Se abre en una ventana nueva)

También te puede interesar

Diseño Web Diseño Gráfico Diseño páginas web

Autor: Palmira Ruiz

Apasionada de WordPress. Diseñadora gráfica, maquetadora, decoradora, interiorista y visual merchandiser desde 2001. Deseo ayudarte a conseguir el sitio web perfecto para tu empresa o proyecto personal. Que esté orientado a alcanzar tus objetivos y que proyecte tu imagen de marca adecuadamente.

Comentarios

  1. José Alejandro Herrera Valencia dice

    25 abril, 2015 a las 3:55

    Pues el artista interpreta esos colores como una forma de armonizar y enseñar una obra

    Responder
  2. andres dice

    20 mayo, 2015 a las 23:54

    esta muy bien

    Responder
  3. jorge andres mosquera dice

    29 mayo, 2015 a las 0:35

    mi opinión sobre esto es que cada página tiene color dependiendo de lo que se trate su contenido ;si vamos a crear una pagina de viajes su color debe ser reflejado a colores de la naturaleza en cambio que si es una pagina de fiestas el color debe de ser alegre y muy calidos

    Responder
  4. Juan Pablo Gallego 9D dice

    30 mayo, 2015 a las 5:09

    R1//Diferentes texturas y colores,una imagen no tan clara.
    R2//Naranja que representa el calor o ambiente divertido y el azul representa diferentes sentimientos, pensamientos y emociones. En las imágenes, azules con tonos oscuros pueden dar una sensación de tristeza
    R3// Que la obra sea mas clara y que se puedan diferenciar mejor las figuras y partes de la obra

    Responder
  5. Jerom dice

    5 marzo, 2016 a las 18:13

    Excelente post, muy completo e interesante. gracias

    Responder
    • LoMejordeWP dice

      13 marzo, 2016 a las 21:55

      Muchas gracias a tí por visitar nuestro blog.

  6. miguel angel paez dice

    25 mayo, 2016 a las 21:47

    la mejor pagina de los colores

    Responder
    • LoMejordeWP dice

      26 mayo, 2016 a las 13:24

      Muchas gracias Miguel, nos alegra que te haya gustado.

  7. CR Compumania dice

    23 noviembre, 2016 a las 18:22

    Excelente articulo, que bueno saber que nuestros diseñadores toman en cuenta una buena parte de estos factores al elegir el color perfecto para cada cliente y tipo de negocio.

    Responder

Política de comentarios:

Responsable: Palmira Ruiz Tauste | Finalidad: Gestión de comentarios | Legitimación: Tu consentimiento
Destinatario: Webempresa (el hosting de este blog, ubicado en España) | Podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos. Por favor lee nuestra política de privacidad antes de comentar.

Deja una respuesta Cancelar la respuesta

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

He leído y acepto la política de privacidad. *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Nota: Algunos enlaces de esta página son de afiliado. Esto es, si decides utilizarlos me aportará una pequeña comisión para mantenimiento del blog (sin coste adicional para ti). Este hecho no influye de ninguna manera en las recomendaciones hechas.

Te recomendamos

Divi - Mejor plantilla WordPress moderna y elegante

Themeforest - Las mejores plantillas para WordPress

Siteground - Mejor Hosting WordPress y Web

Inicio · Blog · Recursos · Contacto
  • Facebook
  • Pinterest
  • Twitter

Copyright © - LoMejordeWP.com · Web diseñada con Genesis Framework y hospedada en Webempresa

Aviso legal, política de privacidad y de afiliación · Política de Cookies · Exclusión de responsabilidad de afiliados

Esta página utiliza cookies y otras tecnologías para que podamos mejorar su experiencia de navegación   Acepto Más info
Política de Cookies

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
GUARDAR Y ACEPTAR