La versión corta
- La regla 60 30 10 dice que un diseño equilibrado usa un color dominante en cerca del 60% del espacio, un color secundario en cerca del 30% y un acento en cerca del 10%.
- La regla viene del interiorismo, donde las paredes, el mobiliario y los complementos caen de forma natural en esos tres papeles.
- En pantalla, el 60% suele ser el fondo, el 30% lleva paneles, formas o texto, y el 10% se reserva para lo único que quieres que la gente vea o toque.
- En un degradado, la regla decide cuánto del campo ocupa cada color, por eso el acento debe aparecer en una zona pequeña y no en una banda entera.
- Los números son un punto de partida: los neutros pueden contar como el 60%, y muchos diseños sólidos se acercan más a 70-25-5 o a 90-10.
En esta página
La regla 60 30 10, que suele escribirse 60-30-10, es una guía sencilla de proporción de color: usa un color dominante en cerca del 60% de un diseño, un color secundario en cerca del 30% y un acento en el 10% restante. Viene del interiorismo, donde las paredes, los muebles y los complementos encajan solos en esos papeles. Funciona igual de bien para publicaciones en redes, diapositivas, webs y paletas de marca, porque evita que todos los colores compitan por la misma atención.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)Qué hace cada proporción
Cada proporción tiene su trabajo. El 60% marca el ambiente y suele ser tranquilo: un fondo, una base, una pared. El 30% aporta estructura y contraste, y lleva paneles, formas o texto grande. El 10% es adonde va el ojo primero, así que le corresponde lo más importante: un botón, un precio, una fecha, un logotipo.
| Proporción | Papel | Color típico | Dónde va |
|---|---|---|---|
| 60% | Dominante | Tranquilo: un neutro, un tono pálido o un oscuro profundo | Fondos, grandes superficies, base de la página |
| 30% | Secundario | Con contraste, pero sin gritar | Paneles, tarjetas, texto grande, zonas de imagen |
| 10% | Acento | El color más saturado que tengas | Botones, precios, palabras clave, formas pequeñas |
La regla 60-30-10 en una publicación social
En una publicación, el color dominante es el fondo, el secundario es el titular o una forma detrás de él, y el acento es un detalle pequeño, como una fecha, un precio o una sola palabra subrayada. El error habitual es darle el acento a todo el titular. Entonces el 30% de la publicación grita, y nada destaca porque todo lo hace.
Campo dominante, texto secundario y el acento guardado para la línea de la fecha.
Las mismas proporciones en una diapositiva panorámica. Las proporciones se mantienen aunque cambie la forma.
Aplicarla a diapositivas y webs
En las diapositivas, fija el 60% una vez, como fondo de todas, y mantenlo. Usa el 30% para títulos, gráficos y marcos de imagen. Reserva el 10% para el único número o la única palabra por diapositiva que el público debe recordar. Los fondos para presentaciones profundizan en bases que no compiten con el contenido.
En una web, el fondo de la página y las secciones grandes son el 60%; la navegación, las tarjetas, el pie y el texto del cuerpo son el 30%; y el 10% va para las llamadas a la acción y los enlaces. Si tu botón principal tiene el mismo color que tus títulos, a la página no le queda ningún acento para guiar a la gente.
:root {
--dominant: #f3efe6; /* 60%: page and section backgrounds */
--secondary: #1f3a5f; /* 30%: headings, cards, navigation, footer */
--accent: #e76f51; /* 10%: buttons, links, key numbers */
}
body { background: var(--dominant); color: var(--secondary); }
.card { background: var(--secondary); color: var(--dominant); }
.button { background: var(--accent); color: #1a0f0b; }En una marca, escribe las proporciones en tu guía de estilo de marca junto a los códigos hex. Una paleta sin proporciones invita a cada diseñador a elegir su color favorito para el fondo, y en un mes la marca parece tres marcas.
La regla 60 30 10 en un degradado
Los degradados rompen las proporciones con facilidad, porque una mezcla uniforme da a cada color la misma parte. Aplica la regla moviendo las paradas: deja que el color dominante ocupe la mayor parte del campo, fúndelo con el secundario a lo largo de un tercio y mete el acento solo en un borde o en un pequeño resplandor.
Cuándo doblar o romper la regla
Rómpela cuando
- Trabajas con un solo tono: un esquema monocromático se acerca más a 60-30-10 en luminosidad que en tono
- El diseño es sobre todo texto sobre un neutro, donde 90-10 queda más limpio
- Una foto aporta su propio color y tu paleta solo la enmarca
- El color de marca debe dominar, como un póster en rojo de marca completo
Mantenla cuando
- Los colores empiezan a competir y nada destaca
- Un equipo comparte una paleta y necesita una regla que seguir
- Tienes tres o más colores fuertes que equilibrar
- Los botones y los números clave se pierden
Los números son aproximados. El espacio en blanco cuenta. Neutros como el blanco roto, el carbón y la arena pueden ser tu 60%, con dos colores de verdad repartiéndose el resto. Lo que importa es el orden: un líder claro, un apoyo y un acento escaso. Para elegir los colores en sí, mira cómo elegir los colores de marca y los fundamentos de la teoría del color.
Preguntas frecuentes
¿Qué es la regla 60 30 10?
Es una guía de proporción de color: cerca del 60% de un diseño en un color dominante, el 30% en un color secundario y el 10% en un color de acento.
¿De dónde viene la regla 60-30-10?
Es una regla práctica de larga tradición en el interiorismo, donde las paredes, el mobiliario y los complementos ocupan de forma natural las tres proporciones.
¿Cuenta el blanco en la regla 60 30 10?
Sí. Los neutros como el blanco, el blanco roto, la arena o el carbón suelen formar el 60% dominante, y dejan el 30% y el 10% para colores de verdad.
¿De qué color debe ser el acento del 10%?
Normalmente de tu color más saturado, usado en lo único que quieres que se vea primero, como un botón, un precio o una fecha.
¿Cómo uso la regla 60-30-10 en un degradado?
Mueve las paradas de color para que el dominante cubra la mayor parte del campo, el secundario se funda a lo largo de cerca de un tercio y el acento aparezca solo en una zona pequeña o en un borde.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
