Today, we are excited to release Relative Colors for Divi 5, positioning Divi as the clear leader in color management and advanced color systems. 🎉 Divi’s color picker has been completely redesigned, and it doesn’t get any better.
Using HSL, you can create mathematically beautiful, variable-based color systems that are easy to manage, revolutionizing how you manage colors on your websites.
Check out the following video to see the new feature in action. 👇
Divi 5’s Color Management Revolution
Let me jump straight to the punchline and show you a relative color system built with Divi 5.
The video below shows that all my website’s colors are defined as variables. I’m using a blue color as the primary color in the system. All other colors are based on that primary color variable, shifted in hue, saturation, lightness, and opacity using HSL.
When I adjust the primary color, all colors change automatically, retaining their color relationships and keeping my entire website’s color palette in perfect harmony.
Nested Color Variable Relationships
Next, let’s dig into the color variables in the previous video to show you how they were built. This color system is a simple example and contains a few colors based on the primary color.
- Secondary Color – This secondary color is my primary color hue shifted to create a complementary color to use as an accent color.
- Dark Blue – This dark blue is my primary color, with its lightness shifted down 40%.
- Light Gray – This dark blue is my primary color, with its lightness and opacity shifted down to create a light gray that plays well with the
- Black – This Black is my primary color with its lightness and saturation reduced, breathing life into what would have otherwise been a stale gray.
- Shadow – This box shadow color is the Black color variable, with its opacity reduced, showcasing Divi 5’s ability to create multi-layer color relationships.
Divi 5’s design variable system makes managing your website’s colors a breeze, and this new relative color system takes it to the next level.
Working with colors like this is a designer’s dream. 🤩
The Brand New Color Field
Divi’s new color field has been revamped with better integration with Divi’s design variable system, bringing it in line with Divi’s other field types.
The color picker’s original global color UI has been replaced with the familiar Dynamic Content icon, where you can access all your color variables upll colors from custom fields.
It’s also much more informative. The appearance of a color swatch tells you information about the color, whether it’s a variable, and how HSL or opacity is being used to adjust it. We really knocked this UI out of the park!
A Completely Redesigned Color Picker
Divi’s color picker has been completely redesigned, with more intuitive controls for hue, saturation, lightness, and opacity and new HSL color filters. You’ll also find quick access to your color variables and the ability to create new relative colors based on those variables.
We wanted a perfect color picker, so we built this one from scratch.
The new interface is slick, sharp, and simply lovely.
Try Divi 5 Today
Relative Colors for Divi 5 is available today, and it’s one of many features coming to Divi this year.
You can follow along as we progress through the final release of Divi 5 and beyond, with updates every two weeks. Depending on your priorities, you can use Divi 5 now to build new websites or wait until we add more features, whatever works best for you.
As outlined in Divi 5’s original multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s missing a few features and may not be suitable for existing websites, but it’s ready to be used on new websites if you prefer the experience to Divi 4.
We want you to try it, and if you love it, use it; when everyone loves it, we’ll make it official.
Sneak Peek: The Inspector
We’re building features fast. Every time we finish a new feature, we start a new one. Whenever we start a new feature, I give you a sneak peek.
In case you missed it, I recently gave a triple sneak peek of three upcoming Divi 5 features, including a new Inspector.
This might be my favorite upcoming Divi 5 feature!
Watch this video for all the details. 👇
More Divi 5 Updates Are On The Way
2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.
If you’re here for the Divi comeback, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁
Leave A Reply