If you have ever worked on a big website you know how quickly your color system can get messy. You start with just one or two colors but soon you need lighter versions, darker versions, transparent versions and suddenly you have got 10 or more color variables just for one main color.

Luckily there’s a new CSS feature that can help clean this up. It is called relative colors and it can make your color palette much easier to manage

In most projects developers use CSS variables to define colors.

This is great because you can change the –accent value in one place and it updates everywhere it is used. This is super helpful for things like dark mode.

But what happens when you need other versions of this color? Like a lighter shade for a background or a transparent version for a hover effect? You might end up writing this:

Now imagine needing to change the accent color later. You’d have to update all of these manually and it can get messy fast.

The new relative color syntax in CSS lets you create all these extra shades based on one main color. That means if you change the main color all the other versions update automatically.

It works best with HSL colors. If you have only used hex or RGB before here’s a quick explanation:

• H = Hue (the actual color, like red or blue)
• S = Saturation (how intense the color is)
• L = Lightness (how light or dark it is)

With HSL you can easily make a color lighter or darker by just changing the lightness value. You can also make it transparent by adding an alpha value.

Let us say you have a brand color like this:

Now instead of creating a separate variable for a transparent version you can write:

This takes the hue, saturation, and lightness from –brand, and just changes the transparency to 40%. If you ever change –brand this one will update too.

You can also use this technique to make colors lighter or darker by adjusting the lightness value.

This makes –container a lighter version of –base. If –base changes to a different color (like green) the container color updates too.

Want it darker instead? Just subtract from the lightness:

Instead of having 10+ color variables you can create everything from 1 or 2 base colors.

Now you only need to update –brand, and everything else updates with it. This keeps your styles clean and easy to manage.

If you are building dark mode or letting users choose their own theme this method works beautifully.

Because all your other colors are relative to –base, the whole theme updates when the user switches modes.

Relative colors in CSS bring a much needed solution to managing complex color systems. Instead of juggling multiple helper variables for every shade you can now base all your color variations on just a few key values. This makes your code easier to read, maintain and update especially when creating themes or switching between light and dark modes.

By taking advantage of hsl(from ..) and calc() you gain flexibility and control over your color palette without increasing complexity. It is a small change to your CSS workflow but it can make a big difference in how you design and scale your projects.