For a long time, web developers have mostly used either the hexadecimal HEX format or RGB for working with color in CSS. Each system has its pros and cons, advantages, and conveniences. But sometimes they’re not the most comfortable to work with. It can be difficult to quickly choose a contrasting color or a harmonizing shade for your palette. So why not step away from the “standard” and try a different color format?
As you know, CSS supports three color formats: hex, rgb, and hsl. The first is the most common, the second is moderately used, and the third is quite rare. But what does HSL offer? Why was it created? The hsl() function has been part of CSS for a while, but the last update was in June 2018, so it's no surprise that it’s still underused. It wasn’t even well supported by browsers in the past. Meanwhile, graphic editors have long used HSL and its variant HSB, so many are already familiar with it.
HSL is considered to render colors on screen more naturally and realistically. It even allows you to select tones that are difficult to achieve using RGB. In terms of intuitiveness, just looking at hsl() values makes it easier to imagine the resulting color. It also helps explain the purpose of the color wheel we’ve referenced many times. RGB is harder to work with—colors mix to form shades, so you often end up opening Photoshop or using the browser’s developer tools to check values, which we already covered in a separate article.
At the same time, HSL is best used when truly necessary—particularly when a site’s design contains lots of shades, transitions, gradients, etc. But if you’re sticking to black, white, and gray or other modest colors, HSL won’t offer much benefit or show its full potential.
Hue, Saturation, Lightness
First, a quick note: in the HSL abbreviation, Lightness is sometimes translated as Brightness or Luminosity. That’s slightly inaccurate, since Brightness is part of a separate color model (HSB). In HSB, brightness is about darkening toward black, while in HSL, lightness refers to adjusting toward white. “Lightness” is a more appropriate and conversational term. We discussed the difference between brightness and lightness in a separate article.
In CSS, the hsl() function looks like this:
It takes three parameters in this order: hue, saturation, and lightness. There’s also an hsla() version, which adds an alpha channel (transparency).
So why is HSL easier to understand than other formats? Think of the color wheel—it’s easy to remember and navigate. Since it’s a circle, it spans 360 degrees. A standard wheel contains 12 base colors, and looks like this in degrees:
Remembering this or keeping a printed copy nearby makes it easier to understand HSL values.
Hue
Hue—the first parameter—defines the color itself. Think of it as one of the triangular sections on the color wheel. Red is the starting point at 0° 0 and also at 360° 0. Yellow is at 60° 0, meaning orange lies between them—around 20°, 30°, or 40°. The same applies to other hues and their intermediate shades.
The easiest way to test and play with hues is by using your browser’s developer tools. Here’s how text color changes when you shift from white to yellow:
Saturation
The second parameter defines how vivid or dull the selected hue appears. Dullness is created by adding gray—so the less gray, the more pure and vibrant the color.
Lightness
The essence of HSL is blending each color with white. If you test different values in developer tools, you’ll notice the third parameter always changes. It’s like working with watercolor paints—add black for darker shades, white for lighter ones. It’s easy to navigate: at 50%, the color is original; above 50% it gets lighter, below 50% it gets darker.
According to color theory, a tint is a mix of a color with white or black. Hue is created by mixing with gray or applying tints/shades. Blending with any neutral (black, gray, white) reduces saturation but keeps the hue intact.
So the essence of HSL is that a pure color is any hue from 0° to 360°, with saturation at 100% and lightness at 50%. This makes it easier to tweak or interpret than something like rgb(245,128,36).
Color Harmony
One of HSL’s main strengths is how it simplifies creating color harmony—like choosing slices of cake. We scan them, pick our favorite, then think about the next. The color wheel works similarly—complementary colors lie directly opposite. So if you pick a color and want its complementary match, just add or subtract 180° 0. Even if the result exceeds 360, HSL handles it and loops around. For example, blue’s opposite is yellow.
There are many harmonious color schemes. As with complementary colors (±180°), triadic schemes can be made by adding/subtracting 120° 0. Analogous schemes use 30° 0 spacing. For monochromatic palettes, just pick a hue and adjust lightness to create shades and tints. White marks the end of that spectrum.
CSS Custom Properties
CSS custom properties (variables) are the best way to use HSL—especially when building multiple themes for a site or app that can be switched dynamically, like user-selected color modes for a dashboard.
You can define a set of color variables for each theme and switch them by updating a data attribute on the root element. Or use class names—whatever works best for your workflow. The data-theme value changes in response to user interaction with dedicated theme-switch controls.
You can even use CSS variables as values inside other variables. And don’t forget about the calc() function. Combining it with hsl() lets you fine-tune excellent theme systems. One way of combining them might look like this:
As you can see, code can be written in various ways, depending on your goals and project. But the example clearly shows how HSL can simplify color management when using CSS variables.
Conversion
You can convert an existing project to HSL. If you’re using hexadecimal colors, use a converter like this one on CodePen.
Or install a SublimeText plugin to convert all hex/rgb values to hsl in seconds. There are many options, including ColorConvert.
Finally, it's worth noting that HSL is now supported by nearly all modern browsers—except for some very old versions of IE.
Final Thoughts
Many of us want our own websites or small personal projects. But we often know that these rank lower in priority compared to client work—and that’s understandable. Still, we shouldn’t ignore the fact that a personal site is a second home for a web designer, developer, or front-end coder. It’s where potential clients learn about your skills.
One great way to refresh your digital corner is switching to HSL. It makes color control easier, shows how shades harmonize with each other, and how they fit the content and design. Even GitHub uses it now, having shifted from dull gray to a bluish-gray tone by desaturating blue and slightly darkening the lightness.
Overall, HSL is a powerful format—especially when combined with CSS functions. Compared to RGB, HSL is far more intuitive. You can easily guess the hue, then adjust the gray and white levels. It’s especially useful for building tone-based color systems by just adjusting saturation and lightness. Ultimately, which format to use in web design doesn’t matter—it’s all about what works best for you.