La regla 60-30-10: equilibrar el color en el diseño

La primera vez que la regla 60-30-10 me hizo clic de verdad, estaba mirando un panel de control que había construido y que se veía recargado de una forma que no sabía explicar. La paleta estaba bien. Los colores eran armoniosos, sacados directamente de la rueda. Pero la pantalla se sentía ruidosa, como si todos en la sala hablaran a la vez. El problema no era qué colores había elegido. Era cuánto de cada uno había usado.

Esa distinción es la esencia entera de la regla 60-30-10. No dice casi nada sobre el tono y casi todo sobre la proporción: aproximadamente el 60 % de tu diseño es un color dominante, el 30 % es un color secundario de apoyo y el 10 % es un acento. Acierta con esas proporciones y hasta una paleta mediocre se lee como intencionada. Falla y la armonía más cuidadosamente afinada seguirá sintiéndose caótica.

De dónde viene la regla

La regla 60-30-10 se tomó prestada del diseño de interiores, donde los decoradores la han usado durante décadas para equilibrar una habitación. El reparto clásico: el 60 % va a las paredes, alrededor del 30 % a la tapicería y los muebles grandes, y el 10 % final a los accesorios: un cojín, un jarrón, el cuadro de la pared. Entra en una habitación bien diseñada y normalmente no sabrás articular por qué se siente tranquila, pero las proporciones están haciendo un trabajo silencioso de fondo.

Los estilistas de moda usan la misma lógica (traje, camisa, pañuelo de bolsillo) y, en algún momento, migró al diseño gráfico y web. El medio cambió; el principio no. Le das a cada color un papel definido y una cantidad definida de espacio, y el equilibrio surge casi automáticamente.

Cómo se traslada al diseño UI y web

Esta es la traducción que uso de verdad cuando me siento a construir una interfaz.

• 60 % — el color dominante. Este es tu lienzo: fondos de página, superficies grandes, el espacio vacío sobre el que se asienta tu contenido. Marca el ambiente general y, lo crucial, suele ser el color que la gente no nota. En la mayoría de las buenas interfaces el dominante es un neutro —un blanco, un blanco roto, un gris claro o, en modo oscuro, un casi negro como #0F1115—. Los neutros son dominantes porque son generosos; dejan que los demás colores carguen con la personalidad sin pelearse con ellos.
• 30 % — el color secundario. Este es el reparto de apoyo: tarjetas, barras laterales, barras de navegación, divisores de sección, superficies secundarias. Aporta estructura y una segunda capa de contraste frente al dominante, pero nunca exige atención. Piénsalo como los muebles de la habitación.
• 10 % — el color de acento. Aquí es donde vive la acción: botones principales, enlaces, estados activos, distintivos, la única serie de un gráfico que quieres que la gente siga. Es el cojín. Toda la razón por la que funciona es la escasez.

Ese último punto es el que la mayoría se pierde, así que déjame decirlo con claridad. El acento no es poderoso por el color. Es poderoso porque hay muy poco de él. Cuando tu azul aparece solo en el botón principal y en el elemento de navegación activo, el ojo de un usuario aprende en unos dos segundos que el azul significa actúa aquí. En el momento en que el azul aparece también en encabezados, iconos, tres bordes de tarjeta y un degradado de fondo, deja de significar nada. Has gastado la señal.

Un ejemplo trabajado

Déjame construir uno real para que las proporciones no sean abstractas. Digamos que estoy diseñando un panel de control SaaS y abro el generador de paletas de color, elijo un azul tranquilo como base y uso las armonías monocromática y complementaria para sacar tonos de apoyo.

• Dominante (60 %): #F7F8FA, un gris frío casi blanco. Es el fondo de página y el espacio vacío dentro de las tarjetas. Apenas lo registras, que es exactamente lo correcto.
• Secundario (30 %): #1E293B, un pizarra profundo. Carga con la navegación superior, la barra lateral, los encabezados y el texto de cuerpo. Fíjate en que "secundario" no tiene por qué ser un color vivo: aquí es un neutro oscuro haciendo un fuerte trabajo estructural. Junto con el dominante ya es una interfaz completa y usable.
• Acento (10 %): #2563EB, un azul firme, reservado para el CTA principal, los enlaces y el estado de menú activo. Nada más lo recibe.

Pasa ese azul por un verificador de contraste frente al fondo blanco y estarás cómodamente por encima del umbral AA de la WCAG de 4.5:1 para texto normal —vale la pena confirmarlo, porque un acento que falla el contraste es un acento que falla en su único cometido—. (Más sobre esto en Las proporciones de contraste WCAG explicadas.) El verificador integrado en la herramienta te lo señalará antes de que se publique.

Lo que sorprende a la mayoría de esta paleta es lo poco color que en realidad contiene. Dos neutros y un azul. Eso es la regla 60-30-10 funcionando como se pretende: la contención se lee como pulcritud.

Por qué la proporción gana a la elección del tono

Voy a hacer una afirmación algo contraria: para una interfaz, acertar con las proporciones importa más que acertar con los tonos exactos. Puedes cambiar mi acento #2563EB por un verde azulado, un violeta o un coral cálido y el diseño seguirá sintiéndose compuesto, porque la estructura aguanta. Pero coge una paleta de tres colores bellamente elegida y perfectamente armoniosa y aplícala en tercios iguales, y parecerá una señal de aparcamiento.

Esto es liberador una vez que lo interiorizas. Significa que un principiante no necesita un ojo perfecto para el color: necesita disciplina sobre cuánto de cada color desplegar. Elige cualquier armonía sólida (la análoga y la complementaria dividida son ambas puntos de partida indulgentes; consulta Entender la armonía de color en diseño UI para saber cómo elegir), luego asigna papeles y raciona el acento sin piedad.

El Nielsen Norman Group hace una observación relacionada en su trabajo sobre usar el color para mejorar el diseño: el color comunica mejor su significado cuando se usa con moderación y consistencia. El reparto 60-30-10 es, en esencia, una receta práctica para esa moderación.

Los errores que veo más a menudo

Sin un dominante claro. Este es el problema del panel con el que abría. Tres colores con un peso casi igual, ninguno de ellos claramente el lienzo, y el ojo no tiene dónde descansar. Solución: elige un color (normalmente un neutro) y compromételo a aproximadamente el 60 % de la superficie antes de colocar nada más.

Abuso del acento. El fallo más habitual con diferencia. El acento se cuela en los encabezados, luego en los iconos, luego en unos cuantos bordes, y en una tarde el diseño ya no tiene punto focal. Una comprobación rápida útil: si puedes señalar enseguida más de un puñado de sitios distintos donde aparece tu acento en una pantalla dada, probablemente lo has gastado de más. Recórtalo hasta dejarlo en los verdaderos momentos interactivos.

Tratar los números como un dogma. Son una proporción, no una medición. Nadie está contando píxeles. 60-30-10 es una abreviatura de "uno dominante, uno de apoyo, uno poco frecuente". Si tu reparto cae más cerca de 70-20-10, perfecto. Lo que importa es la jerarquía, no el decimal.

Olvidar que la regla escala de forma recursiva. Dentro de una sola tarjeta puedes aplicar las mismas proporciones otra vez: mayoritariamente superficie, algo de detalle estructural, un toque de acento. Y la regla viaja al modo oscuro con limpieza: tu 60 % simplemente pasa a ser un neutro oscuro en lugar de uno claro, con acentos que a menudo necesitan una ligera desaturación para evitar que resplandezcan. Si vas por ahí, Buenas prácticas para paletas de color en modo oscuro profundiza en los ajustes.

Convertirlo en un método repetible

Este es el flujo de trabajo que le pasaría a un diseñador júnior.

• Elige una armonía primero. Abre la rueda de color, escoge un tono base y genera un conjunto relacionado: análogo para calma, complementario para fuerza. No le des demasiadas vueltas aún a los hex exactos.
• Asigna el dominante. Decide tu 60 %. Nueve de cada diez veces es un neutro. Claro por defecto, oscuro para modo oscuro.
• Asigna el secundario. Elige el 30 % que aporta estructura: a menudo un segundo neutro o una versión apagada de tu color de marca. Confirma que el dominante y el secundario por sí solos forman un diseño funcional.
• Raciona el acento. Saca un color vivo para el 10 %. Comprueba su contraste frente a las superficies que va a tocar. Y luego protégelo: cada vez que sientas la tentación de reutilizarlo, pregúntate si ese elemento es genuinamente interactivo.
• Audita entornando los ojos. Da un paso atrás, desenfoca la vista y mira la pantalla. Deberías ver un campo tranquilo con uno o dos puntos brillantes tirando de tu mirada. Si el conjunto entero reluce, tu acento se ha filtrado.

La razón por la que esta regla ha sobrevivido a un salto de los salones a los paneles de control es que resuelve un problema que la gente siente antes de poder nombrarlo. El color en un diseño no va realmente de gusto: va de presupuesto. La regla 60-30-10 no es más que una forma sensata de gastarlo. Si quieres poner a prueba un conjunto de tonos antes de comprometerte, suéltalos en el generador de paletas de color, comprueba el contraste y luego hazte la pregunta más difícil que la herramienta no puede responder por ti: no son estos los colores correctos, sino cuánto de cada uno estoy a punto de usar.