La regla 60/30/10
¿Alguna vez te has preguntado cómo utilizar el color de manera efectiva en tus proyectos de diseño para crear un aspecto fluido, maduro y bien pensado, que no sea ni molesto ni distractor?
La respuesta se encuentra en una pauta llamada regla 60-30-10.
¿Qué es la regla regla 60 30 10 y en qué consiste?
La regla 60-30-10 es una técnica de diseño que distribuye colores en un espacio, usando 60% para el color dominante, 30% para el secundario, y 10% para un acento, creando armonía visual.
Esta distribución proporcional de colores ayuda a crear un diseño equilibrado y visualmente atractivo.
60% – Color neutro o base
El color base generalmente es neutro, como un color crema, blanco o un color oscuro si estás diseñando una interfaz oscura, aunque no siempre se sigue esta pauta, especialmente en diseño de interiores, en donde el color base puede ser cualquiera.
Este color cubre la mayoría de tu diseño y establece el tono general.
30% – Color primario
El color primario, a menudo un color de marca, es importante pero menos dominante que el color base.
Este color debe usarse para elementos esenciales dentro del diseño.
10% – Color secundario o color de llamada a la acción
El color secundario o de llamada a la acción debe usarse con moderación, puesto que capta la atención del usuario e indica áreas donde deben interactuar, como botones, información importante o elementos destacados, en el caso del diseño de interiores.
¿Cómo ajustar esta regla a tu diseño?
Si bien la regla 60 30 10 es una pauta útil, es crucial recordar que se puede ajustar para adaptarse a las necesidades de cada diseño. Algunos ejemplos de implementación exitosa y adaptación creativa de la regla incluyen:
- Usar un 60% de un color brillante en lugar de un color base neutro para lograr un aspecto más vibrante.
- Emplear degradados, tonos e interfaces oscuras mientras se siguen las proporciones de la regla.
- Integrar imágenes en tu diseño sin alterar el equilibrio de color.
Regla 60 30 10 en diseño web
Esta “regla” funciona especialmente bien en diseño web. Por ejemplo, podrías utilizar el color secundario como fondo si deseas un diseño más claro.
Luego, los encabezados podrían ser de color azul (color primario) y el color de acento podría utilizarse en llamadas a la acción, como botones o elementos emergentes, que requieran captar la atención del usuario de forma rápida y eficiente.
Para ampliar la paleta de colores
A menudo, se quiere trabajar con diferentes tonos del mismo color. En este caso, es recomendable mantener las proporciones de la regla 60-30-10, agrupando los colores por tono y relación.
Por ejemplo, si se tienen varios tonos de azul y de marrón, agrupa los colores fríos (azules) y los cálidos (marrones) en función de sus respectivos porcentajes. Los colores de acento también pueden agruparse en función de sus tonos.
¿Se tiene que seguir la regla 60-30-10?
Si te consideras una persona audaz en el ámbito del diseño, que prefiere crear sus propias reglas de diseño y combinar los colores a tu modo, o si simplemente quieres tener más de tres opciones para expresar tus ideas cromáticas, existen formas de lograrlo manteniendo un equilibrio de color en tu diseño.
Lo fundamental es conocer las reglas antes de modificarlas, para comprender el concepto básico que sustenta la idea. Una vez que es entendida la esencia de la regla, será más sencillo adaptar el uso del color de acuerdo a tus preferencias personales.
Ampliación de la regla con un elemento adicional
Un ejemplo de enfoque creativo en relación con esta regla es añadir un 10 por ciento adicional a la ecuación; muy útil si se tiene una paleta de cuatro colores.
Al hacerlo, se obtiene un esquema de diseño con 110 por ciento de color, que se distribuye de la siguiente manera:
- 60% para el color principal.
- 30% para el color secundario.
- Dos colores de acento, cada uno con un 10%, en vez de uno solo.
Aplicación de la regla 60-30-10 en paletas monocromáticas
Un esquema de color monocromático genera un ambiente relajante, pero la mayoría de los nuevos diseñadores no suelen imaginar cómo se aplica esta regla a diseños que siguen una paleta monocromática; aquí también es posible aplicarla.
Al diseñar un esquema de color monocromático, los colores principales, secundarios y de acento pueden tener diferentes tonalidades del mismo color, en lugar de ser tres colores distintos o contrastantes. Por ejemplo:
- 60 por ciento del color principal: azul neutro suave.
- 30 por ciento de color secundario: un tono más oscuro del mismo azul.
- 10 por ciento de color de acento: un tono más claro del azul principal.
¿Cómo romper la regla adecuadamente cuando esta no funciona?
Aunque esta fórmula es una pauta básica y útil en el diseño de interiores, es posible que no siempre se adapte a tus preferencias y quieras romper las proporciones.
En casos donde los resultados no te satisfagan, puedes experimentar con tu propia fórmula, como la proporción 30-30-20-20.
Simplemente presta atención a cómo se equilibran los colores en el espacio y ajusta las proporciones para encontrar el equilibrio que mejor te represente.
En espacios con diversos elementos decorativos, como plantas, decoración de paredes y antigüedades, a menudo es necesario ir más allá de este esquema de color; de vez en cuando se logran resultados sorprendentes y podrás adaptados a tus gustos personales de forma más fácil.
Consejos y trucos adicionales
- Inicia diseñando en escala de grises: si inicias diseñando directamente con colores, podrías perder mucho tiempo. Es más recomendable iniciar con formas y espacios básicos.
- Buen contraste en el texto: esencial en UI y diseño web, el texto debe ser legible con el color de fondo.
- Hay más colores además de negros y gises puros: en la vida cotidiana es difícil encontrarnos con tonos totalmente puros, por eso una recomendación es agregar un poco de saturación a esos tonos.
- Utiliza generadores de paletas de color: simplificarán tu vida cuando trates de encontrar una buena paleta de colores.
Esta regla es una excelente base para crear diseños visualmente atractivos y equilibrados. Al comprender y aplicar esta regla, se pueden lograr esquemas de colores maduros y armoniosos que comunique eficazmente las intenciones de diseño sin ser un distractor.
Pero se debe recordar que la regla es flexible y está bien romperla o adaptarla para crear el diseño perfecto para cada situación.