NeoAttack » Gamas de colores: Usos, combinaciones y aplicación web

Gamas de colores: Usos, combinaciones y aplicación web

por | Jul 19, 2016 | DISEÑO, DISEÑO WEB | 0 Comentarios

Una gama de colores es la cantidad de distintos matices de colores que se pueden representar en un porción de espacio en concreto. Normalmente nos referimos a dispositivos, y cuanto más amplia sea mejor se verán respresentados los distintos tonos de color.

A la hora de diseñar una página web o elegir el conjunto de colores para tu identidad corporativa, la elección y combinación de colores es uno de los puntos más importantes. Las gamas de colores que elijamos influirá en la imagen de la página así como en la imagen de marca, y nos ayudará a que los clientes reconozcan y recuerden fácilmente la marca a la que dedicamos la página web.

La combinación de colores también hay que tenerlo en cuenta para que los lectores lean cómodamente los contenidos y no se les canse la vista.

Una gama o escala de color son los diferentes tonos de color que van desde el blanco al negro.Y existen dos sistemas de color el RGB, que lo forman el rojo, verde, el azul y sus mezclas. Y el sistema CMYK, que se compone del clan, magenta, amarillo y sus mezclas.

Para impresión el sistema más indicado es el CYMK y para páginas web los colores que se deben utilizar es el sistema RGB, porque los tonos son más brillantes.

Pasos a seguir para elegir los colores de tu página web

Para seleccionar la combinación de tonos de la página web os detallamos a continuación las preguntas que debemos contestar para tomar la mejor decisión:

¿A quién nos queremos dirigir? ¿Cuál es nuestro target?

Lo primero que nos tenemos que plantear es el público al que nos queremos dirigir y en consecuencia elegir la gama de color que más les vaya a atraer.

Tenemos que tener en cuenta que los colores transmiten sensaciones e ideas. Como nuestro objetivo es atraer un público determinado tenemos que saber qué colores son los más indicados para llamar su atención y que se sientan identificados.

Por ejemplo, si nos queremos dirigir a un público exclusivamente femenino, es recomendable utilizar colores cálidos o pasteles. Si por el contrario nuestro público es masculino es mejor elegir gamas de verdes o azules, que son colores fríos.
colores diseño web

 

«Imagen: Gamas de colores de Shutterstock»

¿Qué sensación queremos transmitir con la paleta de color?

Todos somos susceptibles a los efectos de los colores en nuestro animo, no nos sentimos igual en una habitación en las que han utilizado una gama de colores en rojo que es un color agresivo y excitante, que un lugar pintado con una gama de colores azules que transmiten serenidad y relajación.
De la misma manera tenemos que pensar en la sensación que queremos transmitir a las visitas da nuestra página web y que gama es la más indicada para nuestro producto.

A continuación os detallamos cuales son las sensaciones que transmiten los colores

Color Negro

  • El negro es un color que transmite elegancia y exclusividad.
  • Es una buena opción para productos de lujo, moda o cosmética.
  • No debe utilizarse para fondos, ya que dificulta la lectura de textos.
  • La combinación de colores con el negro no es fácil, una buena opción es utilizar blanco o tonos de gris .

Color Blanco

  • Transmite transparencia, pureza y elegancia. Pero puede resultar aburrido si no se combina con colores más llamativos.
  • Se suele utilizar con productos relacionados con la salud, la tecnología y la ciencia. Y combinado con plata, gris o negro es una buena opción para productos de lujo.
  • Es buena opción para utilizarlo de color de fondo para que los textos se lean cómodamente.

Color Naranja

  • Es un color que transmite la idea de cambio y modernidad. Además aporta calidez.
  • Puede ser útil para destacar las partes de la página web que nos interesen, pero tampoco debemos abusar porque es un color muy llamativo que puede saturar demasiado.
  • Combina bien con verdes y tonos tierra que lo contrarrestan.
  • Se suele utilizar para productos de entretenimiento y productos alimentarios.

banner de diseño web

Color Azul

  • Las gamas de color azul aunque sea un color frío no transmiten sensaciones negativas, si no al contrario, nos aporta calma, tranquilidad y serenidad.
  • El color azul permite muchas combinaciones con diferentes colores.
  • Un buen recurso es utilizar diferentes tonos de azul en una misma página web.
  • Otra posibilidad es mezclar las gamas de azules con las de verdes, dando unos colores verdes azulados que quedan muy bien en pantalla.
  • Normalmente no se utiliza con productos alimentarios, pero sí para productos relacionados con la salud, tecnología o para perfiles profesionales.

Color Rojo

  • Las gamas de rojo no son tan fáciles de combinar porque es un color muy fuerte y transmite sensaciones positivas como la pasión, pero también negativas como las agresividad.
  • Un solución es utilizarlo junto con el blanco o gris para contrarrestar su fuerza.
  • Puede ser muy útil para llamar la atención en los lugares que nos interesa que el lector fije su mirada.
  • El rojo suele utilizarse para productos relacionados con la moda, entretenimiento o deportes.

Color Amarillo

  • El amarillo es otro color que transmite sensaciones contrapuestas. Por un lado se considera que es el color de la alegría y el optimismo por otro lado representa la envidia.
  • Las mezclas de amarillo con naranja y con rojos son una buena forma de aplicarlos.
  • Como puede ser un poco cargante, se puede utilizar los tonos de más suaves de la gama de amarillos.
  • El amarillo se suele utilizar para llamadas de atención o para productos juveniles y relacionados con el entretenimiento.

Color Verde

  • La gama de colores verdes nos transporta a la naturaleza y nos transmite sostenibilidad, generosidad y esperanza.
  • Como ya hemos comentado, la mezcla con azules tiene buenos resultados.
  • También puede combinarse con tonalidades térreas para que de más sensación de calidez.
  • Es muy utilizado con productos o empresas relacionadas con el medio ambiente, la medicina o con turismo.
  • No es muy recomendable para productos destinados a jóvenes.

Color Gris

  • El gris es un color que transmite elegancia, sofisticación y formalidad.
  • Puede se una buena opción para el fondo, pero puede resultar un poco aburrido. Por eso es interesante combinar el gris con gamas de colores más llamativos.

Color Marrón

  • Las gamas de color térreas nos acercan a la naturaleza y aportan calidez.
  • En sus tonos más suaves combina con casi todos los colores más llamativos.

Colores Violeta y morado

  • En tonos oscuros transmite sofisticación y poder. Además, es un color relajante que es apropiado para productos de belleza y de lujo.
  • En tonos claros puede ser muy útil para productos femeninos
  • Es un color complicado de combinar, la mejor opción para utilizar con el morado son los colores claros o grises.

Herramientas colores web

«Imagen: Paleta colores web de Shutterstock»

¿Qué color elegimos? ¿Qué gama de colores es la idónea?

Una vez hayamos contestado a las anteriores preguntas es el momento de elegir la combinación de colores para la página para ello hay que tener en cuenta los siguientes puntos:

  • Es recomendable no utilizar más de tres colores, una paleta de colores muy amplia puede despistar a las visitas de la página web y dar sensación de desorden.
  • Una buena solución es utilizar dos colores para los elementos generales y un tercer color más llamativo como el rojo o el naranja para resaltar las partes que nos interesa que llamen más la atención.
  • También tenemos que tener muy en cuenta la armonía y el equilibrio de los colores para que el diseño sea efectivo y a la vez agradable.

Opciones para combinar colores y colores que combinan

Para combinar colores tenemos tres opciones:

  1. Elegir colores de la misma gama cromática, es decir, el mismo color en diferentes tonalidades.
  2. Escoger colores complementarios
  3. Combinar colores opuestos para crear contrastes.

Para no equivocarnos con la elección de nuestra paleta de colores tenemos que tener en cuenta las combinaciones de colores que nunca debemos hacer:

  • Azul y rojo:La combinación de estos dos colores dificulta la lectura.
  • Rojo sobre negro:En general si ponemos un fondo negro y las letras de color en un texto, la lectura será muy incomoda para las visitas de la web. Además si elegimos el color rojo sobre negro parecerá un texto siniestro o de una película de terror.
  • Amarillo y verde:son dos colores muy llamativos y su combinación resulta cargante, incluso algo estrenaste por lo que su lectura será muy incómoda.
  • Verde y rojo:son dos colores que chocan entre sí, su elección para la página web sería una mala decisión que ahuyentaría las visitas.

A la hora de elegir los colores debemos saber cual es el más indicado para cada una de las partes:

  • Para el fondo, necesitamos tonos claros como blanco, grises o beige para que los textos sean legibles.
  • Botones de llamada de atención,debemos utilizar colores llamativos como el rojo y el naranja. Así conseguiremos llamar la atención, pero en su justa medida para no saturar.
  • También, podemos utilizar los colores para guiar la mirada del lectora las zonas que nos interesen como cabeceras o la barra del menú.

¿Cómo aprovechamos los colores en nuestro beneficio?

Una buena combinación de colores nos puede ser de provecho a la hora de diseñar la página web, organizar cada una de sus partes y destacar las que nos interesen.

Por ejemplo, un contraste de podemos destacar un texto o una zona y que los visitantes de la página web fijen la mirada donde nos interese.

Pero siempre se debe hacer respetando la armonía y el equilibrio entre los colores, también hay que tener en cuenta que la mirada del lector se dirige siempre de izquierda a derecha y de abajo a arriba.

Los colores y los contrastes se deben utilizar en su justa medida para que la vista del lector no se canse y cierre la página antes de leer lo que queremos contarle.

color web

«Imagen: Herramientas para combinar tonos de Shutterstock»

Herramientas para elegir la paleta de colores de nuestra página web

Os sugerimos unas cuantas herramientas online para crear y guardar las paletas de color que creemos para diseñar la página web.

«Kuler» Herramienta de combinaciones

Es una herramienta de Adobe que nos da la oportunidad de crear y guardar combinaciones de colores. Además, tiene la ventaja que las paletas de color que hagamos en Kuler se pueden utilizar directamente en los demás programas de Adobe como Illustrator, InDesing y Photoshop.

«Colors lovers» herramienta para combinar

Colors lovers no es solo una herramienta para combinar colores, también es una comunidad en las que creando un perfil puedes compartir tus paletas con otros usuarios y ver que han creado los demás.

«Paletton» Color Scheme Designer

Es una herramienta sencilla, pero tiene una aplicación muy útil, permite ver los colores como los perciben los daltónicos.

«Color Hunter» herramienta combinar gamas de colores

Ofrece la posibilidad de subir imágenes a la aplicación para que nos dé los colores que forman la paleta de la fotografía. Gracias a esta herramienta online cualquier imagen nos puede servir de inspiración.

«Color Blender» Aplicación de elecciones de colores Pantone

Lo mejor de esta aplicación nos especifica el color Pantone de las combinaciones que elegimos, además ofrece la posibilidad de trabajar con las paletas que creemos en los programas de diseño de Adobe.

Aplicaciones para smartphone para crear paletas de color

Real Colors para Android

Permite la posibilidad de crear una paleta de color a través de una fotografía y luego editar los colores. Es muy útil tener una aplicación como esta en el móvil porque podemos guardar los colores que nos gusten estando en cualquier lugar haciendo una fotografía.

Color Scheme para IOS

En esta aplicación se puede utilizar la cuenta de Colors Lovers, para crear y guardar las combinaciones de color que nos interesen.

Y tú, ¿ya sabes qué combinaciones de colores y qué gamas de colores vas a utilizar en tu identidad corporativa y página web?

Teletrabajo y productividad. ¿Qué relación tiene?

En los últimos años, hay dos conceptos que la sociedad ha comenzado a mencionar y relacionar entre sí de manera habitual dentro del entorno laboral: teletrabajo y productividad. En NeoAttack, agencia especializada en marketing digital, ya aplicamos esta novedosa...

leer más

¿Quieres ser mejor que tu competencia?

Descubre cómo.

Estos posts también podrían interesarte

Teletrabajo y productividad. ¿Qué relación tiene?

En los últimos años, hay dos conceptos que la sociedad ha comenzado a mencionar y relacionar entre sí de manera habitual dentro del entorno laboral: teletrabajo y productividad. En NeoAttack, agencia especializada en marketing digital, ya aplicamos esta novedosa...

leer más

Publicidad en TikTok: la guía completa

Me gustaría empezar este post afirmando que, como buen millennial al límite de ser Gen Z: ¡me declaro adicto a TikTok! Y, como buen Paid Media, me declaro también adicto a la publicidad en TikTok y a su gran variedad de formatos publicitarios a los que da soporte. Hoy...

leer más

¿Cómo recuperar el posicionamiento en Google de tu web?

Google ha cambiado mucho desde sus inicios y ahora considera los sitios web que se esfuerzan en hacer un trabajo limpio de posicionamiento o SEO de calidad, teniendo en cuenta desde un Backlink natural hasta la experiencia de usuario en el sitio web. Para saber cómo...

leer más