Opting for colours with hex codes method guessing your method thru lighter variations, darker buttons, and accessibility fixes. Divi 5 introduces a redesigned Colour Picker with HSL controls to its new Color System, permitting you to construct and scale palettes comfortably. You’ll be able to create lighter or darker accents via adjusting a unmarried price, retailer the entirety as International Colour Variables, and replace all the website from one position.

This information walks thru trendy colour palettes for 2026 and displays you find out how to follow them at once inside of Divi 5.

Why HSL Is The Higher Method To Construct Fashionable Palettes

Maximum designers nonetheless make a choice colours in HEX, although they can not have a look at #5C7AEA and understand how to make a lighter model. You can not inform how saturated it’s. When a consumer asks for one thing fairly softer or darker, you find yourself guessing, nudging sliders, and hoping it seems to be proper.

Subscribe To Our Youtube Channel

HSL adjustments how this works. It separates Hue, Saturation, and Lightness, so you’ll generate a complete vary or similar colours from a unmarried base colour. Stay the Hue the similar and building up Lightness for backgrounds. Cut back it for buttons or textual content. Regulate Saturation for accents. Each colour is stored in a constant dating, which makes the logo really feel like a unified machine.

This means additionally simplifies accessibility. If textual content fails distinction, you modify Lightness or Saturation till it meets the WCAG AA (4.5:1 for traditional textual content) with small, predictable adjustments that don’t spoil your gradients or pressure you into guessing video games.

Fashionable design techniques depend on variables, and HSL makes the ones variables controllable. When each and every coloration is mathematically related, you’ll recolor a whole structure straight away, deal with constant UI patterns, and fortify gentle and darkish subject matters with out rebuilding from scratch. Many trendy UI frameworks and CSS gear use HSL for precisely this explanation why, as a result of colour turns into versatile, scalable, and easy to deal with through the years.

How Divi 5 Makes use of HSL

Divi 5 brings HSL capability into its Color System, so you’ll create limitless relative colour combos from a unmarried number one.

You outline your number one logo colour as soon as as a Design Variable inside of Divi’s Variable Supervisor. From there, you employ HSL sliders to regulate the hue, saturation, or lightness and create permutations like lighter backgrounds, darker textual content, or muted accents. Every new colour can also be stored as its personal variable, however it remains mathematically related to the unique.

That connection is what makes this robust. Let’s say you create a button colour that’s 20% darker than your number one. In case your consumer later comes to a decision to modify the main from yellow to inexperienced, that button robotically adjusts to stick 20% darker than the brand new inexperienced. You don’t have to seek down each and every example or recalculate sun shades. The connection holds, and your design remains constant.

Divi 5 additionally contains gear like Inspector and Find & Replace, which allow you to replace colours throughout more than one parts or complete pages in a couple of clicks.

As soon as your colour variables are in position, swapping an outdated hex code for a brand new variable takes seconds. As a result of Design Variables are international, adjustments you are making in a single position follow throughout your whole website.

This implies you’ll release a seasonal marketing campaign, take a look at a logo refresh, or tweak distinction for accessibility from a unmarried position and consider that the entirety attached to that colour will modify with it. For those who’ve ever spent an hour nudging hex codes as a result of a consumer sought after “only a fairly softer blue,” you recognize why this issues.

Learn More About Divi’s HSL & Relative Colors

Construction Colour Palettes in Divi 5

Each palette on this information follows the similar construction: one number one colour, one secondary, a couple of accents, and impartial backgrounds. Right here’s find out how to set that up in Divi 5.

1. Get started With One Number one Colour

Each palette begins with a unmarried number one logo colour. Buttons, CTAs, key icons, and hyperlinks normally draw from this coloration. In Divi, you retailer it as a Design Variable.

Through default, you’ll assign one number one, one secondary, one heading, and one frame textual content colour. So as to add your number one colour, paste your colour’s hex code within the Number one Colour box of the Colours tab within the Variable Supervisor.

Upload your secondary colour the similar method. The secondary provides distinction and frequently handles highlights, badges, small backgrounds, or UI parts that want character with out overpowering the main.

2. Create Accessory Colours

Accents can be utilized for indicators, understand containers, or playful touches relying to your logo taste. Divi’s colour machine means that you can create accents that keep attached to the main, so when the main adjustments, the accessory adjusts with it.

To create an accessory, click on Upload International Colour and title it.

Choose the main colour as the bottom and modify the Saturation to -20% to make the colour softer.

Now, if you happen to trade the main colour, this accessory updates robotically.

You’ll be able to create different colours via editing Hue and Lightness values. You’re now not restricted to adjusting one price at a time. Mix Hue, Saturation, and Lightness to create distinctive colours. For instance, this one makes use of the main as the bottom with Hue and Lightness adjusted to -25.

3. Upload Background Colours For Sections And Playing cards

Each palette wishes neutrals for textual content, muted textual content, web page backgrounds, and card backgrounds. Those are low-saturation sun shades outlined in HSL so you’ll modify distinction with out rebuilding the palette.

For instance, this background is customized from the secondary colour via adjusting the Lightness to ten%.

You’ll be able to create more than one sun shades and tints via adjusting Lightness and Saturation, or modify the opacity to create a clear variation.

As a result of the entirety remains attached, recoloring turns into easy. Exchange the main or secondary colour, and all the structure updates.

Fashionable Colour Palettes For 2026

Underneath are 5 palettes designers are the usage of throughout SaaS, portfolios, businesses, and eCommerce this yr. Every one features a number one, secondary, accessory, and complementary colour, plus neutrals for backgrounds and textual content. All values are written in HSL, so you’ll paste them at once into Divi’s Variable Supervisor.

Every palette follows the similar construction: the main anchors the logo, the secondary provides intensity, the accessory is derived via adjusting saturation or lightness, and the complementary comes from a noticeable hue shift. Backgrounds and sun shades are tinted variations of the main or secondary. As a result of the entirety is mathematically related thru HSL, converting the main robotically recalculates all the palette.

1. Sundown Orange

Daring orange number one for pleasant, high-attention interfaces. The secondary is a darker clay tone that provides intensity to playing cards and UI surfaces whilst staying heat.

2. Nighttime Blue

Vibrant blue number one helps to keep darkish mode vigorous. Deep army secondary for playing cards and headers. The complementary gold works smartly for icons, pricing, and notification badges.

3. Emerald & Gold

Deep emerald number one provides the design a contemporary, top class really feel. Darker woodland tone for the secondary helps to keep the entirety cohesive with out going complete black. The complementary gold provides heat to pricing, badges, and CTA highlights.

4. Dusty Rose

Muted rose number one paired with a deep wine secondary. The accessory helps to keep buttons and highlights comfortable. The charcoal-green background provides distinction with out natural black.

5. Rose & Slate

Comfortable rosy number one with a deep slate blue secondary creates a contemporary, balanced search for portfolios, boutique manufacturers, and inventive businesses. Light heat impartial accessory for playing cards. Calm lavender-grey background helps to keep sections simple at the eyes.

Making use of A Colour Palette To Your Web page

We’ve coated why HSL works and find out how to construct palettes in Divi 5. Now let’s see how this performs out while you in truth follow a palette to an actual structure. We’ll use the Comfortable Rose & Slate Palette and stroll throughout the procedure from setup to are living adjustments.

1. Upload Every Colour As A International Colour Variable

Open Variable Supervisor > Colours > Upload International Colour. Paste the HSL values on your number one, secondary, accessory, and complementary colours.

As soon as stored, those colours grow to be a part of your site-wide design machine. You’re now not storing random hex codes anymore. You’re making a attached palette the place each and every coloration is aware of its dating to the others.

2. Follow Variables The usage of Inspector

Open any module, row, or phase. Within the Colours tab, Inspector displays you all of the colours recently in use. Hover over any box, click on the dynamic content material icon, and choose your stored colour.

That is the place the workflow will get noticeably more uncomplicated. You’re now not copying and pasting hex codes or making an attempt to bear in mind which coloration is going the place. You choose a variable, and Divi handles the remainder.

3. Exchange One Colour, Replace Complete Web page

Return to Variable Supervisor and alter the main colour. Each part related to that variable updates straight away throughout your whole website.

As a result of the entirety is mathematically related thru HSL, you’re now not weeding out person parts or recalculating sun shades. You exchange one price, and the design adjusts throughout headers, footers, weblog posts, and touchdown pages. For those who’ve ever spent hours manually updating colours for a rebrand or seasonal marketing campaign, you recognize why this issues.

Take a look at Out Divi 5’s New Colour Machine Lately!

Colour palettes paintings highest once they’re constructed as techniques, now not collections of random sun shades. When each and every colour is related thru HSL and stored as a variable, your website turns into more uncomplicated to scale, repair, and replace with out weeding out person parts or recalculating hex codes.

Divi 5 treats colour like a design machine. You’ll be able to modify lightness for accessibility, shift the main hue for a rebrand, or take a look at seasonal subject matters with out rebuilding buttons, playing cards, or textual content types from scratch. Exchange one price in Variable Supervisor, and the design adjusts throughout your whole website.

Select a palette from this information, paste the HSL values into Divi, and construct from there.

The publish 5 Color Palettes For Balanced Web Design In 2026 seemed first on Elegant Themes Blog.

read more