Choosing colors with hex codes approach guessing your approach via lighter diversifications, darker buttons, and accessibility fixes. Divi 5 introduces a redesigned Color Picker with HSL controls to its new Colour Device, allowing you to build and scale palettes very simply. You’ll be capable of create lighter or darker accents by way of adjusting a single worth, store the entire thing as Global Color Variables, and exchange the entire website online from one place.

This data walks via trendy color palettes for 2026 and presentations you the right way to practice them directly inside Divi 5.

Why HSL Is The Upper Way To Assemble Trendy Palettes

Most designers nevertheless make a selection colors in HEX, even though they may be able to’t check out #5C7AEA and understand how to make a lighter fashion. You’ll be able to now not tell how saturated it’s. When a client asks for something reasonably softer or darker, you end up guessing, nudging sliders, and hoping it seems that correct.

Subscribe To Our Youtube Channel

HSL changes how this works. It separates Hue, Saturation, and Lightness, so that you’ll generate an entire range or equivalent colors from a single base color. Keep the Hue the equivalent and building up Lightness for backgrounds. Reduce it for buttons or text. Regulate Saturation for accents. Every color is stored in a continuing relationship, which makes the logo actually really feel like a unified system.

This manner moreover simplifies accessibility. If text fails difference, you modify Lightness or Saturation until it meets the WCAG AA (4.5:1 for same old text) with small, predictable changes that don’t smash your gradients or energy you into guessing video video games.

Trendy design methods rely on variables, and HSL makes those variables controllable. When each and every color is mathematically similar, you’ll recolor an entire construction immediately, maintain consistent UI patterns, and fortify delicate and dark matter issues without rebuilding from scratch. Many trendy UI frameworks and CSS apparatus use HSL for exactly this explanation why, on account of color becomes flexible, scalable, and simple to maintain through the years.

How Divi 5 Uses HSL

Divi 5 brings HSL capacity into its Colour Device, so that you’ll create endless relative color combinations from a single primary.

You define your primary brand color once as a Design Variable inside Divi’s Variable Manager. From there, you utilize HSL sliders to control the hue, saturation, or lightness and create diversifications like lighter backgrounds, darker text, or muted accents. Every new color will also be saved as its private variable, but it stays mathematically associated with the original.

That connection is what makes this tough. Let’s say you create a button color that’s 20% darker than your primary. If your client later decides to switch the primary from yellow to green, that button automatically adjusts to stay 20% darker than the new green. You don’t have to hunt down each and every instance or recalculate sunglasses. The relationship holds, and your design stays consistent.

Divi 5 moreover contains apparatus like Inspector and To find & Change, which let you exchange colors all the way through a couple of elements or entire pages in a few clicks.

Once your color variables are in place, swapping an earlier hex code for a brand spanking new variable takes seconds. Because of Design Variables are global, changes you’re making in one place practice all the way through all of your website online.

This means you’ll unlock a seasonal advertising and marketing marketing campaign, check out a brand refresh, or tweak difference for accessibility from a single place and believe that the entire thing hooked as much as that color will modify with it. For many who’ve ever spent an hour nudging hex codes on account of a client wanted “just a reasonably softer blue,” why this problems.

Be informed Extra About Divi’s HSL & Relative Colours

Building Color Palettes in Divi 5

Every palette in this knowledge follows the equivalent building: one primary color, one secondary, a few accents, and unbiased backgrounds. Proper right here’s the right way to set that up in Divi 5.

1. Get began With One Primary Color

Every palette starts with a single primary brand color. Buttons, CTAs, key icons, and links most often draw from this color. In Divi, you store it as a Design Variable.

Thru default, you’ll assign one primary, one secondary, one heading, and one body text color. To be able to upload your primary color, paste your color’s hex code inside the Primary Color field of the Colors tab inside the Variable Manager.

Add your secondary color the equivalent approach. The secondary supplies difference and often handles highlights, badges, small backgrounds, or UI elements that need character without overpowering the primary.

2. Create Accent Colors

Accents can be used for alerts, perceive packing containers, or playful touches depending on your brand style. Divi’s color system lets you create accents that stay hooked as much as the primary, so when the primary changes, the accent adjusts with it.

To create an adjunct, click on on Add Global Color and name it.

Make a selection the primary color as the ground and change the Saturation to -20% to make the color softer.

Now, if you happen to change the primary color, this accent updates automatically.

You’ll be capable of create other colors by way of enhancing Hue and Lightness values. You’re no longer limited to adjusting one worth at a time. Combine Hue, Saturation, and Lightness to create unique colors. As an example, this one uses the primary as the ground with Hue and Lightness adjusted to -25.

3. Add Background Colors For Sections And Taking part in playing cards

Every palette needs neutrals for text, muted text, internet web page backgrounds, and card backgrounds. The ones are low-saturation sunglasses defined in HSL so that you’ll modify difference without rebuilding the palette.

As an example, this background is ready-made from the secondary color by way of adjusting the Lightness to 10%.

You’ll be capable of create a couple of sunglasses and tints by way of adjusting Lightness and Saturation, or modify the opacity to create a transparent variation.

Because of the entire thing stays attached, recoloring becomes simple. Industry the primary or secondary color, and the entire construction updates.

Trendy Color Palettes For 2026

Below are 5 palettes designers are the usage of all the way through SaaS, portfolios, firms, and eCommerce this 12 months. Every one includes a primary, secondary, accent, and complementary color, plus neutrals for backgrounds and text. All values are written in HSL, so that you’ll paste them directly into Divi’s Variable Manager.

Every palette follows the equivalent building: the primary anchors the logo, the secondary supplies depth, the accent is derived by way of adjusting saturation or lightness, and the complementary comes from a noticeable hue shift. Backgrounds and sunglasses are tinted diversifications of the primary or secondary. Because of the entire thing is mathematically similar via HSL, changing the primary automatically recalculates the entire palette.

1. Sunset Orange

Bold orange primary for delightful, high-attention interfaces. The secondary is a darker clay tone that gives depth to enjoying playing cards and UI surfaces while staying warmth.

2. Middle of the night Blue

Good blue primary keeps dark mode lively. Deep military secondary for enjoying playing cards and headers. The complementary gold works well for icons, pricing, and notification badges.

3. Emerald & Gold

Deep emerald primary provides the design a modern, most sensible magnificence actually really feel. Darker wooded space tone for the secondary keeps the entire thing cohesive without going entire black. The complementary gold supplies warmth to pricing, badges, and CTA highlights.

4. Dusty Rose

Muted rose primary paired with a deep wine secondary. The accent keeps buttons and highlights comfy. The charcoal-green background supplies difference without herbal black.

5. Rose & Slate

Soft rosy primary with a deep slate blue secondary creates a modern, balanced seek for portfolios, boutique producers, and inventive firms. Light warmth unbiased accent for enjoying playing cards. Calm lavender-grey background keeps sections easy on the eyes.

Applying A Color Palette To Your Web page

We’ve coated why HSL works and the right way to assemble palettes in Divi 5. Now let’s see how this plays out whilst you actually practice a palette to a real construction. We’ll use the Soft Rose & Slate Palette and walk all through the process from setup to are living changes.

1. Add Every Color As A Global Color Variable

Open Variable Manager > Colors > Add Global Color. Paste the HSL values for your primary, secondary, accent, and complementary colors.

Once saved, the ones colors transform part of your site-wide design system. You’re no longer storing random hex codes anymore. You’re creating a attached palette where each and every color is acutely aware of its relationship to the others.

2. Observe Variables Using Inspector

Open any module, row, or segment. Throughout the Colors tab, Inspector presentations you the entire colors at the present time in use. Hover over any field, click on at the dynamic content material subject material icon, and make a choice your saved color.

That’s the position the workflow gets noticeably easier. You’re no longer copying and pasting hex codes or attempting to remember which color goes where. You select a variable, and Divi handles the remaining.

3. Industry One Color, Exchange Entire Web page

Go back to Variable Manager and change the primary color. Every phase associated with that variable updates immediately all the way through all of your website online.

Because of the entire thing is mathematically similar via HSL, you’re no longer taking out individual elements or recalculating sunglasses. You exchange one worth, and the design adjusts all the way through headers, footers, blog posts, and landing pages. For many who’ve ever spent hours manually updating colors for a rebrand or seasonal advertising and marketing marketing campaign, why this problems.

Take a look at Out Divi 5’s New Color Tool Nowadays!

Color palettes art work best once they’re built as methods, no longer collections of random sunglasses. When each and every color is said via HSL and saved as a variable, your website online becomes easier to scale, restore, and exchange without taking out individual elements or recalculating hex codes.

Divi 5 treats color like a design system. You’ll be capable of modify lightness for accessibility, shift the primary hue for a rebrand, or check out seasonal matter issues without rebuilding buttons, enjoying playing cards, or text varieties from scratch. Industry one worth in Variable Manager, and the design adjusts all the way through all of your website online.

Choose a palette from this data, paste the HSL values into Divi, and assemble from there.

The put up 5 Colour Palettes For Balanced Internet Design In 2026 appeared first on Sublime Subject matters Weblog.

WordPress Web Design

[ continue ]

read more