# La regla 60 30 10: proporción de color para diseño y marca

[Canonical HTML page](https://gradiently.design/es/guide/60-30-10-rule)

La mayoría de las paletas fallan en la proporción, no en la elección. Tres números te dicen cuánto usar de cada color, y funcionan igual de bien en la pantalla de un móvil que en los salones de los que vienen.

## The short version

- 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.

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.

60 arena, 30 azul marino, 10 coral: `linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)`

La regla dibujada como una barra. El acento es pequeño, y justo por eso es lo primero que ves.

## 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 |

El acento funciona porque es escaso. Si lo duplicas, deja de ser un acento.

- 60 Arena: #f3efe6
- 30 Azul puerto: #1f3a5f
- 10 Coral: #e76f51

Una paleta escrita con sus proporciones. Anotar el porcentaje junto a cada color evita que un equipo use el coral en todas partes.

## 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.

Una publicación vertical de evento para una feria de estampación, con fondo tranquilo, titular fuerte y un pequeño acento en la hora

Campo dominante, texto secundario y el acento guardado para la línea de la fecha.

El mismo diseño de la feria de estampación en una diapositiva panorámica de 16 por 9 con el mismo equilibrio de colores

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](https://gradiently.design/es/guide/presentation-backgrounds) 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.

```css
: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; }
```

Nombrar los colores por su papel y no por su tono hace que las proporciones sean difíciles de romper. El texto oscuro sobre el botón coral mide unos 6:1.

> **La prueba de entrecerrar los ojos** Entrecierra los ojos ante tu diseño terminado hasta que los detalles se difuminen. Deberías ver un color grande, un segundo color claro y un pequeño punto brillante. Si ves tres bloques iguales, o el acento esparcido por todo el diseño, devuelve las proporciones hacia 60, 30 y 10.

En una marca, escribe las proporciones en tu [guía de estilo de marca](https://gradiently.design/es/guide/brand-style-guide) 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.

- Tercios iguales: sin color dominante: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)`
- 60-30-10: manda el azul, brilla el coral: `linear-gradient(160deg, #13253f 0%, #1f3a5f 50%, #4f7cac 78%, #e76f51 100%)`
- Oscuro: tinta, pizarra, oro: `linear-gradient(90deg, #0f172a 0% 60%, #475569 60% 90%, #fbbf24 90% 100%)`
- Suave: salvia, crema, ciruela: `linear-gradient(90deg, #8fa98f 0% 60%, #f5efe0 60% 90%, #6b2d5c 90% 100%)`

La primera mezcla da a los tres colores el mismo peso y resulta recargada. La segunda mantiene la misma idea en proporción. Las dos últimas son esquemas 60-30-10 listos para usar.

## Cuándo doblar o romper la regla

### Rómpela cuando

- Trabajas con un solo tono: un [esquema monocromático](https://gradiently.design/es/guide/monochromatic-color-scheme) 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](https://gradiently.design/es/guide/how-to-choose-brand-colors) y [los fundamentos de la teoría del color](https://gradiently.design/es/guide/color-theory-basics).

## FAQ

### ¿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.