La versión corta
- Una paleta de marca que funciona tiene cuatro o cinco colores con funciones fijas: un fondo, un color principal, un tono de apoyo, un neutro para el texto y un acento.
- El acento es el color que la gente recuerda, así que debe aparecer en una sola cosa a la vez, como un botón, un precio o el símbolo del logo.
- Las paletas propias de un sector ayudan a los clientes a entender lo que vendes, pero un único color inesperado es lo que hace reconocible a una marca.
- Prueba una paleta en diseños reales a tamaños reales, en claro y oscuro, antes de comprometerte, porque las muestras sobre una página blanca esconden casi todos los problemas.
- Comprueba que el color de tu texto sobre tu fondo cumple el contraste WCAG, o el texto corrido será difícil de leer para mucha gente.
En esta página
Las buenas ideas de colores de marca empiezan por las funciones, no por los favoritos. Elige un color de fondo sobre el que se apoyen la mayoría de tus diseños, un color principal que diga qué tipo de negocio eres, un tono de apoyo para dar profundidad, un neutro para el texto y un acento por el que te recuerden. Debajo tienes 30 paletas construidas así, seis por ambiente con muestras y 24 por sector con códigos, además de un método rápido para probar la que elijas.
Cómo se construye una paleta de colores de marca
La mayoría de las paletas fallidas son cinco colores del mismo peso: nada lidera, así que nada es reconocible. Una paleta funciona cuando cada color tiene su parte del espacio: el fondo cubre la mayor parte, el color principal una buena parte y el acento solo una pizca. La regla 60 30 10 es una proporción de partida útil, aunque luego la flexibilices.
Cometido
Parte de un diseño
Cometido
Cometido
Cometido
Cometido
Paletas de colores de marca por ambiente
Empieza aquí si sabes cómo quieres que se sienta la gente. Las asociaciones de color son culturales, no universales, como explica psicología del color.
Ideas de colores de marca por sector
Cada paleta de sector enumera cuatro códigos, normalmente del más oscuro al más claro, y la última columna nombra el color que hace de acento. Las convenciones existen por algo: un dentista en verde azulado y una panadería en marrones cálidos se entienden de un vistazo. Cumple la convención con tu color principal y rómpela con suavidad con tu acento.
Paleta
Códigos
#1d3557 #457b9d #f1faee #e63946Por qué funciona
Paleta
Códigos
#2b2d42 #8d99ae #edf2f4 #9c6644Por qué funciona
Códigos
#03363d #17a398 #e6f4f1 #ffb703Por qué funciona
Paleta
Códigos
#264653 #2a9d8f #e9f5f2 #f4a261Por qué funciona
Paleta
Códigos
#4a2c2a #c08552 #f3e9dc #5e8b7ePor qué funciona
Paleta
Códigos
#7f4f24 #dda15e #fefae0 #bc4749Por qué funciona
Paleta
Códigos
#1b1b1e #7a1e2c #d4a373 #f5ebe0Por qué funciona
Paleta
Códigos
#2d4a3e #e5989b #ffcdb2 #fffaf5Por qué funciona
Paleta
Códigos
#5e548e #9f86c0 #e0b1cb #fbf8f3Por qué funciona
Códigos
#111111 #3a3a3a #f2f2f2 #e4ff1aPor qué funciona
Paleta
Códigos
#6b4e3d #e8b4a0 #f6e3d8 #fdf8f4Por qué funciona
Paleta
Códigos
#0f0f0f #c9c1b6 #f4f1ec #8a1c1cPor qué funciona
Códigos
#14213d #2e1a47 #f5f0e6 #c9a227Por qué funciona
Paleta
Códigos
#22333b #5e503f #eae0d5 #c6ac8fPor qué funciona
Paleta
Códigos
#262626 #7d7d7d #d9d9d9 #ff5a1fPor qué funciona
Paleta
Códigos
#0b1021 #1f6feb #e6edf3 #7ee787Por qué funciona
Códigos
#0a2e2a #00b37e #d7f9ec #1e1e24Por qué funciona
Paleta
Códigos
#0e0b16 #5b5bd6 #a78bfa #f0abfcPor qué funciona
Códigos
#1a1423 #ff7b54 #ffb26b #ffd56bPor qué funciona
Paleta
Códigos
#118ab2 #06d6a0 #ffd166 #ef476fPor qué funciona
Códigos
#2f3e46 #52796f #cad2c5 #f4a259Por qué funciona
Paleta
Códigos
#283618 #606c38 #fefae0 #dd6b20Por qué funciona
Paleta
Códigos
#6d597a #b56576 #e8c2ca #fbf6f0Por qué funciona
Paleta
Códigos
#090014 #3c096c #ff006e #fb5607Por qué funciona
Cómo hacer que una paleta se sienta como tu marca
Lo que convierte una paleta de lista en una identidad es una decisión que nadie más en tu calle ha tomado, normalmente el acento: un despacho de abogados en marrón cuero, un gimnasio en amarillo ácido. Cambia primero el acento y conserva el fondo y el color del texto, así ganas personalidad sin perder legibilidad.
Evita
- Cinco colores vivos usados por igual
- Elegir primero el color del logo y el resto a ojo
- Un acento en cada elemento de cada diseño
- Texto gris claro sobre fondo crema
- Elegir desde muestras sobre una página blanca
Haz
- Un fondo que cubra la mayor parte del espacio
- Primero las funciones, luego los colores que las cumplen
- Una sola cosa con acento por diseño
- Un neutro oscuro que pase el contraste
- Probar en una publicación, una story y un banner reales
Una paleta fundida en un degradado suave te da un fondo inconfundiblemente tuyo, siempre que los colores estén emparentados.
Prueba los colores de tu marca antes de comprometerte
- 1
Haz tres diseños reales
Una publicación cuadrada, una story de 1080×1920 y una cabecera de 1500×500, con palabras reales y tu logo.
- 2
Comprueba el contraste del texto
Tu neutro sobre tu fondo debe pasar WCAG AA. Contraste de color y accesibilidad muestra cómo medirlo.
- 3
Míralo pequeño
Reduce la publicación al tamaño de una miniatura. Si aún se nota que es tuya, la paleta cumple su función.
- 4
Pruébalo junto a la competencia
Pon tu publicación al lado de tres rivales locales. Si la tuya se confunde, cambia el acento, no toda la paleta.
- 5
Anota los códigos
Registra cada código hex y su función en un solo sitio.
Probar una paleta en una publicación real: el titular, el detalle y el fondo tienen que funcionar juntos a 1080×1350.
Si quieres ayuda para elegir, cómo elegir colores de marca recorre la decisión desde cero, y combinaciones de colores para logos la reduce a los dos o tres colores que debería usar el propio logo.
Convertir los colores de marca en un estilo
Cinco códigos hex los puede copiar cualquiera. En Gradiently, un Mark lleva una paleta como un fondo vivo con su propia luz, grano y movimiento, y no hay dos Marks iguales. Busca en el Mercado con palabras de color como «verde azulado profundo» para encontrar uno cercano a tu paleta, diseña con él gratis y reserva el tuyo para que solo tú puedas exportar con él. Tu kit de marca guarda los códigos exactos para texto y acentos.
Preguntas frecuentes
¿Cuántos colores debe tener una marca?
Cuatro o cinco bastan para la mayoría de las marcas: un fondo, un color principal, un tono de apoyo, un neutro para el texto y un acento. Más que eso es difícil de usar con coherencia.
¿Cuál es el mejor color para una marca nueva?
No hay un único mejor color. Elige un color principal que encaje con lo que vendes y luego un acento que tus competidores no usen, para que los clientes te distingan.
¿Deben mis colores de marca coincidir con mi sector?
Coincidir con el sector con tu color principal ayuda a que te entiendan rápido. Romperlo con tu acento es lo que te hace memorable.
¿Cómo compruebo que los colores de mi marca son accesibles?
Mide el contraste del color de tu texto sobre tu fondo con un verificador de contraste WCAG. El texto corrido debe alcanzar al menos 4,5:1.
¿Puedo usar un degradado como color de marca?
Sí, siempre que se construya con colores emparentados de tu paleta y conserves una versión plana para usos pequeños como favicons y texto.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil