Claves y herramientas para no equivocarte con los colores de tu web

Hoy en día en el diseño web el color es uno de los elementos esenciales para atraer y mantener al usuario. Seguramente al navegar por la red te habrás encontrado con multitud de páginas que tienen una apariencia profesional pero que no te atraen para continuar en ellas. A veces el problema radica en que los colores no transmiten lo que deberían del negocio, y en otras ocasiones simplemente dificultan la propia navegación.

Esto sucede porque no todos somos profesionales del diseño gráfico y nos dejamos guiar en numerosas ocasiones por nuestros propios gustos o convicciones, y es que a la hora de diseñar una web o un blog nos debemos regir por los colores más funcionales y los que consigan facilitar al usuario su estancia en la web siempre marcando el camino por donde nosotros queramos que vayan.

A continuación explicaré unos consejos para aquellos que aún no siendo profesionales del diseño puedan elegir los colores de su web o blog y que así ayude al reconocimiento de su marca, personal o profesional, a conseguir clientes o ventas, o a lograr una mayor estancia en la web lo que repercuta en un mejor posicionamiento.

 

Índice de contenido

  1. La teoría del color
  2. La psicología del color
  3. Principales errores en el uso del color
  4. Top 5 de herramientas para combinar colores

 

 

LA TEORÍA DEL COLOR

Partimos de unas premisas básicas, la teoría del color son un conjunto de directrices en la mezcla de colores para conseguir el efecto deseado al combinarlos. Este teoría es la que nos va ayudar a mezclar los colores de la manera más adecuada, siempre teniendo en cuenta que estamos diseñando para web, y el ver los colores a través de una pantalla no es lo mismo que verlos en papel lo cual afecta a elegir unos u otros para la experiencia de usuario.

COLORES PRIMARIOS

Los colores primarios son el amarillo, azul y rojo. Son el origen del resto de colores y estos no nacen de ninguna otra combinación.

COLORES SECUNDARIOS

Son aquellos colores que se obtienen mezclando los colores primarios entre sí, son el violeta, el naranja y el verde.

COLORES TERCIARIOS

Si combinamos los colores secundarios en la misma proporción con los colores primarios obtendremos los colores terciarios.

CUALIDADES DEL COLOR

Otra noción básica que debemos conocer son las cualidades del color son el tono (el color específico), la saturación (grado de pureza) y el valor (luminosidad).

Una vez comprendido esto podemos encontrarnos dos grandes grupos de colores:

Por un lado los colores cálidos, la gama a la que pertenecen el rojo, el amarillo y todos sus derivados.

Y por otro lado los colores fríos, la gama cromática a la que pertenecen el color azul y sus derivados.

MODOS DE COLOR

El modo de color se podría definir como el contenedor donde se encuentra la información de cada píxel de una imagen. El modo de color determinará el modelo de color que se utilizará que será uno u otro en función de su fin, por ejemplo para material de imprenta siempre se utilizará CMYK (cyan, magenta, yellow, black) y para mostrar en nuestras pantallas el RGB (red, green, blue).

  • MODELO RGB La suma de los colores produce el color blanco, se denominan también colores aditivos. Se utiliza para la iluminación o las pantallas.
  • MODELO CMYK Al contrario que el modelo anterior se basa en la absorción de luz de la tinta impresa, se denomina por ello colores substractivos.

PSICOLOGÍA DEL COLOR

Somos de costumbres y eso no cambia con el significado del color, y no es sólo lo que entendemos por su significado cultural, que es muy importante en función de cual sea nuestro público objetivo, sino del uso que se le está dando a cada color en las interfaces en general.

Con todo esto quiero decir que si el usuario esta acostumbrado a que el rojo sea un color de advertencia o que sea utilizado para cancelar una acción nosotros no podemos elegirlo para todo lo contrario, esto creará incomodidad y conseguirá que los usuarios huyan de nuestra web o blog sin mirar atrás.

Aquí tenéis algunos consejos de los colores más utilizados en la web:

EL COLOR ROJO

Es un color emocional, está muy vinculado con la pasión y el amor, puede conseguirnos aumentar las pulsaciones pero no todo es positivo ya que se puede relacionar con la violencia o el peligro. Hay que usarlo con moderación y debemos intentar que no sea predominante en la pantalla ya que puede crear incomodidad al usuario.

EL COLOR AMARILLO

Es el color de la felicidad por excelencia, se debe tener cuidado de no utilizar tonos demasiado fuertes para atraer las visitas, de la misma manera que el rojo terminará siendo molesto si abusamos de él. Se ha convertido en el tono de las advertencias en las interfaces y el usuario lo reconoce fácilmente como tal.

EL COLOR AZUL

Aunque es un color que culturalmente se reconoce como masculino realmente según los estudios que se han realizado es el que más gusta a ambos sexos, se asocia con la calma y ofrece seguridad y confianza, por algo es uno de los colores más usados por las marcas más importantes del mundo. No debemos olvidarnos que pertenece a la gama fría y su abuso puede expresar falta de cercanía. Si queréis transmitir en alguna sección de tu web seguridad, como en el apartado de “pago seguro” para transacciones, es el tono ideal.

EL COLOR VERDE

Es el color que mejor procesan los ojos, de la misma manera que el azul, transmite calma o se utiliza para expresar nuevos comienzos. Es un tono que en las interfaces se emplea para la aprobación, no hay nada como un tic verde para hacerle saber al usuario que ha realizado correctamente una acción. Hay que tener cuidado a la hora de usar este color sobretodo por su significado cultural.

EL COLOR NEGRO

Es el color que culturalmente en occidente representa todo lo negativo. Dependiendo con los colores que se combinen puede expresar elegancia y modernidad, pero no es recomendable utilizarlo en exceso ya que puede resultar un color que cansa la vista para estar detrás de una pantalla, sobre todo si hay mucho texto. Un dato importante es que el color negro puro es totalmente artificial ya que no existe en la naturaleza y siempre se recomienda que se sustituya por un color similar como el gris oscuro para que nuestro cerebro no se ponga en tensión al percibir algo a lo que no está acostumbrado.

EL COLOR BLANCO

El blanco es el color de la pureza y la claridad, fuera de sus asociaciones culturales, es el mejor color para utilizar de fondo ya que da tranquilidad a nuestra vista y permite ordenar los elementos que tenemos delante correctamente. Si quieres que un usuario no se sienta agobiado al entrar en tu blog o página web este debe ser el color que predomine. A nivel de estrategia es perfecto para no distraer la mirada del usuario, ayudas a enfocar su atención gracias al uso del espacio en blanco alrededor de lo que se quiera destacar.

 

EL COLOR GRIS

Es un color que se asocia con la formalidad y la sofisticación y su punto fuerte es que es un color atemporal. Es utilizado en diseño web de manera estratégica igual que el negro para complementar a un color que se utilice para llamar la atención, establece cierta calma y equilibrio.
Una escala de grises en nuestra paleta es fundamental para mantener la atención al usuario donde queramos y si nos resulta aburridos siempre podremos combinarlos con las tonalidades de nuestra web.


 

PRINCIPALES ERRORES EN EL USO DEL COLOR

EL CONTRASTE

Tanto el alto contraste como el bajo contraste son igual de perjudiciales a la hora de diseñar nuestro entorno.
Debemos evitar algunas combinaciones de colores, sobre todo si se tratan de colores puros ya que el cerebro procesa de manera distinta cada uno de los tonos y resultan muy incómodos a la vista. Debemos procurar no crear contraste con colores directamente opuestos en la rueda de color y así evitaremos esas situaciones estresantes que a veces no logramos entender.

Es importante también que exista ese contraste para que la lectura de la página sea clara y fácil ya que si complicamos al usuario la navegación no dudará un segundo en marcharse de la web. Es un error más frecuente de lo que parece, sobre todo cuando intentamos superponer texto en imagen.

EL NÚMERO DE COLORES

Un entorno con muchos colores termina siendo confuso, la mirada no se dirige a ningún punto concreto y termina cansando rápidamente al usuario por la cantidad de información que recibe. Normalmente a mayor cantidad de colores mayor dificultad tiene el usuario para mantenerse en una web o blog. Es importante no tener más de cuatro o cinco colores y preferiblemente que estos tengan una jerarquía diferente en función del uso que se le de en el espacio.

COLORES NEÓN

Algo que parece evidente pero que muchos no lo ponen en práctica es el abuso de colores llamativos. Muchas marcas los utilizan para llamar la atención, pero no se dan cuenta, que al igual que el negro puro, no son colores cotidianos y molestan a nuestro cerebro. Lo ideal es utilizar colores más naturales y más cómodos para nuestros ojos.

 

MI TOP 5 DE HERRAMIENTAS PARA COMBINAR COLORES

#1 Material Palette, es mi favorito para elegir color en el diseño de interfaces. Este generador no crea únicamente paletas de color, sino que te aconseja sobre que colores primarios o secundarios utilizar. Es ideal para el entorno web ya que además nos indica que uso deberíamos dar a cada color elegido (texto, fondo, iconos)

#2 Data Color Picker, es otro de mis recursos favoritos, ya que con este generador podrás acceder rápidamente al código RGB, HSL o HEX de un color con un solo clic permitiéndote además exportar el esquema creado en diferentes formatos como en CSS o HTML.

#3 Coolors, el encanto que tiene esta herramienta online es el poder capturar los colores que tiene una imagen que nos llama mucho la atención. Es excelente para encontrar inspiración en fotografías o gráficos relacionados con el sector de la marca. Además genera paletas de colores totalmente al azar y se pueden bloquear ciertos tonos para poder personalizarlas al máximo.

#4 Colour Lovers, para mi es pura inspiración, existe una comunidad detrás que crea diferentes paletas y puede ser una herramienta perfecta para cuando no sabes cuales son los colores idóneos para tu web o blog.

#5 Adobe Color, la importancia que le doy a esta herramienta es el hecho de llevarla en mi propio iPhone, me permite con la cámara del dispositivo capturar en cualquier momento las tonalidades de un entorno y sus posibles combinaciones. También existe la versión escritorio convirtiéndose es uno de los generadores de paletas más completos que hay en la red.


 

CONCLUSIÓN FINAL

No nos dejemos llevar por modas ni gustos personales, pongámonos en la piel del usuario, centrémonos en el uso que le otorgamos a cada color y a su significado y por supuesto tengamos siempre como premisa que menos es más.

Leave a Reply