Color is one of the most powerful tools in a designer’s toolkit, but working with traditional systems like hex and RGB can sometimes feel limiting. These formats work, but they don’t reflect how we actually see or think about color. Need a lighter shade or want to match saturation across different hues? You’re left guessing.
That’s where Hue, Saturation, and Lightness (HSL) come in. It makes color adjustments more visual and predictable, and Divi 5 now supports it natively thanks to its Relative Colors & HSL feature release. Let’s explore how it works and why you’ll want to master it.
Why Most Designers Struggle With Color Choices
Color tools often don’t match how we naturally think about color. You see a shade of blue you love, but the only way to capture it is through a hex code like #4A90E2. Those letters and numbers mean nothing to your brain.
Hex colors are made by mixing red, green, and blue values. Each pair (like 4A, 90, E2) shows how much of each color is used, from 0 to 255. Together, they create the final color #4A90E2.
You may have trouble figuring out which numbers to change when you need a lighter version of your brand blue. Should you increase all the RGB values equally? Or adjust just one RGB channel (red, green, or blue)? The numbers don’t match what your eyes expect, so you adjust and preview until it feels right.
Traditional color systems create bigger problems when you work across different contexts. Creating color variations becomes pure guesswork. You want five shades that work together, but there’s no system for it. Lightening #4A90E2 to #6BA3E8 might look right, or it might look washed out. You won’t know until you see it.
Getting shades by changing Hex codes isn’t simple. New hex values (#6BA3E8) are carefully chosen on the left to create a lighter shade of #4A90E2. On the right, just making nominal changes (#3B99E5) doesn’t lighten the color but completely changes it.
This slow, manual workflow takes hours to complete. You tweak values, check the preview, and tweak again, fighting the tools instead of designing. Your attention gets sucked into technical details when it should focus on how colors make people feel.
Many designers end up avoiding color experimentation because the process feels so clunky. You stick with safe choices or copy palettes from other sites. The tools that should help you explore color creativity actually limit it.
The Problem With Static RGB Values
RGB values don’t always behave how you expect. Green appears way brighter than blue at the same setting, but the system treats them equally. RGB(128, 128, 128) is a perfect medium gray, but how it looks can vary depending on the screen, lighting, or color profile used.
Want a lighter version of your brand color? You can try to bump up the RGB values, and sometimes, you get what you expected. Other times, you get something that looks washed out and weird. There is no way to tell beforehand.
Brand Blue color with RGB values increased equally by +50, resulting in a washed-out shade, which is not the expected smooth lighter tone. This shows that adding the same amount to each RGB channel doesn’t always produce predictable or balanced color shades.
RGB Colors also shift between different programs. This happens due to differences in color profiles, rendering engines, and how browsers interpret those values. Pick a perfect shade in Photoshop, copy the hex code to your website, and it might still look slightly different. Brand guidelines become harder to enforce when the same color code looks slightly different across browsers and design tools.
Each color changes in its own way when you try to lighten or darken it. Because RGB doesn’t adjust colors evenly, some hues fade faster or shift in unexpected ways. Some hues desaturate faster than others as lightness increases. Your blue turns gray while your red stays vibrant. Your purple gets muddy while your orange stays clean.
Color work turns into trial-and-error instead of intentional design.
What Is The Hue, Saturation, And Lightness (HSL) System?
Hue, Saturation, and Lightness (HSL) breaks color into three parts that match how your brain actually thinks about color. Hue picks the base color from a wheel of 360 options. Saturation controls how vibrant or gray that color looks. Lightness decides if it’s dark, bright, or somewhere between.
When you think, “I want a dark green,” you’re already thinking about HSL terms. You know you want green (hue), probably fairly rich (saturation), and on the darker side (lightness).
How The Three Components Work Together
Hue works like a color wheel cut from the visible light spectrum. The ends connect red to magenta, creating a smooth loop of every possible color. Want the perfect orange? Start at red (0 degrees) and move toward yellow around 30 degrees.
Saturation measures color purity as a percentage. Zero percent removes all color, leaving gray. One hundred percent gives the most vivid version possible. Think of saturation as the difference between a neon sign and a muted watercolor.
How HSL colors work, inspired by the graphic on Wikipedia about the same topic
Lightness ranges from 0% (pure black) through 50% (neutral) to 100% (pure white). Most usable colors live between 20% and 80% lightness. This matches how you naturally think about making colors lighter or darker.
Why Page Builders Usually Avoid HSL
Most page builders stick with hex codes and RGB for practical reasons, not because these systems work better. Builder developers face real technical hurdles. Users already know hex codes from Photoshop and other design tools. Converting between color systems requires extra processing.
Supporting HSL means building new interfaces and educating users about unfamiliar concepts, unless the HSL color picker is nailed perfectly. This conservative approach makes sense from a business perspective, even if it limits creative possibilities.
Create Perfect Color Variations With Divi 5’s New HSL Controls
HSL sounds great in theory, but theory doesn’t build websites. You need tools that support this approach. Most page builders force you back into hex codes and RGB guesswork. Divi 5 changes everything about how you work with color. But first:
What Is Divi?
Divi is a page builder that works differently from other WordPress page builders. You get visual design tools mixed with serious typography controls. The live editor shows your changes instantly. Adjust font sizes, tweak line spacing, and watch your page update right there.
You can drop 200+ modules anywhere you want. Text blocks, headlines, and special content pieces all play nicely together.
Here’s what makes Divi special: 2000+ ready-made layouts built for real businesses. We’re talking actual designs, not basic starter templates. Need something for your restaurant? There’s a layout for that. Running a photography studio? We’ve got you covered. Consultants and tech startups get their own designs, too.
Each layout knows your industry. The colors, spacing, and content flow all make sense for how your customers think and browse.
Take Full Site Control
The Theme Builder puts every piece of your site’s text styling in your hands. Build custom headers that speak your brand’s language. Design blog pages that make long articles easy to read. Your 404 error pages can keep the same fonts and style as the rest of your site.
Divi AI brings artificial intelligence straight into your workflow. Generate headlines that sound like you wrote them. Create a product copy that exactly matches your brand voice.
It builds entire page sections that understand your business.
Writes code snippets when you need them.
The Divi AI works with your images right inside the builder, too. Describe what needs fixing in any image and how it makes those changes.
Even generate completely new pictures on demand.
Skip The Blank Page Problem With Divi Quick Sites
Divi Quick Sites fixes the blank page problem that stops many projects before they start. Professional starter sites come with typography already set up. Our design team builds these templates with unique images and artwork you won’t see anywhere else.
Divi Quick Sites with Divi AI can also build custom layouts based on your business description. Tell it about your consulting practice or restaurant, and it creates relevant pages with appropriate copy for your industry.
This goes beyond just a wireframe. You get real headlines, body copy, and images that make sense for your business. You can set your brand fonts and colors upfront or let the AI choose for you.
Afterward, everything remains fully editable, so you can refine the typography to match your vision.
What’s New In Divi 5?
Divi 5 is the next version of the page builder, currently in alpha testing and ready for new website projects. We focused on practical improvements that speed up your daily work and make building sites more enjoyable.
Current Divi’s best parts stayed put while we rebuilt everything else. Fresh interface design meets improved performance under the hood. Modern coding practices power the whole system now.
Pages load faster than before. Controls respond quicker when you click them. Typography stays consistent across your whole site without extra manual work.
Here Are Some Highlights:
- Complete Framework Rebuild dumps the old shortcode system. Everything runs on modern block-based architecture that browsers handle much better.
- Divi 5’s Flexbox System gives you direct control to build modern, responsive layouts, easily managing alignment, spacing, and wrapping without custom code.
- The HSL Color System brings color controls that match how designers think. Adjust hue, saturation, and lightness instead of guessing with hex codes.
- Seven Custom Breakpoints replace the old three-size limit. Your typography looks perfect on every device your visitors use.
- CSS Functions Built-In means calc(), clamp(), min(), and max() work right in the visual editor. Build responsive text that scales naturally without code.
- Global Design Variables store fonts, colors, and spacing in one place. Change your main heading font once. Every H1 across your site updates automatically.
- The Preset-Based Design System includes Element Presets for individual modules plus Option Group Presets for complete typography styles. To keep things consistent, use these across different modules.
- A New Visual Builder Interface gets dockable panels, tabbed windows, keyboard shortcuts, and a better Layers View with breadcrumbs. Navigation becomes much easier.
- Nested Rows put rows inside other rows for complex layouts. Build advanced layout arrangements without special section types.
- Module Groups combine different elements into single units. This makes managing complex text layouts easier, and you can also build custom modules.
- Multi-Panel Workspace moves panels wherever works best. Keep typography controls open while adjusting other design stuff.
- Attribute Management copies, pastes, and resets typography styles between elements. Pick specific attributes to transfer instead of copying everything.
- Light/Dark Interface Modes reduce eye strain during long design sessions.
- Canvas Scaling shows how typography looks on different screen sizes without leaving the editor.
Discover All Divi 5 Feature Releases
How To Create HSL Colors With Divi 5
As mentioned, Divi 5 rebuilds the color picker from scratch. The new interface drops hex codes for HSL controls that work like your brain thinks about color. Three sliders handle the work:
- Hue accepts 0–360 degrees, and negative values wrap around (e.g., -60 becomes 300). The color wheel connects at both ends. Zero, 360, and negative 360 all give you the same red. Need a complementary color? Set the hue to 180 degrees from your starting point.
- Saturation runs from 0% to 100% and controls how vivid your color looks. Zero percent strips out all color intensity, leaving gray. One hundred percent gives full-blast color.
- Lightness works in the same percentage range. Zero makes black, 100% creates white, and 50% shows the pure form of whatever hue you picked.
The controls update live while you drag. Apply buttons or refresh delays won’t interrupt your workflow.
1. Build Relative Colors From Global Colors
Relative colors let you create new colors based on existing Global Colors by tweaking individual HSL components. Start in the Design Variable Manager by adding a new color.
Using the color picker, set your base color (this could be the brand color) to match the existing Primary Global color.
Let’s set up the secondary colors by using your primary hue shift to create complementary colors. Take your primary color, with lightness set to 25%.
You can even play around with the Hue or Saturation to create a new color as the secondary color.
Color swatches show you important information at a glance. You can tell whether something uses a Design Variable and see how HSL filters modify the base color. This visual feedback helps you understand what’s happening with your color relationships.
Likewise, create darker shades for the Heading Text Color and Body Text Color global colors using the primary color as the base.
You can, of course, create more decorative colors here, and you can still input hex, RGB, or named color values manually.
2. Manage Multi-Layer Design Variable Relationships
Design Variables can stack on top of each other for complex color systems. Based on your primary, you can create additional decorative colors, such as burnt moss. Then, reduce the burnt moss’s opacity to build a shadow color.
These nested relationships show how Divi 5 handles complex color hierarchies. When you adjust the primary color, the burnt moss color updates first, triggering the shadow color to update. The whole chain stays connected.
This approach changes color management from random guessing into a predictable system. Your website’s color palette stays harmonious without manual adjustments across every element.
3. Apply HSL Colors To Your Site
Hit any text module and open the color picker. Your saved variables show up with indicators. Click “Secondary Color,” and it will fill out the background of a section. Same color works for buttons, backgrounds, and borders.
Typography works when you stick to one hue but change lightness. Headlines could use Primary Color at -25% lightness. Body text goes a bit lighter at -15%. Links sit at -45%. Everything relates but stays clear.
Backgrounds need your brand colors toned down. Push lightness up to 95%. Drop saturation to 15%. Now you’ve got branded backgrounds that don’t fight content. Buttons work with full saturation. Hover states nudge lightness down a notch. Same color, different intensity.
Light text needs dark backgrounds. The lightness numbers tell you what works. Text at 50% lightness pairs with backgrounds below -30% of lightness.
Sections with dark text on light backgrounds reverse the values. Same hues, same saturation. Swap lightness values and you’re done. And of course, all of these colors maintain their links even after being applied. Change one variable and everything adapts. Easy as that!
4. Save Your HSL Colors As Reusable Presets
Once you’ve created your modules and applied the color design variables, preset these colors into reusable styles. Divi 5 offers two preset types that work together:
Option Group Presets control specific design aspects across all modules. Style your headings with the Heading text color design variable. Add shadows to your column using burnt moss and 50% opacity. Hover over the option group module icon in any module, label appropriately, and save.
The same works for backgrounds, spacing, animations, and text. Add a border radius via a number design variable, and set up the preset referencing this number variable. Each Option Group handles its own design territory and can be cross-applied, i.e., the border radius of a column can be applied to your call-to-action.
To apply, go to the appropriate option and select the preset.
Element Presets save complete module styles. Style a button module with your secondary color at 80% lightness. Click the preset selector in the top right of the module settings. Create a new preset called “Brand Color Button.” This saves all the button’s settings, including your HSL colors.
Now, when you add a new button, apply this preset, and it inherits the entire style. To cut your work for you, take any custom preset (option group or element) you’ve created and click the star icon beside it. That preset becomes the default for all new instances of that element or option group.
Your HSL relationships stay intact within presets. When you update a color, every module and preset using that color updates too. Build preset libraries for light sections, dark sections, and special brand moments. The HSL values travel with each preset, keeping your color system consistent across projects.
Build Color Systems For Your Websites With Divi 5
Color work used to take days. You’d fidget with hex codes, copy values between programs, and pray something looked decent.
HSL makes color work fun again. You see a shade you love and know exactly how to recreate it. Hue chooses the color, saturation controls how vivid it is, and lightness makes it brighter or darker. Now, brand refresh takes minutes instead of hours.
This is real design control. Divi 5 makes it happen today.
Leave A Reply