combinar colores web

Como combinar y elegir los mejores colores para tu página web

Como combinar y elegir los mejores colores para tu página web
Valora este contenido

En el diseño de una página web hay que tener muy en cuenta los colores que vamos a utilizar. No se trata de una decisión que debemos tomar a la ligera ya que el resultado de la página se verá afectado. En la  decisión de comprar o no un producto, leer o no un artículo juega un papel decisivo la imagen que se nos transmite, independientemente de su calidad.

En este post voy a hablarte de como combinar los colores web, la psicología de los colores, herramientas de selección de colores y algunos tips que me han ayudado en este proceso.

Tipos de Colores

Los colores en un página web se rigen por el sistema de colores hexadecimal, o código HTLM: Se trata de los 8 dígitos que aparecen a continuación del #.

¿De donde viene este código? Del sistema de  Color RGB o Intensidad de los colores primarios de la luz. R (Rojo), G (Green oVerde) y B(Blue o Azul)

Los dos primeros dígitos representan la intensidad del color rojo, los dos siguientes la del verde y los dos últimos del azul. El significado se traduce en la combinación de los 3 colores primarios para conseguir un tono determinado.

Por ejemplo, el color amarillo de mi página web tiene el código #F5E08C que se traduce en RGB en 96% de rojo, 88% de verde y 55% de Azul.

Tipos de colores

Dependiendo del color cromático:

Colores fríos (verdes y azules) o colores cálidos (amarillos, rojos).

Dependiendo de la combinación de los colores:

Colores Primarios:

Son los que no se pueden obtener mediante la mezcla de ningún otro.

Colores Secundarios:

Se obtienen mezclando 2 colores primarios en igual proporción.

Colores Intermedios:

La combinación de un color primario y un secundario.

Posición en la rueda cromática:

Vamos a tomar como ejemplo el color rosa de mi página web con código: #e9aea8

colores analogos

Colores Análogos:

Tipos de colores dentro de la misma gama cromática, es decir,  los que están más próximos en el círculo cromático.

Colores monocromáticos:

Son las diferentes tonalidades de un color que se toma como base. Tonalidades más claras o más oscuras del mismo. Es útil para probar qué tono se ajusta mejor al resultado que queremos obtener.

Colores complementarios:

Se trata del color de máximo contraste, combinación de colores totalmente opuestos unos con otros.  Ayuda al contraste, se pueden utilizar para llamar la atención al usuario.

Colores Triada:

Si representamos 3 colores dentro de la rueda cromática formarían un triángulo entre si.

 

Psicología de los colores

Los colores transmiten sensaciones (tranquilidad, seguridad, confianza) por lo que desde el punto de vista del marketing hay que elegir el que más se adapte a los valores y el mensaje que queremos transmitir y a nuestra imagen de marca. Te muestro un ejemplo de los más utilizados.

Azul:

Se trata de un color que transmite seguridad, honradez, armonía y confianza. Es por ello, que la mayoría de las empresas lo utilizan.

Sectores: Inmobiliarias, Hoteles, Compañías de Seguros, redes Sociales, productos de alta tecnología o relacionados con la limpieza.

Verde: 

El color verde representa Naturaleza, Frescura, Ética  y  Crecimiento.

Sectores: Salud, ONG, Productos médicos, Turismo rural, viajes, actividades al aire libre, productos ecológicos y productos financieros (tono más oscuro).

Amarillo:

Desde el punto de vista de la teoría de los colores, el amarillo está asociado al  Optimismo, Energía, Positividad, Diversión. Se trata de un color muy llamativo y se recomienda no utilizar en exceso.

Sectores: Productos de niños y el Ocio.

Rojo:

El color rojo transmite Energía, Fuerza, Coraje, Valentía. Es utilizado para llamar la atención y está asociado a advertencias o peligros.

Sectores:Alimentos y bebidas, motor, actividades de riesgo, juegos o deportes.

Naranja:

Combinación del amarillo y el rojo:Refleja el Entusiasmo, estimula la Creatividad, Éxito o Cambio. Al igual que es rojo busca llamar la atención

Marcas: Promocionar productos alimenticios y juguetes.

Negro:

El negro es asociado a la Elegancia, Sofisticación, Poder o Misterio.

Sectores: Productos de lujo o alta calidad, museos o galerías.

Listado de colores y las emociones:

Psicologia de los colore

 

Herramientas selección de colores

A continuación te explico las herramientas de selección de colores que he utilizado y me han resultado útiles para combinar los colores de la web.

 

Color Hexa

Esta  herramienta proporciona mucha información del color que queramos seleccionar y nos da muchas pistas de como combinarlo correctamente, otras alternativas posibles, variaciones de tono, sombras etc. Es muy muy útil cuando no tenemos conocimientos de diseño y queremos conseguir buenos resultados.

color hexa

 

Coolors CO

Se trata de una generador de colores. Es una herramienta de selección de colores muy recomendada cuando no tienes un color predefinido y buscas inspirarte.

Tienes dos opciones:

Generar: Se genera automáticamente una paleta de colores y nos podemos mover de una a otra con la barra espaciadora.

En el caso de explorar tenemos varias paletas de colores en un misma página y podemos seleccionar la que más nos guste.

Elementos:

1.El candado: Sirve para bloquear un color, que se quede fijo uy seguir escogiendo nuevas tonalidades.

2.Ajustar: Podemos cambiar el color en tono, saturación, porcentaje de colores RGB etc.

3.Tonos alternativos: Podemos seleccionar colores dentro de la misma cromática (más claros o más oscuros)

4. Arrastrar: Podemos mover el color a otra columna.

Posteriormente podemos guardar o exportar la paleta escogida.

Coolors CO

 

Adobe Color CC

La diferencia de Adobe color CC con respecto a las dos anteriores es que no presenta los colores que seleccionamos de forma muy visual en la rueda cromática.

Una vez fijado un color podemos filtrar por tipo de colores (Análogos, complementarios, Triada, compuestos), modificar el tono o personalizarlo. También es posible seleccionar los colores pinchando con el ratón sobre la propia rueda cromática.

Adobe color CC

 

Como combinar colores en tu Web

Es recomendable no utilizar muchos colores en tu página, con dos o tres es suficiente para que el el resultado quede limpio. Al igual ocurre con el diseño del logo, recuerda que menos es más.

Agrupa los contenidos de cada página por filas (últimos post, servicios etc) alternando el color de fondo,  por ejemplo: del blanco al gris. Es una manera muy visual de separar los mensajes que quieres transmitir.

Escoge el color de máximo contraste en los botones, enlaces o en aquellos espacios en los que quieras llamar la atención o buscas que el usuario realice alguna acción (suscripción, compra, etc).

En el diseño del menú utiliza los colores para acompañar al usuario en su selección, es decir, indicarle como se va moviendo a través de las categorías y subcategorías, por ejemplo, cambiando el color del título al pasar el ratón por encima o incorporando una línea debajo de él. Es muy importante para la usabilidad de la web.

 

Recomendaciones

Combinar los colores de tu web no es algo sencillo si es la primera vez que te enfrentas a ello. A continuación te muestro algunos tips basados en mi propia experiencia que pueden ayudarte si te encuentras en la misma situación:

Inspírate:

Es la mejor manera de escoger ideas para aplicar en nuestro propio diseño, sobre todo cuando alcanzamos ese nivel de bloqueo que no nos permite avanzar:

Con Pinterest podemos buscar paletas de colores de diferentes fotografías o diseños.

Teoria de los colores

La extensión de Chrome Web developer nos muestra la paleta de colores utilizada en cualquier web. La ruta sería: Information – View color information.

Comprueba cómo se ve la imagen en los distintos dispositivos ya que el color puede variar de uno a otro y transmitir distintas sensaciones. Esto puede llevarte a tener que modificar el tono que hayas utilizado.

Combinar los colores de la web es una decisión importante que definirá tu proyecto por lo que no te preocupes por el tiempo que tardes: Consulta cuántas webs sean necesarias, qué colores utiliza y como los distribuye dentro de la página web.

Realiza consultas a tus amigos o familiares para conocer su opinión, valora distintas opciones y combinaciones etc. Es normal que nos equivoquemos, todo ello nos ayudará a adquirir experiencia para futuras ocasiones.

 

Conclusión

Combinar los colores de una web es un proceso complejo pero afortunadamente tenemos a nuestra disposición numerosas herramientas que nos ayudan a ello. ¿Conoces algunas para añadir en este post? ¿Cuál te gusta más?. Muchas gracias por dedicar tu tiempo a leer mi post y espero haberte ayudado.

Sin comentarios

Deja un comentario

He leído y acepto la Política de Privacidad *

RESPONSABLE: Verónica Dabaña Grueso FINALIDAD PRINCIPAL: Gestión de los comentarios de las publicaciones LEGITIMACIÓN: Consentimiento del interesado.DESTINATARIOS: No se cederán datos a terceros, salvo autorización expresa u obligación legal DERECHOS: Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, transparencia y derecho a no ser objeto de decisiones automatizadas.INFORMACIÓN ADICIONAL: Puede consultar la información adicional y detallada sobre nuestra Política de Privacidad y Aviso Legal

Share This

Este sitio utiliza cookies para mejorar tu experiencia como usuario. Si continuas navegando aceptas nuestra política de privacidad Leer más

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar