Cuando alguien visita por primera vez tu sitio web, el color juega un papel fundamental en lo que piensan de ella. Entre el 62 y el 90% de la impresión inicial de los consumidores se basa solo en la elección del color, según las investigaciones.
Elegir los colores que encajen con tu marca – y lo que quieres que tus consumidores piensen sobre tu compañía y productos – puede ser una poderosa herramienta de marca y marketing.
En este artículo, cubriremos más de 25 fantásticos combinaciones de colores de páginas web para páginas de aterrizaje, comercio electrónico y sitios personales, y cómo puedes elegir los tuyos propios sin perder tiempo.
Cómo elegir los colores para tu sitio web
Los ojos de un ser humano adulto pueden distinguir más de 1.000.000 de colores distintos. ¿Cómo elegir la combinación de colores correcta de forma rápida y eficiente con todas estas opciones? Ese es el desafío que enfrentan todos los diseñadores web que tratan de crear una combinación o paleta de colores para su diseño desde cero.
Con tantas opciones, no puedes evaluar todos los tonos y matices individualmente y elegir los más adecuados sin un punto de referencia. Necesitas reducir tus opciones. La mejor manera de empezar es encontrando un color primario como punto de partida.
Tal vez la mejor manera de hacerlo es mirar las opciones más populares de cada industria. Puede ayudarte a aprender algo sobre la psicología del color y qué colores primarios podrían funcionar mejor para tu compañía o producto.
Selección de colores por industria
Diferentes compañías y productos escogen diferentes colores para identificar su marca. ¿Pero por qué? El color no es solo una forma más eficiente de captar la atención de sus prospectos y consumidores. Es una forma de comunicarse con ellos a un nivel emocional, casi subconsciente.
En cierto sentido, es una forma de empezar a construir tu marca en la mente del consumidor antes de usar una sola palabra o frase de copia. Ningún color cuenta la misma historia al consumidor, así que los colores primarios más populares de la marca dependen de una industria a otra.
¿Qué sentimiento quieres que los clientes potenciales asocien con tu marca, producto o servicio?
Esa es la pregunta que debería ayudarte a identificar tu color primario para tu paleta.
El azul transmite:
En las industrias en las que la confianza del consumidor es más importante que cualquier otro factor, y el profesionalismo y la fiabilidad son puntos clave de venta, el azul se utiliza a menudo como color principal de marca.
No apela a la espontaneidad ni a la emoción. En su lugar, inicia un proceso de toma de decisiones calmado y lógico.
Más habitual en las siguientes industrias:
- Banca
- Aerolíneas
- Comunicaciones
- Financiación al consumo
- Las empresas de electricidad
- Equipo pesado
- Mejoras en el hogar
- Hoteles
- Farmacéuticas
El rojo transmite:
Las industrias que dependen de las emociones y las decisiones impulsivas (como los restaurantes y la comida rápida), a menudo usan el rojo como color primario. Se cree que el rojo estimula el hambre, por lo que es la opción favorita entre las marcas internacionales de alimentos.
Más habitual en las siguientes industrias:
- Restaurantes
- Bebidas
- Comercio minorista de alimentos
- Inmuebles
- Ropa
El verde transmite:
La mayoría de la gente asocia el color verde con la naturaleza, las plantas y los ambientes vibrantes y restauradores. Las industrias que confían en la promesa de un mejor bienestar o productos con ingredientes totalmente naturales, a menudo eligen el verde.
Más habitual en las siguientes industrias:
- Alimentos y bebidas
- Grandes almacenes
- Inmuebles
- Químicos
El Negro transmite: Confianza, Sofisticación
Mientras que algunas empresas pueden optar por el negro en lugar de elegir un color específico, ya que se siente seguro, también es una opción líder en las industrias en las que la confianza o la sofisticación del consumidor es un factor clave.
Más habitual en las siguientes industrias:
- Ropa
- Accesorios
- Proveedores de servicios de Internet y móviles
- Grandes almacenes
- Hoteles
No sigas ciegamente tus gustos e instintos, considera la teoría del color y la psicología del color cuando tomes tu decisión.
¿Cuántas combinaciones de colores se deben usar en un solo sitio web?
Para una combinación de colores estándar de un sitio web, puedes seleccionar entre tres y siete colores distintos en una única combinación o paleta.
Pero, ¿cuántas combinaciones de colores diferentes debería usar en un solo sitio web?
Eso depende de las circunstancias individuales y de tus objetivos con tu sitio web. Si tu sitio web es un sitio web o blog de una empresa dedicado a una sola marca, producto o compañía, querrás ceñirte a una única combinación de colores.
Por otro lado, si tu sitio web es una tienda de comercio electrónico, puedes utilizar diferentes combinaciones de colores para diferentes esquemas de productos para evocar diferentes reacciones emocionales para diferentes categorías de productos.
El problema de usar múltiples paletas es que complicarás las cosas para cualquier creador de contenido interno o externo, aumentando la posibilidad de errores humanos y complicaciones
Cuando eliges una combinación de colores para tu sitio web, es esencial evitar excederse y pasar semanas en la tarea. Es una elección importante, seguro, pero elegir los colores correctos no te ayudará a dirigir el tráfico a tu sitio web o a aumentar las conversiones en las páginas de tus productos por sí mismo.
Cómo obtener las combinaciones de colores exactas para un sitio web
Para identificar cada color usado en un sitio web, hasta el tono exacto y el código hexadecimal, puedes usar una extensión de Google Chrome o un add-on de Firefox como ColorZilla.
Con ColorZilla instalado, puedes simplemente pasar el puntero directamente sobre cualquier elemento de diseño de cualquier sitio, logo o imagen, y te mostrará el hexágono HTML exacto o los códigos de color RGB para ese píxel. Si no quieres identificar los colores utilizados uno por uno, también puedes usar un generador de paleta de colores que utilizará una imagen, como la herramienta de extracción de color de imágenes de Colormind.
Sin embargo, no es una solución tan perfecta como podría parecer. Tienes que hacer un pantallazo del sitio web y subirla, la paleta generada no será necesariamente 100% exacta a los tonos reales utilizados en el diseño. Por ejemplo, si el sitio web incluye un gradiente o una imagen con colores más allá del esquema de colores principal, la paleta generada tiende a ser inexacta.
Así que por ahora, la mejor manera de identificar los colores exactos usados en el diseño web sigue siendo usar un plugin o extensión de identificación de colores, o hacer un pantallazo y hacer las cosas manualmente en una herramienta de edición de fotos como PhotoShop.
¿Qué combinación de colores del sitio web estamos usando en Kinsta?
Como la mayoría de los sitios web, en Kinsta seguimos un esquema básico de 3 colores o triádico para todo nuestro contenido. Como somos una empresa de alojamiento centrada en WordPress, no hay necesidad de implementar múltiples paletas en nuestro sitio web.
Usamos un púrpura oscuro (#5333ed) como nuestro color primario, turquesa (#2cd4d9) para yuxtaponer y crear degradados atractivos, pero equilibrados, y un gris tenue para el texto (#6E7076).
Pero, ¿qué están haciendo otras empresas?
¡Averigüémoslo!
26 Mejores ejemplos de combinación de colores en sitios web
Hemos buscado en la web grandes ejemplos de combinaciones de colores e incluso hemos separado los sitios por categoría, por lo que te será fácil encontrar inspiración en sitios web relevantes.
Grandes combinaciones de colores de sitios web de comercio electrónico
A continuación mostraremos excelentes ejemplos de comercio electrónico de combinaciones de colores que coinciden con su marca e industria.
1. Producto para el cuidado de la piel: Brillante y juguetón
La elección de los colores de Bliss está a su punto cuando se trata de su marca. Los colores son brillantes y juguetones, acompañandos perfectamente del mensaje de la compañía de positividad corporal y felicidad interior.
2. Marca de ropa: Claro y conciso
Le Bonnet es una empresa de ropa que se centra en la claridad en la paleta de colores de su sitio web. Unos pocos colores intensos, junto con un color de fondo beige opaco para separar los productos, ayudan a elevar la simplicidad del diseño.
3. Tienda de ropa: Simplicidad
Revise Concept es un sitio de marca de ropa, y en lugar de basarse en los colores de la paleta de colores del sitio web, utiliza colores simples y espacio en blanco para resaltar los colores y diseños de la ropa en sí.
Este enfoque puede ser una excelente alternativa para los sitios de comercio electrónico que quieren dejar que el producto hable por sí mismo, en lugar de crear un diseño impactante para contar la historia.
4. Vajilla: Fiabilidad y profesionalidad
My Tableware es un sitio alemán de comercio electrónico para vajilla y platos personalizables.
El sitio utiliza un simple esquema de colores de azul oscuro, marrón claro y gris para transmitir una sensación de profesionalidad y fiabilidad, con notas de sofisticación.
5. Goma de mascar: Natural e impulsiva
Neuro es una marca de chicles y caramelos con cafeína, diseñada para ayudar a la gente a concentrarse. Utiliza una mezcla de colores más suaves como el turquesa, el azul claro y el beige, para inculcar el sentido de los ingredientes naturales.
También hay una apelación a la emoción y a las decisiones impulsivas con el rojo y el naranja, excelente uso del color del énfasis.
6. Reloj: Sofisticación y lujo
Prime Ambassador es una marca sueca de relojes, con un elegante sitio de comercio electrónico diseñado para destacar los productos. Las combinaciones de colores de un tono marrón claro casi dorado sobre un fondo gris oscuro y los acentos de madera en la imagen traen una sensación de sofisticación y lujo al visitante.
Los colores son perfectos para promocionar un producto de alta gama como un reloj a medida, pero se sentiría fuera de lugar si se vendiera un producto de consumo regular.
7. Pantalones: Creativos y accesibles
Alday es una marca de pantalones cómodos diseñados para ajustarse mejor que los jeans y chinos producidos en masa que se venden a precios más bajos.
El sitio web es creativo y juguetón, con combinaciones de colores vibrantes que hacen que se sienta accesible al visitante y a los clientes potenciales.
8. Snacks de frutas: Colores elegantes y acentuados
Madies es una línea de snacks de fruta liofilizada, dirigida a un consumidor más consciente de la moda que las frutas secas sin marca vendidas en grandes porciones.
El fondo negro y la personificación amarilla del mango maduro acentúan la simplicidad del diseño, dando lugar a un elegante producto final.
9. Vaqueros a medida: Está vivo
Unspun utiliza rojo y naranja brillantes para dar vida al sitio web. Perfecto para comunicarse con una audiencia que lleva un estilo de vida activo y vibrante.
Combinaciones de color de sitios web personales y de viajes
A continuación encontrarás nuestra selección de los mejores ejemplos de combinación de colores de sitios web para sitios web personales y de viajes.
10. Simplicidad creativa
Madeleine Dalla es una fotógrafa de Nueva York con un gran sentido para el diseño de sitios web (y un impresionante portfolio).
Al dejar el color fuera de la ecuación para el resto del diseño, ella realmente resalta los colores vivos de sus fotos seleccionadas de cada uno de sus proyectos destacados. Ella usa la ausencia de color tanto como los colores mismos.
11. Escala de grises con salsa
Ali Rifai es un director de arte creativo y se ve en el concepto de la página web. Usando la escala de grises con solo una pizca de color, tu atención se centra en las palabras clave correctas y las áreas críticas del diseño, la palabra «original» y la sonrisa encantadora.
12. Con la naturaleza
iFly 50 es una revista online publicada por KLM para celebrar su 50 aniversario.
Al resaltar los azules del cielo y el agua, y el verde de la hierba y el bosque, hace que cualquier visitante se sienta unido a la naturaleza, un acercamiento perfecto para cualquier fotógrafo de naturaleza o escénico.
13. Limpio y profesional
El sitio de Benediktas Gylys es una clase magistral de diseño limpio. No hay desorden y eso también va para las opciones de color.
El color púrpura primario resalta el profesionalismo, y aunque hay pocos colores, todos sirven para resaltar los elementos críticos, las ilustraciones.
14. Colores pragmáticos
BucketListly utiliza los colores de manera pragmática, usando el amarillo para resaltar las palabras clave, CTA y los países visitados hasta ahora.
Muestra cuánto valor se puede obtener de un solo color en un diseño cuando se utiliza en conjunto con el espacio en blanco y los conceptos correctos.
15. Elegante simplicidad
La imagen destacada del sitio de Lars Franzen utiliza un color de fondo oscuro para resaltar el color y la individualidad de las personas en el retrato.
16. Superposición futurista
El sitio personal de Dot Lung hace un gran trabajo al maximizar la simple paleta de colores con superposiciones y gráficos de fondo limpios. El púrpura del fondo crea una experiencia cohesiva de página a página.
17. Luz y oscuridad
Love for Iceland es un gran ejemplo de cómo los colores en una imagen resaltada pueden establecer el estado de ánimo. Con el azul brillante del hielo claro, iluminado por la luz del sol, en la parte superior izquierda, hasta la oscuridad parecida a la de una cueva en la parte inferior, establece un ambiente ominoso y aventurero para el visitante.
Combinaciones de color de páginas de aterrizaje
A continuación hemos resaltado diferentes páginas de aterrizaje con combinaciones de colores únicas o efectivas.
18. Contrastes agudos
Zenly utiliza colores de gran contraste para resaltar la funcionalidad real de la aplicación de mapas en vivo (por cierto, así es como se incrusta Google Maps en los sitios de WordPress). El telón de fondo del espacio hace que el diseño de la aplicación globular destaque y le dé un aire futurista.
19. Color para resaltar
Slack utiliza una táctica probada de combinación de colores en las páginas de aterrizaje, donde los colores se utilizan principalmente para resaltar las llamadas importantes a la acción y otros elementos esenciales. Para una página de aterrizaje, no hay que complicar demasiado el diseño, y eso también se aplica a los colores.
Asegúrate de revisar nuestra comparación a fondo entre Microsoft Teams y Slack.
20. Los colores vibrantes despiertan emociones
Spotify utiliza colores vibrantes para provocar emociones en el público en su nueva y sencilla página de aterrizaje. Los colores cuentan más de una historia que el subtítulo antes del botón CTA. Echa un vistazo a nuestra guía si estás pensando en lanzar un podcast pronto.
21. Los contrastes de color crean orden en el caos
Autonomy utiliza los colores y el contraste para crear orden en un diseño animado y caótico. El vibrante amarillo corta y se separa del fondo y de otros objetos.
22. Conjunto de colores futuristas
Bugsnag utiliza una variada colección de colores para dar una sensación futurista y de alta tecnología a su diseño plano. La combinación de colores y formas hace que el visitante se sienta como si fuera el año 2020, y que pueda confiar en que la empresa está a la vanguardia.
23. Vivo y con color
La página de aterrizaje de Connect Homes cobra vida con colores brillantes pero suaves. La paleta de colores logra un emocionante equilibrio que transmite una sensación de modernidad.
24. Colores conservadores, diseño lúdico
La página de aterrizaje de Plink se basa en un tono de azul oscuro relativamente conservador, pero lo equilibra con una animación y con un diseño lúdico y divertido en general.
25. Vitalidad natural
Travelshift se basa en gran medida en el color verde para transmitir una sensación de naturaleza y vitalidad. En lugar de resaltar los CTA o el contenido clave con un color que llame la atención como el rojo o el naranja, el verde funciona como una promesa de rejuvenecimiento.
26. Los colores brillantes de la esperanza
Swab the World utiliza un esquema de colores brillantes y contrastantes para transmitir una sensación de esperanza. Es una combinación perfecta para la página de aterrizaje de una organización sin fines de lucro. El choque de colores trabaja con las formas para resaltar el enfoque moderno/futurista que usan para afrontar el reto.
Generadores de Combinaciones de Colores del Sitio Web
Si no quieres elegir manualmente colores adyacentes, degradados o matices para tu combinación o paleta, puedes usar las herramientas online para ayudarte. Hay varios generadores gratuitos de combinaciones de colores o paletas disponibles en línea. A continuación, veremos más de cerca algunas de las mejores opciones.
Colormind
Colormind es un generador de colores alimentado por la IA que puede utilizar para generar colores para sitios web, plantillas y más al instante. El único problema es que no puedes establecer un color primario del que extrapolar una paleta, tienes que generarlo al azar cada vez. También puedes extraer paletas de colores de cualquier imagen que desees.
Coolors.co
Coolors.co es una aplicación web y móvil que te ayuda a generar paletas desde cero. Tiene alternativas de tonos para cada opción de color y otras herramientas avanzadas que te ayudan a tomar decisiones eficientes sobre tus combinaciones de colores.
Paletton
En lugar de generar combinaciones aleatorias, Paletton te da un control total sobre tu paleta y el color que quieres usar como color base/primario. Puedes elegir el tipo de paleta que quieras, ya sea de colores adyacentes, un esquema de color triádico u otros. Puedes seleccionar cualquier color de la rueda de colores.
ColorSpace
ColorSpace genera paletas de color basadas en un color primario que tú elijas. Ofrece una amplia variedad de opciones de estilo que le dan más flexibilidad.
Ceguera al color: Cómo elegir una paleta para daltónicos para tu sitio Web
Lo último que hay que considerar cuando se crea un sitio web es cómo las personas verán los colores.
No todos ven la gama de colores «estándar». Hay tres tipos principales de daltonismo: deuteranopía, protanopía y tritanopía.
El daltonismo rojo-verde (deuteranopía y protanopía) es la forma más común de daltonismo. Afecta a alrededor de 1 de cada 12 personas de ascendencia del norte de Europa. Con un número tan grande de población afectada por ella, vale la pena considerarla cuando se diseñe y/o elija un tema de WordPress.
El daltonismo azul-amarillo es mucho más raro y afecta a hombres y mujeres por igual.
Cómo elegir una paleta para daltónicos para tu sitio web
Dado que el número de personas daltónicas rojo-verdes es mucho mayor que cualquier otra forma de daltonismo, debería ser tu prioridad número uno abordar con su diseño. Debido a que no pueden separar el rojo, verde y púrpura, sino que los ven como diferentes tonos de amarillo y azul, tú quieres evitar el uso de colores contrastantes que terminarán pareciéndose demasiado.
- No contrastes el verde con el amarillo o viceversa.
- No contrastes el amarillo con el rojo o el naranja.
- No contrastes el púrpura con tonos de azul similares.
Al elegir los colores primarios independientes para tu logotipo o diseño, debes considerar si sigues siendo también marca para los consumidores que son daltónicos. Por ejemplo, el púrpura de Kinsta sigue siendo un azul oscuro para los consumidores daltónicos, transmitiendo un mensaje de fiabilidad y confianza. Para nosotros, eso es 100% de marca, así que no hay conflicto potencial en la mente de nuestros prospectos.
Resumen
El ojo humano puede ser capaz de separar millones de tonos de color diferentes, pero no tienes que revisar todas tus opciones para encontrar un esquema de color que funcione para tu sitio.
Al centrarse en tu marca y tus clientes ideales, puedes reducir tus opciones de colores primarios. Una vez que tengas tus opciones, puedes confiar en los generadores de paletas en línea para completar tu propia paleta de colores, o elegir colores que coincidan en base a ejemplos y preferencias.
Con el enfoque adecuado, se puede lograr la creación de un esquema de colores para el sitio web que podría utilizarse como punto de partida del proceso de diseño, aunque a menudo es necesario contratar al desarrollador/diseñador web adecuado si se desea obtener el aspecto profesional adecuado que su marca necesita.
Ahora, es el momento de elegir las fuentes, ¿no?
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta