La regla 60-30-10 está rota: sistemas de color modernos que sí funcionan
La regla 60-30-10 es un atajo de decoración de interiores. Los sistemas de color modernos usan tokens basados en roles. Aquí está el modelo que escala.
La regla 60-30-10 es lo primero que la mayoría de los diseñadores aprenden sobre color, y es lo primero que los equipos de producto serios abandonan discretamente en el momento en que lanzan una interfaz real. Sesenta por ciento dominante, treinta por ciento secundario, diez por ciento de acento.
Limpia. Citable. Completamente inviable cuando una marca tiene botones, estados deshabilitados, notificaciones, gráficos, modo oscuro y un sitio de documentación.
La regla no está mal. Simplemente está hecha para un problema distinto. Lo que usan los sistemas de diseño mejor implementados no es una proporción, es un sistema de tokens basado en roles. Este artículo explica por qué falla 60-30-10, qué la reemplazó y cinco sistemas de diseño reales que lo aplican a escala.
De dónde viene la regla 60-30-10
La regla 60-30-10 es un atajo de decoración de interiores de mediados del siglo XX, adaptado al diseño digital por gente que necesitaba una regla que citar.
Su origen es 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 únicas y estáticas vistas por un solo humano a la vez, y mantienen el mismo color hasta que alguien las repinta.
Ninguno de esos supuestos 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 se diseñó para ese mundo y se nota.
Por qué se rompe en el diseño de producto
La regla 60-30-10 asume una sola superficie estática y un solo espectador, que es exactamente lo contrario de cómo funciona el diseño de producto.
Las interfaces reales tienen botones deshabilitados, estados hover, anillos de foco, banners de error, toasts de éxito, series de datos en gráficos, estados vacíos, skeletons de carga y colores semánticos para acciones destructivas. Nada de eso se mapea limpiamente a "60, 30 o 10 por ciento del lienzo". No son lienzo. Son comportamiento.
La regla también colapsa en el momento en que añades modo oscuro. Tu 60 por ciento de neutro claro ahora tiene que convertirse en un 60 por ciento de neutro oscuro, tu 30 por ciento secundario tiene que cambiar de tono para mantener la jerarquía, y tu 10 por ciento de acento normalmente tiene que aclararse o cambiar de matiz por completo para seguir siendo accesible. Eso no es un problema de proporción. Es un problema de sistema.
La accesibilidad es el clavo final. Las ratios de contraste de WCAG no se preocupan por qué porcentaje de tu página es azul. Se preocupan por si el azul específico en el botón específico tiene suficiente contraste contra el fondo específico detrás de él. No puedes resolver ese problema con proporciones de espacio en pantalla.
Qué usan en su lugar los sistemas de color modernos
Los sistemas que impulsan las mejores interfaces en producción reemplazan las reglas de proporción con niveles de tokens basados en roles que describen lo que hace un color, no cuánto existe de él.
| Nivel | Qué hace | Ejemplos de tokens |
|---|---|---|
| Superficie | Capas de fondo y elevaciones | bg-default, bg-subtle, bg-raised, bg-overlay |
| Contenido | Texto e iconos sobre superficies | text-default, text-muted, text-on-accent |
| Acento | Colores de marca y acción primaria | accent-primary, accent-primary-hover, accent-secondary |
| Estado | Estados interactivos y de feedback | state-hover, state-focus, state-disabled |
| Semántico | Señales con 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 sobre el acento."
El diseñador nunca elige entre "secundario o acento al 30 por ciento". Elige entre roles que el sistema ya define.
El beneficio se acumula. Añadir modo oscuro se convierte en mapear los mismos tokens a valores crudos distintos, no en repintar la interfaz. Añadir un nuevo tema de marca se convierte en un único cambio de token en el nivel de acento. La accesibilidad se impone a nivel de token, no se revisa página por página.
Cinco sistemas de diseño haciéndolo bien
Estos están operando a escala con paletas basadas en roles que se sostienen en modo claro, modo oscuro y cada superficie que el usuario toca.
Material Design 3
Vérlo 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 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 nombres "on-". on-primary para texto e iconos sobre una superficie primary codifica la accesibilidad directamente en el nombre del token.
Radix Colors
Radix Colors ofrece escalas de 12 pasos por matiz, con cada paso pre-asignado a un rol (fondo de app, fondo sutil, elemento de UI, hover, focus, active, 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. Da a los diseñadores un vocabulario compartido que elimina el 90 por ciento del debate "qué gris uso".
Shopify Polaris
Vérlo 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 subroles para hover, pressed, disabled, selected. El sistema hace estructuralmente difícil que un diseñador alcance fuera de los tokens definidos.
Qué robar: la agrupación por rol. Separar tokens de "border" de los de "surface" obliga a un uso intencional del color a nivel de componente.
Dos marcas aplicándolo en producción
La documentación de los sistemas de diseño de arriba es la referencia. Estas dos marcas son la prueba. Stripe y Linear operan color basado en roles a nivel de producto todos los días, y ambas demuestran que el patrón se mantiene bajo uso real.
Stripe
Stripe despliega una marca en producción, no solo una documentación 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, enlaces y 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 acción.
Linear
Linear se apoya en los neutros más que casi cualquier otro que opere a escala. Todo el producto son capas de tokens de superficie oscura con un único matiz 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 de "acento" es un color usado con moderación, y el nivel de "superficie" es una pila completa de elevaciones.
Qué robar: la confianza para dejar que el nivel de acento sea un solo color. Muchos sistemas de diseño nuevos sobreasignan colores de acento. Linear demuestra que un acento bien elegido, usado consistentemente, 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 sola la primera vez que un diseñador añade modo oscuro.
El proceso corre al revés de como la mayoría de los diseñadores aprendieron. En lugar de elegir colores primero y buscar roles para ellos, eliges roles primero y buscas colores para ellos.
- Define los niveles de rol. Empieza con superficie, contenido, acento, estado, semántico. La mayoría de los productos necesitan exactamente estos cinco. Algunos necesitan un sexto para 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"), renómbralo. - Completa primero la escala neutra. La mayoría 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.
- Añade el nivel de acento al final. El color de acento suele ser el único lugar donde la identidad de marca vive activamente. La moderació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 cambio de valor de token, no una revisión de color.
- Impón la accesibilidad en la capa de tokens. Cada token
on-surfacedebe pasar 4.5:1 contra su superficie emparejada. Deja el chequeo integrado.
El atajo tentador es definir tres roles (primary, secondary, accent), declarar victoria y lanzar. Esa es la regla 60-30-10 con disfraz de tokens. Se rompe exactamente en el mismo punto: el primer componente real.
Para el marco más amplio sobre cómo las decisiones de color se leen por los usuarios antes de que cualquier trabajo de tokens importe, psicología del color en diseño cubre la capa de significado. Para cómo los sistemas de color encajan dentro del contexto de sistema más amplio, la guía de sistemas de diseño tiene la imagen completa.
Preguntas frecuentes
¿Es útil la regla 60-30-10 alguna vez?
Sí. El diseño de superficie única todavía se beneficia de ella. Carteles, posts sociales, secciones hero de marketing, packaging, maquetas editoriales. En cualquier lugar donde el entregable es un único lienzo visto una vez, la regla da un atajo de proporción rápido. El diseño de producto no es ese mundo.
¿Cuántos colores debería tener un sistema de diseño?
Menos valores hex crudos de los que piensas, organizados en más tokens de los que piensas. La mayoría de los sistemas en producción tienen de 8 a 12 pasos neutros, de 8 a 12 pasos de acento y de 3 a 5 familias semánticas, todos resueltos en tokens basados en roles. La cuenta de color crudo es pequeña. La cuenta 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 están en la marca". Un sistema responde "qué color es este elemento en este estado en este tema".
Deja de medir color en porcentajes
La regla 60-30-10 no es mala. 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 por él.
Medir color en porcentajes tiene tanto sentido como medir tipografía por porcentaje de la página. No dices "30 por ciento del texto son títulos". Dices "los títulos son un rol con un estilo definido". El color tiene que funcionar igual.
Las marcas que lanzan el trabajo de identidad visual más escalable, Material, Radix, Polaris, Stripe, Linear, entendieron esto y construyeron alrededor. Copiar sus porcentajes pierde el punto. Copiar su estructura de roles es todo el punto.
Si tu paleta actual son tres colores y una regla vaga de asignación, 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 que discutas.
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
