Primario, secundario, acento: color basado en roles

Primario, secundario y acento son roles que un color desempeña en un producto, no tipos de color — y la jerarquía es más corta de lo que sugiere el vocabulario. Una paleta tiene exactamente un primario (el color de marca que identifica el producto y marca sus acciones: botones, enlaces, foco), cero o más secundarios (tonos de apoyo para ilustración, datos y superficies de marketing) y un acento — que no es una tercera clase de color sino un uso: el trabajo de resaltar, normalmente asignado al propio primario o a un secundario. En torno a estos se sitúa el reparto de apoyo fijo que toda paleta lleva: una escala de neutros que se ocupa de las superficies y el texto, y los cuatro colores funcionales que se ocupan de éxito, advertencia, error e info.

El vocabulario se enredó porque los términos llegaron desde tradiciones distintas — identidad de marca, diseño de interiores, bibliotecas de componentes — y cada una los usaba de forma ligeramente distinta. Desenredarlos es sobre todo cuestión de preguntar qué trabajo cumple cada color, que es la pregunta que recorre nuestra guía de escalas de color.

¿Qué hace realmente cada rol?

Primario (el color de marca). Exactamente uno. Identifica el producto y marca la interacción: botones, enlaces, anillos de foco, estados seleccionados. El “exactamente uno” es estructural, no estilístico — cuando dos tonos compiten por el color de acción, cada pantalla tiene que renegociar cuál significa “pulsa aquí”. En la interfaz de paleta de Scale Composer el grupo está literalmente dimensionado para ello: Marca contiene un color.

Secundarios. Cero o más tonos de apoyo, y la nota honesta primero: muchas interfaces sólidas no tienen ninguno. Un color de marca más una escala de neutros más los cuatro funcionales cubre un producto completo — cada botón, formulario, estado y nivel de texto queda cubierto. Los secundarios se ganan su lugar en superficies que el primario no puede cubrir por sí solo: series categóricas de datos, ilustración, secciones de marketing, áreas de submarca. También son donde las paletas se hinchan — tonos añadidos porque la página de paleta parecía vacía y que luego vagan por el producto en busca de un trabajo. En Scale Composer son el grupo abierto, que se añade mediante el +.

Acento. Un uso, no un color. En una paleta de un solo color, el primario es el acento; donde existe un tono de acento distinto, es un secundario al que se le ha dado el trabajo de resaltar. Tratar el acento como un rol disuelve la preocupación de “aún tenemos que elegir nuestro color de acento” — puede que ya lo tengas.

Neutros y funcionales. El reparto fijo: la escala de neutros carga con la mayoría de los píxeles, y los cuatro propósitos funcionales están ligados a la convención (un grupo fijo en Scale Composer). Ninguno es opcional, y ninguno se elige realmente tanto como se ajusta.

¿Cuántos colores necesita realmente una paleta?

Menos de los que sugieren las páginas de paleta — y existe una regla de proporción útil, siempre que se maneje como lo que es. La regla 60-30-10 es una heurística prestada del diseño de interiores: una parte dominante, una parte secundaria y una pequeña parte de acento. Trasladada con honestidad a la interfaz, el reparto se inclina más de lo que el nombre implica: los neutros se llevan el ~60 y normalmente mucho más — cerca del 90 % de los píxeles en un producto denso en texto — el color de marca se lleva el ~10 como puntuación, y la banda intermedia es todo lo demás junto: secundarios donde existen, tintes, momentos funcionales.

Las proporciones no son una ley; el orden es la clave. El ojo necesita un campo tranquilo dominante para que la figura se lea contra el fondo, una familia subordinada y un resalte escaso — la escasez es lo que hace que un acento se lea como un acento. Una paleta donde tres tonos reclaman cada uno el 30 % no tiene jerarquía que la atención pueda seguir.

Abre la anatomía de roles de una paleta completa en Scale Composer — los cuatro grupos en una sola vista: el único hueco de marca, la fila de secundarios con su +, la escala de neutros y los cuatro funcionales fijos.

¿Cómo eliges bien los secundarios?

El fallo habitual es elegir por sensación: un turquesa porque parece fresco, un coral porque un moodboard tenía uno. Los colores pueden ser agradables, pero nada los une a la paleta — son invitados, no familia. La alternativa es derivar candidatos de la propia geometría del primario, de modo que la relación sea estructural antes que estética. A partir de un primario, Scale Composer propone cuatro:

Vale la pena leer la geometría: dos propuestas son vecinas cercanas del primario (tinte, profundidad) — armonía por parentesco — y dos se sitúan al otro lado de la rueda, flanqueando el complementario exacto en ≈83° en lugar de aterrizar sobre él, ya que un complementario puro tiende a vibrar contra su pareja. La teoría del color clásica conoce esa vecindad como territorio complementario dividido. Las propuestas son candidatas, no conclusiones: un diseñador cura — toma el ámbar y descarta el resto, o no toma ninguna. Cada secundario que sobrevive se convierte en una rampa completa con la misma maquinaria que la de la marca: curva de luminosidad, perfil de croma, roles derivados.

¿Cómo son las composiciones de paleta reales?

Tres composiciones, de la más pequeña a la mayor. El recuento de rampas asume que cada color es una escala completa: una de marca + una de neutros + cuatro funcionales = seis rampas antes de que exista ningún secundario.

La recomendación se desprende de la tabla: empieza en mínimo y añade un secundario cuando una superficie real lo exija — un gráfico con cuatro series es una razón; una página de paleta que parece vacía no lo es. Un secundario que llega con un trabajo se mantiene coherente; uno que llega por sensación acaba buscándose uno.

El + en el grupo de secundarios es donde el modelo de roles se vuelve concreto. Añade un secundario y derívalo de tu primario — las cuatro propuestas aparecen con su geometría de tono. Conserva uno solo si puedes nombrar la superficie que va a poseer.