6 técnicas de combinación de colores para diseñadores web de WordPress

Hay una psicología detrás del uso del color. Muchos clientes quieren colores brillantes y llamativos, y eligen colores porque les gustan. Pero un color que les gusta podría no tener el efecto deseado. El color juega un papel importante en el éxito de UX. Los usuarios tienden a hacer clic y escanear las cosas que les atraen visualmente. Si se usa correctamente, el color es bonito. Y la gente en general mira lo bonito. Esta es la razón por la cual la combinación de colores es tan importante para los sitios web.

Como diseñadores web, debemos poder elegir las combinaciones de colores adecuadas para los sitios web. Esto incluye todos los elementos visuales de su diseño: colores de fuentes, botones, encabezados, fondos, títulos, enlaces, bordes, etc. El color incluso juega un papel en su marca.

En este artículo, veremos algunas técnicas de combinación de colores para ayudar con el diseño web.

Comprensión y uso de la teoría y la psicología del color

Imagen de aekikuis / shutterstock.com

La selección de colores es un arte que requiere mucho tiempo y mucha experiencia para dominar. También es subjetivo. Se reduce a su contexto. El tema y el estado de ánimo del sitio ayudarán a determinar los colores que funcionarán mejor para la audiencia. No hay una respuesta correcta para cada caso. Lo que funciona para una audiencia puede no funcionar para otra. Donde una audiencia prefiere los colores tenues, otra puede preferir el pastel.

El esquema de color dependerá de la sensación que buscas. Se esperan ciertos colores para ciertos temas. Por ejemplo, los cazadores y pescadores gravitan hacia los colores rústicos. El blanco es prominente para los sitios web sobre bodas. El esquema de color va con el tema. En estos casos, puede experimentar con diferentes colores para resaltar y acentuar mientras se mantiene fiel a la base de colores primarios.

Esto no significa que todos los sitios web sobre un tema específico deban tener el mismo color. Cada sitio web tiene objetivos específicos. Los colores deben elegirse para que coincidan con esos objetivos. Lo primero y más importante son las necesidades del proyecto. Los colores se asocian típicamente con los sentimientos. Pueden crear estados de ánimo. Los colores incorrectos pueden hacer que un lector corra para encontrar el próximo sitio web. Los colores correctos pueden atraerlos y mantenerlos allí. Es útil usar un poco de psicología del color.

Psicología del color

Aquí hay un vistazo rápido a la psicología del color como lo explica Vandelay Design :

  • Negro, blanco y gris: impacto. Éstos son grandes para los fondos. El negro sugiere poder. El blanco sugiere inocencia. Blanco y negro funcionan muy bien juntos. El gris es neutro y es una buena opción para la tradición y la tranquilidad. Si se usa incorrectamente puede perder energía. Los tres son geniales para mostrar seriedad.
  • Marrón: salubridad. Son tranquilos y elegantes. Esta es una gran opción para fondos texturizados para sitios que quieren mostrar tradición. Los bronceados muestran piedad. El marrón oscuro muestra confiabilidad. Brown es ideal para sitios que quieren mostrar confiabilidad y experiencia.
  • Azul – calmante. Esto es excelente para los sitios que desean mostrar confiabilidad y confiabilidad. Los tonos oscuros muestran experiencia y éxito. Los tonos claros son amigables.
  • Rojo: emocionante. Asociado con la pasión, el poder y la ira. Los colores cálidos pueden ser fuertes y reconfortantes, y son ideales para sitios que desean retratar las cualidades sólidas de una pared de ladrillos. Los colores brillantes son enérgicos y funcionan muy bien para los sitios web dirigidos a los jóvenes.
  • Rosa: feminidad juvenil. Es juguetón e inocente e ideal para audiencias femeninas.
  • Naranja: enérgico y acogedor. Es una buena opción para sitios que quieren representar movimiento y energía.
  • Amarillo – energizante. Se asocia con calidez y felicidad. Los tonos brillantes son geniales para los niños. Los tonos más oscuros sugieren antigüedad, que se asocia con la sabiduría y es una buena opción para retratar autoridad e inteligencia.
  • Verde: tranquilo y rejuvenecedor. Los tonos oscuros están asociados con el dinero y son buenos para los sitios que necesitan mostrar crecimiento y estabilidad. Los tonos más claros se asocian con la primavera y son excelentes para que los sitios representen la relajación, la honestidad y los estándares éticos.
  • Púrpura – noble. El morado oscuro implica riqueza y lujo. Los tonos claros son románticos.

Por supuesto, estos colores pueden tener un propósito o respuesta diferente en culturas fuera de los EE. UU. En última instancia, todo se reduce a su público objetivo.

Mirando ejemplos

Uno de los mejores lugares para obtener ideas es de otros sitios web exitosos. La combinación de colores es uno de esos temas que no tiene una respuesta exacta, pero hay opciones que se adaptan mejor a un propósito específico que otras. Muchos sitios web adoptan un enfoque diferente al de otros y pueden darle una mejor idea de lo que funciona y lo que no. Eche un vistazo a las combinaciones de colores de los sitios web populares para ver qué paletas de colores funcionan. También mire sitios específicos para su nicho. Trate de comprender el ángulo que utiliza el sitio para presentar información a la audiencia. Evalúe quién es su audiencia y observe cómo están utilizando la psicología del color para atraer a esa audiencia.

Otro lugar para obtener ideas es de las revistas. Prácticamente todos los temas tienen una revista. Mire cómo construyen los colores de su marca, sus páginas, encabezados, fondos, etc. Aunque es un medio muy diferente, el uso del color para esa audiencia aún se aplica.

Búsqueda de Google

Una de las mejores maneras de ver las combinaciones de colores es hacer una búsqueda en Google de «combinaciones de colores con» y luego incluir el color que le interesa. Esto le dará resultados que incluyen Pinterest, ColorCombos.com y Better Homes and Gardens. . También puedes hacer una búsqueda de imágenes y ver muchos ejemplos de combos. Puede tomar los colores de las imágenes que le gusten con las herramientas de combinación de colores, como veremos más adelante.

Búsqueda de paleta

También puede buscar paletas de colores. A menudo, la paleta de colores le dará los valores hexadecimales o RBG. De lo contrario, puede usar una de las herramientas de cuentagotas de color para capturar los colores y recrear las paletas.

Experimentando con colores

Imagen de Wikimedia Commons

Comience con menos colores y agregue según se sienta cómodo. Es mejor tener dos colores que sepas que funcionan juntos antes de agregar un tercero. Usa un color como el dominante y usa los otros para resaltar. Elija un color y luego elija otro tono de ese color. Intente usar un tono para los fondos y otro para los reflejos.

Dado que las empresas a menudo tienen un color dominante en su marca, debe considerar ese color, pero no tenga miedo de experimentar y probar algo diferente. En última instancia, no debería chocar con los colores de la marca.

Aquí es donde una prueba A/B es útil. Puede entregar un color a la mitad de su audiencia y otro color a la otra mitad. A continuación, puede seguir las estadísticas y ver qué funciona y qué no. Las pruebas A/B se agregarán a Divi 2.7. Esta será una excelente herramienta para la experimentación.

Experimentando con el contraste

Imagen de -Albachiaraa- / shutterstock.com

El contraste permite que los colores se diferencien entre sí. Elige colores que tengan un contraste interesante. Si no hay suficiente contraste, será demasiado difícil leer el texto y puede hacer que los lectores experimenten fatiga visual. Si hay demasiado contraste, o el tipo de contraste incorrecto, los lectores lo rechazarán porque simplemente no se ve bien. Usado correctamente, el contraste puede dirigir la atención. El contraste debe usarse con botones, enlaces, íconos, etc. Es una buena herramienta para dirigir a los usuarios a su llamado a la acción.

Practicar técnicas de combinación de colores con herramientas

Hay muchas herramientas para ayudar a diseñar paletas de colores y combinar colores. Puede elegir un color y se le dan colores que contrastan y se mezclan. No es sorprendente que muchas de las herramientas gratuitas en línea estén hechas específicamente para Material Design de Google. También hay varias buenas aplicaciones de edición de imágenes. He incluido un vistazo a las aplicaciones más populares y algunas gratuitas que tienen algunas funciones profesionales.

Paletas de colores de diseño de materiales

Este es un conjunto completo de paletas de colores de Google que proporciona colores primarios con colores a juego para acentos para Android, Web e iOS.

Cada color proporciona un valor hexadecimal. También proporciona aplicaciones de muestra para que pueda ver cómo funcionan juntas. Incluye claro, oscuro y varios niveles de opacidad. Puede personalizar la paleta de colores para Android. También hay un archivo zip descargable que contiene muestras de color para Photoshop e Illustrator.

Paleta de materiales

Material Palette es un generador de color en línea diseñado para Material Design de Google. Es una herramienta de color para ayudarlo a elegir paletas de colores para sitios web.

Elija dos colores y obtendrá una paleta de colores que funciona con esos colores. Los identificará como:

  • primario oscuro
  • Primario
  • Luz primaria
  • Texto/iconos
  • Acento
  • texto principal
  • texto secundario
  • Divisor

Esto elimina las conjeturas al tratar de averiguar qué colores usar para qué. También puedes apagar uno de los colores si no quieres el contraste. Puedes descargar tu paleta y compartirla en las redes sociales.

Interfaz de usuario de materiales

Material UI es un conjunto de herramientas para Material Design, Flat design y redes sociales. Le brinda una lista de colores para cada uno y puede obtener fácilmente los valores hexadecimales o RGB. Aquí hay un vistazo rápido a cada uno.

Colores de diseño de materiales

Material Design Colors es una herramienta de MaterialUI que te permite elegir colores y luego verlos en acción. Seleccionar el color agrega el valor a su portapapeles. Una vez que haya seleccionado sus colores, haga clic en Palette Creator.

Le mostrará cómo se ve su paleta de colores en un dispositivo móvil. Puede cambiar cualquier color dentro de la paleta de colores para ver cómo se ven juntos. Muestra los colores primarios y de acento y proporciona los valores hexadecimales y RGB para que pueda usar los colores incluso si no está usando Material Design. Puedes compartir tu paleta de colores en las redes sociales si quieres.

Colores planos de interfaz de usuario

Esta herramienta de MaterialUI proporciona una lista de colores entre los que puede elegir para un diseño plano. Selecciona el color que le interesa y el valor hexadecimal o RGB se copia en su portapapeles. La presentación le permite ver cómo funcionan y contrastan entre sí.

Colores sociales

Social Colors de MaterialUI funciona de la misma manera que Flat UI Colors en el sentido de que selecciona el color que le interesa y copia el valor hexadecimal o RGB en su portapapeles. Los colores están etiquetados con los nombres de las redes sociales en las que se utilizan. El diseño le da una buena indicación de cómo funcionan los colores juntos.

ColorBlender

ColorBlender le permite crear paletas de colores usando controles deslizantes RGB. Puede seleccionar de sus paletas prefabricadas o ajustarlas de la forma que desee. Tiene un modo de coincidencia automática que ajustará los colores de acento para que coincidan con los ajustes que realice en el color primario. Puede cambiar los colores de forma independiente en modo directo. Una vez que esté satisfecho con sus colores, puede descargar la combinación para Photoshop, Illustrator o simplemente usar los valores HTML y RGB. También puede pedir que se lo envíen por correo electrónico. Si le gusta un color específico dentro de la mezcla, puede usar ese color como primario y el resto lo combinará. También sugerirá una combinación de Pantone. Puede guardar sus mezclas y volver a cargarlas más tarde.

paleta

Paletton proporciona una rueda de colores interesante que le permite elegir colores de varias maneras diferentes. Una vez que haya elegido su color primario, le mostrará colores de énfasis, con cada familia de colores que tiene colores primarios y secundarios. Cuando pasa el mouse sobre los colores, le da el valor hexadecimal.

Puede obtener una vista previa de las paletas de colores y ver sitios web de ejemplo con sus opciones de color. Puede elegir claro, oscuro, positivo y negativo. También mostrará animación e ilustraciones. Cada elección tiene múltiples opciones dentro de ellos. Esta es una excelente herramienta para ver cómo se verán los colores dentro de los temas de WordPress sin tener que colocar los colores dentro de sus temas.

adobe color cc

Adobe Color CC es una rueda de color interactiva que ajustará los valores de acento a medida que ajusta el valor principal. También puede ajustar un valor de acento manteniendo el valor principal. Todos los demás valores se ajustarán automáticamente para coincidir. Puede elegir entre 7 reglas de coincidencia diferentes, incluido un modo personalizado que le permite controlar cada color de forma independiente. Le da valores RGB y hexadecimales para cada color. Puede guardar sus colores y volver a ellos más tarde.

Tiene una herramienta Explorar donde puede ver, comparar, editar y guardar paletas de colores prefabricadas.

Elegir color de la imagen

Elegir color de imagen y combinar colores PMS es una herramienta interesante. Puede cargar un logotipo y obtener el color Pantone. También le dará el color PMS más cercano para que pueda ver variaciones en el color Pantone. Además, puede elegir un color de la rueda de colores y obtener el color PMS más cercano a él. Cargar la imagen del logotipo es una forma útil de obtener los valores de color si no tiene Photoshop o Illustrator. Hay algunas alternativas a las ofertas de Adobe que tienen una buena función de cuentagotas.

Paint.NET

Paint.NET es una aplicación de edición de imágenes gratuita para PC con algunas características de alta gama. Si encuentra un color que desea pero no tiene los valores RGB o hexadecimales, simplemente pegue la imagen en Paint.NET, seleccione el selector de color y haga clic en el color que desee. Ese color se convertirá en su color primario y le dará los valores RGB y hexadecimales. También puede elegir colores secundarios y luego guardar su paleta de colores para su uso posterior.

Cañutillo

Gimp es una aplicación gratuita para Windows, OSX, Linux y más, con características de alta gama que incluyen una excelente herramienta para seleccionar colores y crear paletas. Pegue la imagen de la que desea obtener el color, elija el selector de color y seleccione su color. Puede usar esto para construir y reutilizar paletas de colores.

photoshop

Photoshop de Adobe es el estándar de oro en herramientas de diseño visual. Se ejecuta en Windows y Mac y tiene prácticamente todas las funciones de coincidencia y ajuste de color que pueda imaginar, incluidas tablas de índice personalizables, un cuentagotas para elegir colores de las imágenes y crear sus propias paletas, muestras, un panel de color y más. Puede obtener una vista previa del color muestreado sobre el primer plano. Puede elegir colores por RGB, hexadecimal, HSB, Lab y CMYK. El selector de color tiene una función segura para la web que le brinda 216 colores que funcionarán bien en cualquier sistema. Es la opción más cara, pero no me imagino necesitando hacer algo que no puede hacer. Photoshop es una herramienta profesional.

Bosquejo

Sketch es una herramienta de diseño para Mac con muchas características de diseño de alta gama. Es perfecto para crear vectores escalables y elementos de interfaz de usuario reutilizables. Tiene un selector de color incorporado con cuentagotas para que pueda probar cualquier foto para crear sus paletas. Tiene muchas extensiones de terceros disponibles, incluidas algunas que le permitirán guardar y reutilizar paletas de colores.

Tiene una extensión llamada Sketch Palettes que te permite guardar y cargar paletas en el selector de color.

Pensamientos finales

El uso del color es tanto arte como ciencia. El color puede ayudar a moldear el estado de ánimo de sus visitantes. Puede ayudar a despertar su interés, hacerlos sentir seguros, ver un sitio web como una autoridad, hacerlos sentir divertidos, hacer que regresen y mucho más. Combinar los colores correctamente puede mejorar la respuesta a la llamada a la acción y la tasa de participación. La elección correcta del color puede enganchar al visitante y mantenerlo en el sitio. Con algunas técnicas y herramientas de combinación de colores, puede utilizar la psicología del color a su favor. En última instancia, se necesita mucha práctica y experiencia, pero es una práctica en la que vale la pena invertir tiempo. Solo tienes una oportunidad de causar una excelente primera impresión.

¡Tu turno! ¿Tiene alguna técnica de combinación de colores para agregar? ¿Tienes una herramienta de color favorita? Háganos saber en los comentarios a continuación.

Miniatura del artículo a través de karawan / shutterstock.com