Cómo construir una paleta de colores de marca que realmente funcione
Guía práctica para diseñadores sobre cómo construir una paleta de colores de marca que sobreviva al modo oscuro, los estados deshabilitados y cada superficie más allá del logo. Cinco marcas reales por dentro.
La mayoría de las paletas de colores de marca se construyen para una presentación de logo, y se ven bonitas hasta que el primer botón real necesita un estado deshabilitado.
Una paleta de colores de marca funcional no son cinco colores. Es un sistema por capas: un ancla, una escala real de neutros, colores semánticos, colores de estado y un plan de modo oscuro que ya existía antes de que alguien abriera Figma. Este paper recorre las capas, muestra cinco marcas haciéndolo bien y termina con el orden de construcción.
Por qué la mayoría de paletas de colores de marca fracasan
La mayoría de paletas de colores de marca fracasan no porque los colores estén mal, sino porque se construyeron para una presentación de logo en vez de para un sistema que se envía a producción.
El proceso típico va así. Un diseñador arma un moodboard, elige cinco colores que se sienten acordes al brief, los etiqueta como primario, secundario, acento, claro, oscuro, y entrega la paleta a los equipos que envían producto, sitio, docs y campañas. Ninguno de esos equipos estaba en la sala cuando se eligieron las cinco muestras.
El "secundario" no tiene un rango medio usable. El "primario" está demasiado saturado para texto de cuerpo. Nadie eligió un gris neutro, así que el diseñador inventa uno.
El equipo de modo oscuro se rinde y revierte todo con un filtro CSS. La paleta cumplió su trabajo para la presentación. Fracasó en el trabajo real.
Las cinco capas de una paleta funcional
Una paleta que sobrevive al trabajo real de marca tiene cinco capas, no cinco colores. Los diseñadores que envían sistemas de marca a escala discuten sobre a qué capa pertenece un color, no sobre cuál tono de verde es "más nuestro".
| Capa | Qué hace | Cantidad típica |
|---|---|---|
| Ancla | Lleva el reconocimiento de marca | 1 (quizá 1 de apoyo) |
| Neutros | Superficies, texto, bordes, fondos | 9-12 pasos |
| Semántica | Éxito, advertencia, crítico, info | 3-5 familias |
| Estado | Hover, foco, presionado, deshabilitado | Emparejada a cada color interactivo |
| Oscuro | Resolución en modo oscuro de cada capa | Set paralelo completo |
Nota lo que no está en esa lista. No hay "color secundario de marca", ni "terciario", ni "acento 2". La mayoría de marcas que creen necesitar un segundo color de marca en realidad necesitan una escala de neutros más completa o un ancla más audaz.
Aplanar es el bug. Las capas son la función.
Elige el color ancla primero y último
El ancla es el único color que lleva el reconocimiento de marca en cada superficie, y se elige dos veces: una al principio, otra cuando ya sabes con qué tiene que convivir.
La primera elección es direccional. El ancla debería ser el único tono que, si quitaras el wordmark, aún señalaría la marca. Piensa en el morado de Stripe, el morado de Linear, el azul de Figma, el negro de Notion, el magenta de Slack. Un color hace el trabajo de identidad.
La segunda elección es técnica. Después de construir la escala de neutros, el ancla casi siempre necesita un ajuste menor. Necesita pasar el contraste contra el neutro sobre el que se asienta, necesita un hermano afinado para modo oscuro, y necesita estados hover y presionado que no se ensucien. Los sistemas reales de marca envían de 5 a 9 pasos de ancla, no un solo hex comprometido.
Los neutros son la paleta
La mayor parte de una interfaz enviada son neutros, y una marca sin una escala real de neutros no tiene paleta, tiene un mood board.
Una escala real de neutros va de 9 a 12 pasos desde casi blanco hasta casi negro, afinados para el color ancla al que acompañan. Los grises puros suelen verse muertos junto a un ancla cálida y demasiado fríos junto a un ancla azul.
La escala de neutros es donde el contraste de color accesible se diseña dentro o se diseña fuera. Cada paso de superficie tiene un paso de texto y un paso de borde que pasa el contraste. Cada paso tiene un rol: fondo, fondo sutil, superficie, superficie elevada, overlay, divisor, borde, texto atenuado, texto por defecto, texto fuerte.
Las marcas con el trabajo más fuerte de neutros tratan al neutro como el héroe de la paleta, no como relleno. El ancla es la bandera. Los neutros son el país entero.
Tres marcas que clavan la disciplina del ancla
Estas tres manejan un solo ancla contenida contra una escala profunda de neutros, y el ancla permanece reconocible porque nunca se desparrama.
Notion
Míralo en vivo en notion.com/product
Notion envía el extremo minimalista. Casi toda la superficie de trabajo es un off-white afinado con texto negro. Un único azul marino profundo lleva la banda de marketing, y el nivel semántico hace el trabajo visible de color: rojo, naranja, azul, verde para estados de tareas.
Qué robar: elige un ancla, luego pregunta si la marca necesita una segunda. La respuesta honesta suele ser no.
Linear
Linear maneja la paleta más opinada dark-first de la categoría. El ancla es un solo morado. Los neutros son una escala completa en modo oscuro (superficie, superficie sutil, superficie elevada, overlay) cada uno haciendo trabajos diferentes.
Qué robar: si el producto envía modo oscuro, construye la paleta oscura con el mismo cuidado que la clara, no como un pase de filtro.
Stripe
Míralo en vivo en stripe.com/payments
Stripe maneja la disciplina de nivel ancla más limpia en SaaS. El morado con inclinación violeta aparece en CTAs, enlaces inline, ilustraciones y momentos de marca, y casi en ningún otro lado. Cuando aparece el morado, el ojo lo lee como acción, no como decoración.
Qué robar: mientras más contenida esté el ancla, más reconocible será la marca. Las anclas sueltas se leen como ruido.
Dos marcas donde los neutros son toda la historia
Estas dos marcas muestran qué pasa cuando la escala de neutros misma lleva la marca y el ancla es monocromática o está tokenizada en roles.
Vercel
Vercel maneja la paleta más extrema neutral-first en herramientas de dev. El ancla es esencialmente monocromática: negro, blanco y una rampa neutral completa. El color aparece solo como dato, con un acento teal en gráficos clave y elementos de estado. La escala de neutros misma es la marca.
Qué robar: una marca puede saltarse por completo el ancla ruidosa si el sistema neutro es lo suficientemente disciplinado. Algunas marcas necesitan una escala de grises distintiva, no un color distintivo.
Shopify
Míralo en vivo en polaris.shopify.com
El sistema Polaris de Shopify muestra cómo se ve una paleta de marca totalmente tokenizada. La paleta se presenta como un árbol de tokens de rol: superficie, texto, icono, borde, interactivo, crítico, precaución, éxito, info, cada rol cargando valores para modo claro y oscuro. Polaris no deja espacio para que un diseñador se salte los tokens definidos. La paleta no es una vibra, es un contrato.
Qué robar: escribe los tokens primero como roles y resuelve a hex solo en el último paso. Si un nombre de token describe un color en vez de un rol, la paleta va a derivar.
El orden de construcción de 6 pasos
Construye la paleta en este orden y la mayoría de los errores comunes no pueden ocurrir físicamente.
- Escribe la lista de roles antes de la lista de colores. Ancla, superficies neutras, texto neutro, bordes neutros, éxito semántico, advertencia semántica, crítico semántico, info semántico, hover de estado, foco de estado, deshabilitado de estado. Haz esto primero en papel.
- Elige la dirección del ancla, no el hex final. Un tono, un objetivo aproximado de luminosidad, un objetivo aproximado de saturación. Mantenlo editable.
- Construye la escala de neutros después, afinada a ese ancla. 9 a 12 pasos. Prueba cada paso contra los demás. Neutros fríos para anclas frías, neutros cálidos para anclas cálidas.
- Agrega colores semánticos como un set, no como individuos. Éxito, advertencia, crítico, info. Tienen que sentirse como hermanos. Un verde solitario agregado después casi siempre se ve mal contra una paleta con la que no fue construido.
- Define los colores de estado por emparejamiento, no inventando nuevos. Hover suele ser un desplazamiento de uno o dos pasos en la escala. El foco suele ser un anillo perfilado en el tono del ancla. Deshabilitado suele ser un paso neutro específico.
- Compromete el hex final del ancla al último. Corre chequeos de contraste contra el neutro sobre el que se asienta. Afina el hermano de modo oscuro. Agrega pasos de hover y presionado. Solo ahora el ancla se vuelve un valor comprometido.
Por qué importa el orden
Cada capa restringe a la siguiente, y correr los pasos al revés es cómo las paletas terminan con colores que se pelean entre sí.
Elige el ancla al último y lo eliges con pleno conocimiento de la escala de neutros sobre la que debe vivir. Elígelo primero y cada decisión de neutro se convierte en un compromiso alrededor de un color decidido antes de que la interfaz existiera.
Para la teoría detrás de este sistema por capas, el pilar de teoría del color para diseñadores cubre el stack completo. Para las reglas de contraste detrás de los emparejamientos neutro-más-ancla, el contraste de color accesible se encarga de los detalles. Para paletas dentro de sistemas de diseño, la guía de sistemas de diseño tiene el panorama más amplio.
Los tres errores que matan a la mayoría de paletas
Los mismos tres errores aparecen en casi cada paleta de colores de marca fallida, y los tres vienen de elegir hex antes de elegir roles.
El error de muestras-de-logo. Cinco colores de paleta porque el logo tiene cinco colores. Nada aguas abajo necesitaba cinco. Sin neutros, sin nivel semántico, sin plan de modo oscuro. El modo de fallo más común.
La trampa de saturación. Todos los colores con la misma saturación, usualmente alta. Se ve vibrante en un moodboard, se siente agotador en una interfaz real. Las buenas paletas varían la saturación agresivamente.
El medio faltante. Un neutro claro, un neutro oscuro, nada en medio. Las interfaces reales viven en el medio de la escala. Una paleta con solo dos neutros se envía plana sin importar qué tan buena sea el ancla.
Arregla el proceso y los errores dejan de aparecer.
Preguntas frecuentes
¿Cuántos colores debería tener una paleta de colores de marca?
Menos anclas de las que crees, más neutros de los que crees. La mayoría de marcas que envían a producción tienen 1 ancla, 9-12 pasos neutros, 3-5 familias semánticas, colores de estado emparejados y un set paralelo para modo oscuro. La cuenta de tonos es pequeña. La cuenta de pasos es grande.
¿Necesito una paleta separada para modo oscuro?
No una paleta separada. Una resolución paralela de la misma paleta. Los roles se mantienen idénticos, solo los valores hex crudos cambian por tema. Si un diseñador está redibujando manualmente el modo oscuro desde cero, la paleta no se construyó como sistema.
¿Puedo usar un generador de paletas para construir una paleta de marca?
Un generador puede sembrar el ancla y una dirección aproximada de neutros. No puede construir el sistema. Cada paleta de producción en este artículo ha sido afinada a mano: neutros calentados o enfriados para ajustarse al ancla, familias semánticas ajustadas, valores de modo oscuro afinados a medida, colores de estado emparejados paso a paso.
Construye el sistema, no las muestras
Una paleta de colores de marca no son cinco colores en un moodboard. Es un sistema por capas con roles, una escala de neutros, señales semánticas, colores de estado y un plan de modo oscuro, construido en un orden específico.
Notion, Linear, Stripe, Vercel y Shopify no ganaron con muestras. Ganaron tratando la paleta como infraestructura: un ancla, una escala completa de neutros, un nivel semántico que significa algo, una capa de estado emparejada, modo oscuro diseñado desde el día uno.
Construye las capas, corre el orden de 6 pasos y deja de elegir colores de marca como si estuvieras decorando un cuarto.
Want a brand color palette built for everything past the logo? Brainy builds palettes with a real neutral scale, dark mode, and semantic tokens baked in.
Get Started
