El color juega un papel tan importante en el diseño de tus sitios web o aplicaciones. Puede afectar las decisiones y el estado de ánimo de tus clientes, por lo que debe haber una manera de equilibrar nuestros colores y hacer que sea una experiencia más agradable mientras los clientes se enfocan en los elementos que queremos que vean, esta es la regla de color 60:3010 y en este Poste te explicaré sobre que es La Regla de Color 60:30:10 Para el Diseño Web, vamos con ello.
Antes de continuar con este Post, te invito a leer los siguientes artículos:
- Principios del Diseño de Interfaces Oscuras (Dark Mode)
- Si eres Desarrollador te brindo estos consejos para Obtener habilidades en el Diseño de Interfaces UI
- Generando Diseños para cada Densidad de Pantalla en Android (dpi) con Adobe Xd
- 5 Consejos para crear Interfaces de Usuario (UI) para aplicaciones móviles de Mensajería o Chat
- Puedes leer más en la categoría UI
Asimismo te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web” y “5 Habilidades que Debe Tener un Desarrollador Backend” (Anchor Podcast):
| Spotify: | Sound Cloud: | Apple Podcasts | Anchor Podcasts |
 |
 |
 |
 |
Bien ahora continuemos con el Post: 10 Empresas Que Usan El Lenguaje de Programación R – Parte 2 (Final).
¿ Cómo Se Distribuye ?
La forma en que se distribuye los colores, es de la siguiente manera:
- El 60% es el color neutro o primario, este debe ser el color base de tu diseño.
- El 30% es color secundario, este es el color complementario y apoyará al color principal.
- El 10% es un color de aceto que se utiliza para resaltar aspectos importantes de la página web.
Ahora veamos como hacer esta distribución de colores.
¿ Como Hacerlo ?
Usaré el selector de color de Google Chrome DevTools. Podemos hacerlo en base a 2 enfoques:
Cambiando los Valores de Saturación y Luminosidad de Tu Color
Este será nuestro color primario, es decir nuestro 60%:
Para nuestro color secundario o nuestro 30%, necesitamos establecer el valor de Saturación (S) entre 5% y 10% y el valor de Luminosidad (L) entre 90% y 95%:
Para el color de acento o nuestro 10%, el valo de Matiz (H) es 50% y nuestro valor de Luminosidad (L) está entre 70% y 80 %:
Ahora veamo el segundo enfoque.
Cambiando Solo La Luminosidad de un Color
Comenzamos con un color base:
Para el color secundario, debemos establecer nuestro valor de Luminosidad (L) entre 20% y 30%:
Y el color de acento, debe tener el valor de Luminosidad entre 80% y 90%:
Se mantiene un equilibrio de color increible.
Puedes ver ejemplos de esta regla 60:30:10 en la herramienta ColorHub y tener una idea de como se verian tus aplicaciones web.
Puedes hacer tus propias combinaciones usando un selector de color HSL y ColorHub.
Recuerda mantener la accesibilidad en primer lugar y pasar tus colores por un comprobador de contraste, antes de implementarlos en tus páginas web o aplicaciones.
Conclusión
Como puedes ver, hay infinitas posibilidades de lo que puedes hacer con el diseño y el color; depende de tu jugar con él y descubrir cuál te gusta más.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.