Las grandes marcas son expertas en manejar sus reconocidas combinaciones de colores para crear efectos inesperados; aquí tienes lo que puedes aprender de ellas.
Cuando visitas los sitios web de marcas famosas como Facebook, The Home Depot o McDonald's, las combinaciones de colores que ves no son ninguna sorpresa. Pero crear una gran paleta de colores para una marca es solo el primer paso: las empresas inteligentes saben cómo aplicar estratégicamente sus esquemas de color.
Exploremos las paletas de colores de marcas conocidas y analicemos cómo diferentes combinaciones de colores e incluso la psicología del color pueden influir en la percepción que tienen los consumidores sobre las marcas.
9 combinaciones de colores de marca y lecciones que puedes aprender de ellas
McDonald's
Combinación de colores principal
Amarillo McDonald’s #ffbc0d
Transmite calidez, optimismo y felicidad.
Se utiliza en botones, el logotipo y alertas como el aviso de cookies.
Rojo McDonald’s #d90007
Transmite expectación, emoción y alegría.
Se utiliza en el indicador de selección del menú, gráficos y los marcadores para encontrar la ubicación más cercana.
La clásica combinación de McDonald's de rojo y amarillo es la misma que utilizan muchas otras empresas de comida rápida. Tanto es así que ha dado lugar a su propia teoría popular llamada la teoría del kétchup y la mostaza, la cual sostiene que el rojo y el amarillo son tan populares en los restaurantes de comida rápida porque:
- El amarillo comunica rapidez y es visible a largas distancias (es decir, desde la carretera).
- El rojo puede tener efectos fisiológicos, como estimular el apetito y acelerar el pulso.
En 2019, McDonald's presentó una nueva identidad visual que dio un giro a esta clásica combinación de colores al invertir la jerarquía del rojo y el amarillo. En lugar del diseño de amarillo sobre rojo con el que todos crecimos, McDonald's convirtió un "amarillo brillante" en su color principal y relegó el rojo a un papel secundario.
Con esta nueva identidad visual, McDonald's espera que:
- El amarillo comunique calidez, optimismo y felicidad
- El rojo transmita expectación y emoción
- Los colores complementarios, como el verde azulado y el rosa, le dan un toque divertido a sus productos asociados
El sitio web de McDonald's utiliza el amarillo siempre que quieren que realices una acción, como en el botón "Pedir ahora". El rojo aparece con moderación, indicando una ubicación como indicador de selección de menú o como un marcador para encontrar el local más cercano.
Conclusión: Si tienes un color complicado en tu esquema de marca, como un rojo intenso, úsalo con moderación para comunicar algo específico, como una ubicación o el deseo de que el usuario realice una acción.
Apple
Combinación de colores principal
Plata Apple (también conocido como platino) #e6e6e6
Transmite lujo y exclusividad.
Se utiliza en el texto de la barra de navegación, el favicon, el logotipo y en los productos.
Gris Apple (también conocido como arsénico) #424245
Transmite sofisticación y elegancia.
Se utiliza para el fondo de la barra de navegación.
Blanco cultivado #f5f5f7
Transmite apertura y luminosidad.
Se utiliza tanto para el texto de la barra de navegación como para los fondos de secciones y anuncios.
Esquema de colores de acento
Azul verdadero #0066cc
Transmite acción y una actitud acogedora.
Se utiliza en botones, enlaces y como parte de un degradado en gráficos y encabezados.
Naranja #f56300
Transmite emoción y novedad.
Se utiliza para etiquetas de productos nuevos y como parte de un degradado en gráficos y encabezados.
Apple ha confiado en el minimalismo para transmitir una sensación de lujo y elegancia desde sus inicios. En un famoso anuncio de 1978 que presentaba el ordenador Apple II, fueron directos al grano: "La simplicidad es la máxima sofisticación".
Apple no necesita adornos extra para vender su trabajo. Los fundamentos, ejecutados de forma sencilla y experta, son suficientes. El minimalismo de Apple también cumple la función más práctica de poner sus productos en el centro de atención. La paleta de colores neutros hace que las imágenes principales destaquen.
En la captura de pantalla de la página de inicio de Apple que aparece arriba, un primer plano brillante del nuevo iPhone 13 Pro capta toda tu atención. Las líneas sencillas y expertamente diseñadas del teléfono y su cámara son lo primero que ves, poniendo el foco en la artesanía. Los colores de fondo del sitio web de Apple sirven como marco para los productos en sí.
Conclusión: Si trabajas con una paleta de colores de marca neutra, úsala para enmarcar la calidad de tu producto o servicio.
UPS
Combinación de colores principal
Dorado UPS #ffc400
Transmite lujo y calidez.
Se utiliza en anuncios, alertas, botones importantes, gráficos y como subrayado para h1 y h2.
Marrón oscuro #371400
Transmite solidez y fuerza
Se utiliza en el logotipo de UPS, el fondo del pie de página y en gráficos.
Marrón UPS #644117
Transmite lujo, sofisticación y confianza.
Se utiliza en el fondo de la cabecera de la página de inicio.
Esquema de colores de acento
Azul #0662bb
Transmite acción y una actitud acogedora.
Se utiliza para botones secundarios, enlaces en el texto y en algunas secciones de llamada a la acción.
Azul Columbia #c2e3e2
Transmite una actitud tranquila y profesional.
Se utiliza para marcas de verificación, así como para algunas listas ordenadas y desordenadas.
UPS y el color marrón son tan sinónimos que su eslogan es "¿Qué puede hacer el marrón por ti?". Incluso llegaron a registrar el uso del Marrón UPS, originalmente llamado Marrón Pullman.
En 1919, UPS eligió el marrón porque representa "clase, sofisticación y profesionalismo". Lo cual tiene sentido: el marrón es el color del cuero suave, la madera pulida y el chocolate intenso. Transmite una sensación de comodidad y confianza, casi como si dijera: "tranquilo, nosotros nos encargamos".
Teniendo en cuenta esta historia, uno se pregunta por qué el marrón de UPS solo aparece en la imagen principal del sitio web de UPS. ¿Por qué un color tan estrechamente ligado al reconocimiento de marca de UPS no tiene una presencia significativa en el sitio web de la empresa?
La respuesta podría estar en el formato digital. El marrón de UPS sigue apareciendo de forma destacada en la presencia física de la marca (los uniformes, los vehículos, la mercancía y sus tiendas) porque, en persona, sigue transmitiendo una sensación de lujo y confianza. Pero esa cualidad física no se traslada del todo a la pantalla digital. Es un color demasiado neutro y suave para llamar la atención. Y si aparece con demasiada frecuencia, el sitio corre el riesgo de parecer un lío apagado y sin vida.
En su lugar, UPS confía en su otro color principal: el dorado. Al igual que McDonald's intercambió sus colores primarios y secundarios, UPS pone en primer plano su color históricamente secundario para adaptar su marca al formato digital. El dorado de UPS conserva gran parte de la misma sensación de lujo que el marrón, con la ventaja añadida de que destaca y dirige la mirada hacia donde UPS quiere que vaya.
Además del marrón y el dorado, UPS utiliza el marrón más oscuro de su logotipo en el pie de página y en algún que otro gráfico. El azul aparece en los botones de llamada a la acción secundarios, con una jerarquía inferior a la de los botones amarillos. Por último, un azul Columbia de aspecto profesional aparece en las listas ordenadas y desordenadas para indicar pasos importantes de un proceso o requisitos.
Conclusión: Los colores de una marca histórica no siempre se adaptan bien al entorno digital. Apóyate en tus colores secundarios o complementarios si el color principal de la marca no funciona.
Starbucks
Combinación de colores principal
Verde principal de Starbucks #006241
Transmite frescura, vitalidad y salud.
Se utiliza en la imagen principal, los botones, los indicadores de enlace al pasar el cursor y el indicador de selección del menú.
Verde claro #d4e9e2
Transmite frescura y optimismo.
Se utiliza para romper las secciones y gráficos con mucho verde.
Verde corporativo #1e3932
Transmite solidez y comodidad.
Se utiliza para los fondos de las imágenes de productos, los fondos de anuncios fijos, el pie de página y, a menudo, como color neutro en los gráficos.
Color de acento
Verde té #dff9ba
Transmite crecimiento, vida y naturalidad.
Se utiliza en gráficos específicos de productos.
Starbucks es una marca por excelencia de Seattle que se ha esforzado mucho por vincularse a la exuberante vegetación y a la cultura alternativa del Noroeste del Pacífico. A medida que se ha convertido en la cadena de cafeterías más grande del mundo con diferencia, Starbucks ha apostado todo a una paleta de colores verde monocromática que, según ellos, "hace un guiño sutil a nuestra herencia y nos impulsa hacia un futuro global".
Las paletas de colores monocromáticas no siempre son fáciles de lograr, pero Starbucks lo consigue utilizando tres tonos diferentes de verde, cada uno con propósitos específicos. Como su nombre indica, el Verde Primario de Starbucks es el indicador principal de la marca, utilizado en el logotipo y en la imagen principal. Es el primer color que recibe al lector.
Starbucks utiliza entonces el Verde Casa como un tono neutro en el fondo de las imágenes de productos y en algunas secciones. El único propósito del Verde Claro es romper los bloques de otros verdes y aportar una presencia relajante. Por último, el Verde Té está presente en todos los gráficos, aportando una chispa de vida y energía. Con estos roles claros en mente, Starbucks logra evitar un exceso de verde y crear un diseño agradable y tranquilo que se mantiene fiel a su filosofía de marca original.
Conclusión: Si utilizas una paleta de colores monocromática, asigna roles específicos y claros a cada color.
The Home Depot
Combinación de colores principal
Naranja #F96302
Transmite energía y productividad.
Utilizado en el logotipo, los botones, el indicador de selección del menú y los iconos.
Blanco #FFFFFF
Transmite luz, claridad y apertura.
Utilizado para el fondo del sitio web.
En el extremo opuesto a Starbucks en cuanto a paletas monocromáticas se encuentra The Home Depot, que utiliza casi exclusivamente su característico "gran naranja" en su sitio web. No hay otros tonos, solo un naranja intenso.
Antes de abrir su primera tienda en Atlanta en 1979, The Home Depot contrató al diseñador canadiense Don Watt para establecer su imagen de marca. Watt eligió el naranja porque representaba energía y valor. También imaginó que los delantales naranjas convertirían a los empleados en "faros" dentro de la propia tienda.
The Home Depot necesitaba una imagen de marca icónica y llamativa porque su tienda era un concepto nuevo a finales de los 70. Los fundadores, Bernie Marcus y Arthur Blank, tuvieron la idea de una tienda integral de bricolaje donde pudieras comprar todo lo necesario para un gran proyecto en una sola visita. Una idea nueva requería una elección de color audaz e inesperada que preparara al público para prestar atención.
Hoy en día, The Home Depot es la tienda de mejoras para el hogar más grande de EE. UU. y utiliza el "gran naranja" para destacar entre la multitud. Hacen que su intensidad sea fundamental en cada parte de sus comunicaciones, incluido el sitio web.
Conclusión: Si utilizas un solo color en tu paleta, debe ser audaz y capaz de sostenerse por sí mismo.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Snapchat
Combinación de colores principal
Amarillo Snapchat #FFFC00
Transmite audacia, diversión y fantasía.
Utilizado para el fondo de la página de inicio, el fondo del encabezado de la página de creadores, botones, ilustraciones y llamadas a la acción.
Negro #000000
Transmite seriedad, audacia y una actitud profesional.
Se utiliza para botones de la página de inicio, textos, llamadas a la acción (CTA), fondos de páginas empresariales y el pie de página.
Blanco #FFFFFF
Transmite fugacidad y apertura.
Se utiliza en el logotipo, fondos de sección y campos de formularios.
Snapchat, con su amarillo y negro, es otro ejemplo de una empresa que utiliza una paleta de colores llamativa para destacar. Su sitio web es casi totalmente amarillo, negro y blanco: un esquema de colores de alto contraste clásico asociado con mensajes audaces que captan la atención (por ejemplo, señales de tráfico, equipos deportivos y cintas de precaución).
El cofundador Evan Spiegel comentó que la inspiración para el amarillo fluorescente surgió de su investigación inicial. Ninguna de las 100 aplicaciones principales era amarilla, así que lo eligieron como su color principal y lo convirtieron en el eje de su identidad de marca. No hay una razón más profunda detrás, lo cual encaja con la filosofía de Snapchat de divertirse y no darle demasiadas vueltas a las cosas.
Pero eso no significa que Snapchat no haya pensado bien las cosas. La empresa ha dedicado mucho esfuerzo a equilibrar la paleta de colores de su sitio web para comunicar mensajes distintos según la página que visites.
Su página de inicio te recibe con un fondo amarillo que grita diversión y desenfado. Los botones y el texto son negros, destacando por contraste frente a la intensidad del entorno.
A medida que navegas por el sitio, los roles de los colores se intercambian. En las páginas de Anunciantes y Desarrolladores, el negro toma el mando como color principal en la barra de navegación, el encabezado y el fondo de algunas secciones (o en toda la página, en el caso de los desarrolladores). El amarillo queda como color de acento, presente en ilustraciones y para llamar la atención sobre botones y llamadas a la acción. El negro ayuda a transmitir que Snapchat es una gran empresa tecnológica capaz de generar resultados reales en sus páginas más serias. Y, de paso, resulta que también es una aplicación social muy divertida.
En las páginas para creadores, el amarillo mantiene su papel protagonista, pero con una intensidad menor que en la página de inicio. Existe un equilibrio entre el negro y el amarillo que se ajusta a las necesidades de los creadores: necesitan herramientas divertidas para trabajar y una base sólida para monetizar su contenido.
Conclusión: Incluso con una paleta de colores sencilla, puedes dirigirte a diferentes audiencias enfatizando un color sobre otro.
Netflix
Combinación de colores principal
Rojo Netflix (o carmesí) #e50914
Transmite emoción y energía.
Se utiliza en el logotipo y en los botones.
Negro #000000
Transmite sofisticación e importancia.
Se utiliza en el fondo.
Gris carbón oscuro #303030
Transmite una sensación de calma y tranquilidad.
Se utiliza en los bordes de las secciones, el fondo del acordeón de preguntas frecuentes y el texto del pie de página.
Netflix toma muchas referencias de los colores del teatro tradicional, con un rojo que recuerda a las cortinas de terciopelo. Según la cuenta de TikTok designsecretsss, el rojo es un color predilecto en los teatros porque es el primero que el ojo humano deja de percibir en condiciones de poca luz, lo que permite que el público se concentre en la pantalla o el escenario. El negro y el gris oscuro también se inspiran en el teatro, transmitiendo una sensación de importancia y silencio.
Todas estas elecciones se combinan para preparar el escenario de la atracción principal: el contenido de Netflix. Netflix utiliza el rojo para impulsar acciones como "iniciar sesión" o "empezar". El negro y el gris oscuro le indican a la audiencia que el espectáculo está por comenzar. En conjunto, Netflix emplea su esquema de color para evocar el aspecto y la sensación de un teatro, pero en la comodidad de tu hogar.
Conclusión: Tu esquema de color puede evocar una sensación o un lugar específico, como un teatro, para comunicar tu propuesta de valor principal sin necesidad de usar texto.
Mastercard
Esquema de color principal
Negro #000000
Transmite sofisticación y confianza.
Se utiliza para el texto, el fondo de la barra de navegación al pasar el cursor, los fondos de encabezado y pie de página en algunas páginas, y los fondos de sección.
Blanco #FFFFFF
Transmite apertura y limpieza.
Se utiliza para el texto y los fondos de sección.
Gris oscuro #323231
Transmite calma y profesionalismo.
Se utiliza para fondos de sección, iconos y gráficos, el fondo de la barra de navegación del pie de página y algunos menús al pasar el cursor.
Esquema de color de acento
Naranja (también conocido como Sinopia) #cf4500
Transmite energía y vitalidad.
Se utiliza para botones, enlaces al hacer clic, gráficos e indicadores de selección de menú en sitios de apoyo como el Centro de Marca de Mastercard.
Una de las cosas que más llama la atención del sitio web de Mastercard es la ausencia de su esquema de color de marca: rojo, naranja y amarillo. Sin embargo, estos colores siguen teniendo una presencia importante en el diseño del sitio si sabes dónde mirar.
En 1960, MasterCard (entonces llamada Master Charge) lanzó su nuevo logotipo de dos círculos superpuestos en rojo y amarillo. La inspiración original surgió de la expansión de la empresa a mercados extranjeros, principalmente Japón. Los dos círculos representaban la unión de dos mundos: Oriente y Occidente. En 1979, cuando Master Charge cambió su nombre a MasterCard, los consultores de marca Siegel+Gale definieron un nuevo significado, donde los círculos representan la "interacción entre el cliente y la tarjeta de crédito" para crear algo nuevo.
MasterCard ha aumentado recientemente su dependencia de este diagrama de Venn con una renovación completa de su marca en 2016 e incluso eliminó el logotipo con el nombre MasterCard en 2019. Ahora, la marca MasterCard gira totalmente en torno al diagrama de Venn rojo, amarillo y naranja. Entonces, ¿por qué no vemos más estos colores en su diseño web?
Al igual que el rojo y el amarillo crean el naranja, el cliente y MasterCard se unen para crear una experiencia. Estas experiencias, como unas vacaciones tropicales o una reunión familiar, son en las que se centra el sitio web de MasterCard; no en la tarjeta en sí, sino en lo que la tarjeta hace posible. Estas experiencias son lo que representa el naranja. De este modo, el naranja está siempre presente en el sitio, aunque solo sea de forma emocional.
Conclusión: La paleta de colores de tu marca puede definir tu diseño y comunicar el mensaje central de tu marca incluso con una presencia mínima.
Facebook
Esquema de color principal
Azul Facebook #1877f2
Transmite calma, limpieza y una actitud acogedora.
Se utiliza en el logotipo, los botones, el indicador de selección de menú y los iconos.
Blanco papel #F0F2F5
Transmite apertura y neutralidad.
Se utiliza para el fondo del feed.
Esquema de colores de acento
Verde islámico #00A400
Transmite crecimiento y vitalidad.
Se utiliza para botones de llamada a la acción importantes, como "Crear cuenta nueva", y como indicador de quién está conectado.
Rojo coral #FA383E
Transmite urgencia y acción.
Se utiliza para las alertas de notificaciones.
Desde el principio, el "azul Facebook" definió la personalidad de la marca. Pero en los últimos años, se han ido distanciando de ese color.
Si echas un vistazo al sitio web de marca de Facebook hoy en día, dicen: "Creemos que la gente puede hacer más unida que por separado. De eso trata Facebook. De las personas. No del color azul". Y añaden: "Nuestra estrategia de color refleja el producto en sí, donde el contenido colorido de los usuarios se asienta sobre un fondo blanco".
Facebook ha hecho realidad estas ideas en su diseño actual. El azul sirve como hilo conductor que aparece en el diseño del logotipo, en los iconos, en los botones y más. No importa lo que estés mirando, el azul está en la periferia. Las publicaciones del feed ahora viven sobre lo que Facebook describe como "blanco papel", que según ellos aporta calidez. Este esquema de color tiene como objetivo centrarse en el usuario y en el contenido generado por este, manteniendo al mismo tiempo un "sello Facebook" reconocible en todo.
Conclusión: Si tu objetivo es alojar contenido generado por el usuario, mantener tu color principal en la periferia preservará la presencia de tu marca.
Crea la paleta de colores de tu sitio web
La paleta de colores de tu sitio web no depende solo de los tonos que elijas, sino de cómo los utilices. Puedes hacer que los colores sean el eje central de tu diseño, como en Snapchat o The Home Depot, o dejar que pasen a un segundo plano y sirvan de marco, al estilo de Apple o Facebook. O, si prefieres, ¡inventa tu propia estrategia!
Para saber más sobre el significado de las paletas de colores, echa un vistazo a estos recursos:
- Teoría del color para diseñadores: guía para principiantes
- 10 significados del color: la psicología detrás de cada tono
- El diccionario del color para diseñadores
¿Listo para experimentar? Empieza hoy mismo un proyecto en Webflow.
