La llegada de Divi 5 ha traído consigo una de las funciones más potentes que he visto para diseñadores web: el nuevo sistema de colores relativos en HSL. Esta funcionalidad no solo facilita la creación de paletas de colores profesionales, sino que también nos ahorra horas de trabajo cuando necesitamos hacer cambios globales en un sitio web.

En este artículo quiero contarte en detalle cómo funciona, cómo puedes aplicarlo a tus proyectos en Divi y por qué considero que es una de las mejores actualizaciones de Elegant Themes.

¿Qué son los colores relativos en Divi 5?

El sistema de colores relativos permite crear toda una paleta de colores a partir de un color primario. En lugar de definir cada tono de manera aislada, ahora puedes generar variantes modificando parámetros como:

• Hue (Matiz)
• Saturation (Saturación)
• Lightness (Brillo)

De esta forma, todos los colores de tu diseño estarán relacionados entre sí y vinculados al color base.

Esto no es algo inventado por Divi, de hecho, es la forma en que trabajan los diseñadores gráficos al crear una identidad visual profesional. Lo novedoso es que ahora está integrado directamente en el constructor visual de Divi 5.

⭐️ Consejo rápido: define siempre un color primario antes de comenzar a diseñar. Así podrás mantener la coherencia y, en caso de cambios futuros, el ajuste será mucho más sencillo.

Cómo funciona el sistema HSL en Divi 5

El modelo de color HSL (Hue, Saturation, Lightness) funciona de la siguiente manera:

• Hue (Matiz): el tono del color (ejemplo: azul, rojo, verde).
• Saturation (Saturación): qué tan intenso o apagado se ve el color.
• Lightness (Brillo): la claridad u oscuridad del color.

En Divi 5, al establecer un color primario, podemos crear colores derivados simplemente ajustando estos tres valores.

Por ejemplo:

• Azul primario vibrante (base).
• Azul más oscuro para encabezados (menos brillo).
• Azul más claro para fondos (más brillo).
• Variantes desaturadas para elementos secundarios.

Todo esto manteniendo la coherencia porque todos los tonos dependen del color primario.

Ventaja principal: cambios globales en segundos

Imagina que un cliente decide cambiar su color corporativo. Antes, esto implicaba revisar cada módulo y cada sección para actualizar manualmente todos los colores. Ahora, con el sistema de colores relativos en Divi 5, basta con cambiar el color primario en la configuración y todos los colores derivados se actualizan automáticamente.

Esto significa que si tu azul corporativo pasa a ser un verde, toda la web cambiará con un solo ajuste.

Consejo práctico: usa este sistema en proyectos de clientes que puedan cambiar de branding en el futuro. Te ahorrarás muchos dolores de cabeza.

Ejemplo práctico con Divi 5

Supongamos que definimos como color primario un azul vibrante #007BFF. A partir de este color podemos crear:

• Fondo oscuro: mismo matiz, menos brillo.
• Botones secundarios: mismo matiz, más saturación.
• Fondos claros: mismo matiz, más brillo.
• Colores de hover: mismo matiz con ajuste de saturación.

Si mañana cambiamos el azul por un verde corporativo, todo se actualiza automáticamente: fondos, botones, hover y títulos, sin necesidad de entrar módulo por módulo.

Productividad y diseño profesional

Para quienes nos dedicamos al diseño web profesional con Divi, esta función es un verdadero regalo.

• Ahorro de tiempo: ya no necesitamos editar colores uno por uno.
• Consistencia visual: todos los elementos mantienen coherencia.
• Flexibilidad: adaptarse a cambios de marca es inmediato.
• Escalabilidad: proyectos grandes con muchos estilos se vuelven fáciles de gestionar.

En otras palabras, nos permite dedicar menos tiempo a tareas repetitivas y más a la estrategia y creatividad del diseño.

Limitaciones a tener en cuenta

Aunque el sistema es muy potente, es importante considerar lo siguiente:

• Requiere planificación inicial: si no defines bien tu color primario, la paleta puede perder armonía.
• Los colores relativos pueden generar tonos inesperados si no controlas bien la saturación o el brillo.
• Para sitios que ya están diseñados con colores independientes, puede tomar algo de tiempo migrar a este sistema.

Recomendaciones finales

1. Planifica tu paleta desde el inicio. Usa un color base y deriva todos los demás con HSL.
2. Prueba cambios globales. Antes de entregar un proyecto, cambia el color primario para comprobar la consistencia.
3. Combina esta función con variables globales. Así lograrás un control absoluto sobre tu identidad visual en Divi.
4. Úsalo en proyectos escalables. Si sabes que el cliente hará ajustes de marca en el futuro, este sistema será tu mejor aliado.

Cursos recomendados en UXDivi

Si quieres aprender a dominar esta y otras funciones nuevas de Divi 5, te recomiendo los siguientes cursos en uxdivi.com/cursos:

• Curso de Divi 5 en fase de desarrollo: donde exploramos cada nueva funcionalidad con ejemplos prácticos.

Conclusión

El sistema de colores relativos en Divi 5 no es solo una mejora técnica: es una herramienta que cambia la forma en que gestionamos el diseño visual de un sitio web. Nos permite trabajar de manera más ordenada, ahorrar tiempo y garantizar que los proyectos sean consistentes y fáciles de actualizar.

En mi experiencia, este tipo de funciones son las que realmente diferencian un diseño amateur de uno profesional. Y si trabajas con clientes que valoran la calidad y la rapidez de respuesta, esta funcionalidad te dará una gran ventaja.