La Regla 60-30-10 Está Rota: Sistemas de Color Modernos que Realmente Funcionan
La regla 60-30-10 es un atajo del diseño de interiores que los diseñadores siguen forzando en el trabajo de producto. Esto es lo que hacen los sistemas de color modernos en su lugar.
La regla 60-30-10 es lo primero que la mayoría de los diseñadores aprenden sobre el color, y es lo primero que la mayoría de los equipos de producto serios abandonan en silencio en el momento en que lanzan una interfaz real. Sesenta por ciento dominante, treinta por ciento secundario, diez por ciento acento.
Limpio. Citable. Completamente inviable en cuanto una marca tiene botones, estados deshabilitados, notificaciones, gráficos, modo oscuro y un sitio de documentación.
La regla no está equivocada. Simplemente está construida para un problema diferente. Lo que los mejores sistemas de diseño publicados usan en su lugar no es una proporción, sino un sistema de tokens basado en roles. Este artículo explica por qué la regla 60-30-10 falla, qué la reemplazó y cinco sistemas de diseño reales que están haciendo ese reemplazo a escala.
De Dónde Viene la Regla 60-30-10
La regla 60-30-10 es un atajo del diseño de interiores de mediados del siglo XX, adaptado al diseño digital por personas que necesitaban una regla que citar.
Su origen está en el diseño residencial. Una habitación tiene un color dominante (paredes), un color secundario (tapicería, cortinas) y un acento (cojines, arte). Sesenta, treinta, diez. Funciona para habitaciones porque las habitaciones son superficies estáticas únicas vistas por un solo humano a la vez, y permanecen del mismo color hasta que alguien las vuelve a pintar.
Ninguna de esas suposiciones sobrevive al contacto con el diseño de producto. Un producto digital no es una superficie estática. Son cientos de superficies, cada una con sus propios estados, temas y contextos. La regla nunca fue diseñada para ese mundo, y se nota.
Por Qué Se Desmorona en el Diseño de Producto
La regla 60-30-10 asume una sola superficie estática y un solo espectador, que es exactamente nada de cómo funciona el diseño de producto.
Las interfaces reales tienen botones deshabilitados, estados de hover, anillos de enfoque, banners de error, notificaciones de éxito, series de datos de gráficos, estados vacíos, esqueletos de carga y colores semánticos para acciones destructivas. Nada de esto se corresponde de forma limpia con "60, 30 o 10 por ciento del lienzo." No son lienzo. Son comportamiento.
La regla también colapsa en el momento en que se agrega el modo oscuro. El 60 por ciento de neutro claro ahora tiene que convertirse en un 60 por ciento de neutro oscuro, el 30 por ciento secundario tiene que cambiar de tono para mantener la jerarquía, y el 10 por ciento de acento generalmente tiene que aclararse o cambiar de matiz por completo para seguir siendo accesible. Ese no es un problema de proporción. Es un problema de sistema.
La accesibilidad es el clavo final. Las relaciones de contraste WCAG no se preocupan por qué porcentaje de tu página es azul. Les importa si el azul específico en el botón específico tiene suficiente contraste contra el fondo específico detrás de él. No se puede resolver ese problema con ratios de área.
Qué Usan los Sistemas de Color Modernos en su Lugar
Los sistemas que impulsan las mejores interfaces publicadas reemplazan las reglas de proporción con niveles de tokens basados en roles que describen lo que hace un color, no cuánto de él existe.
| Nivel | Qué hace | Ejemplos de tokens |
|---|---|---|
| Surface | Capas de fondo y elevaciones | bg-default, bg-subtle, bg-raised, bg-overlay |
| Content | Texto e iconos sobre superficies | text-default, text-muted, text-on-accent |
| Accent | Colores de marca y acción primaria | accent-primary, accent-primary-hover, accent-secondary |
| State | Estados interactivos y de retroalimentación | state-hover, state-focus, state-disabled |
| Semantic | Señales cargadas de significado | success, warning, critical, info |
Cada token describe un rol. "Este color es la superficie detrás de una tarjeta." "Este color es el texto encima del acento."
El diseñador nunca elige entre "secundario o acento en un 30 por ciento." Elige entre roles que el sistema ya define.
El beneficio se multiplica. Agregar modo oscuro se convierte en una cuestión de mapear los mismos tokens a diferentes valores en bruto, no de repintar la interfaz. Agregar un nuevo tema de marca se convierte en un único intercambio de tokens en el nivel de acento. La accesibilidad se aplica a nivel del token, no se verifica página por página.
Cinco Sistemas de Diseño Haciéndolo Bien
Estos se publican a escala con paletas basadas en roles que se mantienen en modo claro, modo oscuro y cada superficie que toca un usuario.
Material Design 3
Véalo en vivo en m3.material.io
Material 3 es el más explícito sobre el cambio. El sistema define roles de color como "primary", "on-primary", "surface", "on-surface", "inverse-primary", con cada rol pre-emparejado para el contraste. Los diseñadores no eligen colores. Eligen roles, y los tokens se resuelven a los valores correctos para el tema activo.
Qué robar: la convención de nomenclatura "on-". on-primary para texto e iconos que se asientan sobre una superficie primaria codifica la accesibilidad directamente en el nombre del token.
Radix Colors
Radix Colors incluye escalas de 12 pasos por tono, con cada paso pre-asignado a un rol (fondo de aplicación, fondo sutil, elemento de UI, hover, foco, activo, sólido, texto, texto de alto contraste). Sin lógica de proporción. Cada paso es un rol.
Qué robar: la escala numerada con anotaciones de rol. Le da a los diseñadores un vocabulario compartido que elimina el 90 por ciento del debate "¿qué gris uso?".
Shopify Polaris
Véalo en vivo en polaris.shopify.com
Polaris organiza el color por rol de componente: bg (superficie), text (contenido), icon, border e interactive. Cada uno tiene sub-roles para hover, pressed, disabled, selected. El sistema hace que sea estructuralmente difícil para un diseñador salir de los tokens definidos.
Qué robar: la agrupación por roles. Separar los tokens "border" de los tokens "surface" fuerza el uso intencional del color a nivel de componente.
Dos Marcas Publicándolo en Producción
Los documentos de sistemas de diseño anteriores son la referencia. Estas dos marcas son la prueba. Stripe y Linear ejecutan color basado en roles en la capa de producto todos los días, y ambas demuestran que el patrón se mantiene bajo uso real.
Stripe
Stripe publica una marca publicada, no solo un documento de sistema de diseño. El sitio público demuestra cómo se ve el color basado en roles en producción.
Casi todo son superficies neutras y contenido neutro. El morado es el nivel de acento y aparece exactamente donde viven las acciones, los enlaces y las señales de marca. Sin lógica de proporción. Lógica de rol.
Qué robar: la disciplina de mantener el nivel de acento delgado. El color de acento de Stripe se usa con moderación porque su rol está reservado. Si usas colores de acento para decoración, pierdes la capacidad de usarlos para la acción.
Linear
Linear se apoya más en los neutros que casi nadie que publica a escala. Todo el producto son capas de tokens de superficie oscura con un único tono de acento (morado) haciendo todo el trabajo de acción. Ninguna regla de proporción podría producir esto. Es un sistema puramente basado en roles donde el nivel "accent" es un color usado con contención, y el nivel "surface" es una pila de elevación completa.
Qué robar: la confianza para que el nivel de acento sea un solo color. Muchos sistemas de diseño nuevos sobre-asignan colores de acento. Linear demuestra que un acento bien elegido, usado de forma consistente, construye un reconocimiento más fuerte que tres acentos en proporción.
Cómo Construir una Paleta Basada en Roles
Construir una paleta de esta manera lleva más tiempo que elegir tres colores y asignar porcentajes, y se paga a sí misma la primera vez que un diseñador agrega el modo oscuro.
El proceso corre al revés de cómo la mayoría de los diseñadores aprendieron. En lugar de elegir colores primero y encontrar roles para ellos, se eligen roles primero y se encuentran colores para ellos.
- Define los niveles de rol. Comienza con surface, content, accent, state, semantic. La mayoría de los productos necesitan exactamente estos cinco. Algunos necesitan un sexto para la visualización de datos.
- Escribe los tokens antes de elegir los valores hex. Cada token debe describir un rol (
surface-subtle,content-muted,accent-primary-hover). Si el nombre de un token describe un color ("light-blue"), cámbiale el nombre. - Rellena la escala de neutros primero. La mayor parte de una interfaz real son neutros. Construye una escala completa (Radix usa 12 pasos por una razón) antes de tocar el color de marca.
- Agrega el nivel de acento al final. El color de acento es generalmente el único lugar donde la identidad de marca vive activamente. La contención aquí es todo el juego.
- Mapea el modo oscuro re-resolviendo tokens, no rediseñando. Si tu sistema está basado en roles, el modo oscuro es un intercambio de valores de tokens, no una revisión de color completa.
- Aplica la accesibilidad en la capa del token. Cada token
on-surfacedebe pasar 4.5:1 contra su superficie emparejada. Incorpora la verificación.
El atajo tentador es definir tres roles (primary, secondary, accent), declarar la victoria y publicar. Eso es la regla 60-30-10 disfrazada de tokens. Se desmorona exactamente en el mismo punto: el primer componente real.
Para el marco más amplio sobre cómo las decisiones de color se leen para los usuarios antes de que importe cualquiera de este trabajo de tokens, la psicología del color en el diseño cubre la capa de significado. Para ver cómo los sistemas de color se asientan dentro del contexto de sistema más amplio, la guía de sistemas de diseño tiene el cuadro completo.
Preguntas Frecuentes
¿La regla 60-30-10 es útil alguna vez?
Sí. El diseño de superficie única todavía se beneficia de ella. Carteles, publicaciones en redes sociales, secciones hero de marketing, packaging, spreads editoriales. En cualquier lugar donde el entregable sea un único lienzo visto una sola vez, la regla da un atajo de proporción rápido. El diseño de producto no es ese mundo.
¿Cuántos colores debe tener un sistema de diseño?
Menos valores hex en bruto de lo que piensas, organizados en más tokens de lo que piensas. La mayoría de los sistemas publicados tienen entre 8 y 12 pasos de neutro, entre 8 y 12 pasos de acento y entre 3 y 5 familias semánticas, todo resuelto en tokens basados en roles. El número de colores en bruto es pequeño. El número de roles es grande.
¿Cuál es la diferencia entre una paleta de colores y un sistema de color?
Una paleta de colores es un conjunto de colores. Un sistema de color es un conjunto de roles, un conjunto de reglas sobre cómo interactúan esos roles y un mapeo de roles a colores que puede cambiar por tema. Una paleta responde "qué colores hay en la marca". Un sistema responde "qué color es este elemento en este estado en este tema".
Deja de Medir el Color en Porcentajes
La regla 60-30-10 no es malvada. Simplemente está fuera de alcance.
El diseño de producto no es una habitación. Es un sistema de superficies, estados y roles que cambia a medida que el usuario se mueve a través de él.
Medir el color en porcentajes tiene tanto sentido como medir la tipografía por porcentaje de la página. No dices "el 30 por ciento del texto son encabezados". Dices "los encabezados son un rol con un estilo definido". El color tiene que funcionar de la misma manera.
Las marcas que publican el trabajo de identidad visual que mejor escala, Material, Radix, Polaris, Stripe, Linear, se dieron cuenta de esto y construyeron alrededor de ello. Copiar sus porcentajes se pierde el punto. Copiar su estructura de roles es todo el punto.
Si tu paleta actual son tres colores y una regla de asignación vaga, no tienes un sistema de color. Tienes una preferencia de color. Construye los niveles, nombra los roles y deja que los valores hex sean lo último sobre lo que discutes.
Need a color system built to scale, not just to swatch? Brainy builds palettes with token tiers, dark mode, and accessibility baked in.
Get Started
