HSL Colors

In the last lesson you learned about RGB Colors. There you mixed red, green, and blue numbers to make a color. Now let’s look at a way that feels much more natural to us. It is called HSL.

🎨 What is HSL?

HSL is another way to write a color in CSS. But instead of mixing light like RGB does, it describes a color the way your eyes think about it.

HSL stands for Hue, Saturation, and Lightness. Those are just three simple ideas about a color.

• Hue is the color itself. Like red, blue, or green.
• Saturation is how strong or how grey the color looks.
• Lightness is how bright or how dark the color is.

So with RGB you ask “how much red, green, and blue?” With HSL you ask “which color, how strong, and how bright?” That second question is much closer to how we talk about colors in real life.

🖼️ A real-life way to picture it

Think about choosing paint for a wall in a shop.

• First you pick the base color from a color wheel. A color wheel is a ring that shows all the colors going around in a circle. That choice is the Hue.
• Then you decide if you want it bright and full, or soft and washed out. That is the Saturation.
• Last you make it lighter or darker, like adding white or black. That is the Lightness.

You do not think in red-green-blue numbers when you pick paint. You think “I want a soft light blue.” HSL lets you write a color that same way.

✍️ The syntax

You write HSL with the hsl() function. Inside it you put three values in order: hue, then saturation, then lightness.

Here is the basic shape of it.

color: hsl(0, 100%, 50%);

Let’s walk through each part.

• The first value is the hue. It is an angle on a color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• The second value is the saturation. It is a percent from 0% to 100%. 0% is fully grey and 100% is the full strong color.
• The third value is the lightness. It is a percent from 0% to 100%. 0% is black, 100% is white, and 50% is the normal color.

So hsl(0, 100%, 50%) means hue 0 (red), full strength, normal brightness. That gives you pure red.

🧩 A simple example

Let’s make a box and give it a nice blue background with HSL.

.box {
  width: 200px;
  height: 100px;
  background-color: hsl(210, 80%, 55%);
  color: hsl(0, 0%, 100%);
}

Now read those two colors out loud.

• The background is hue 210. That sits between blue and cyan, so it is a calm sky blue. Saturation 80% keeps it fairly strong. Lightness 55% keeps it bright but not washed out.
• The text color is hsl(0, 0%, 100%). The hue does not matter here because saturation is 0%, so the color is grey. Lightness 100% pushes that grey all the way to white.

🌈 Why HSL is so handy

Here is the real reason people like HSL. It makes small changes to a color very easy.

Say you have a button. You want a darker shade of the same color when someone hovers over it. With RGB you would have to guess new red, green, and blue numbers. With HSL you keep the hue and saturation the same. You only lower the lightness.

This example shows a button that gets darker on hover by changing just the lightness.

.btn {
  background-color: hsl(140, 70%, 45%);
}

.btn:hover {
  background-color: hsl(140, 70%, 35%);
}

See how the only thing that changed was 45% to 35%? Same green hue, same strength, just a bit darker. That is hard to do cleanly in RGB but very easy in HSL.

🔍 HSL vs RGB at a glance

Both write the same colors on screen. They just describe them in different ways.

💧 Adding see-through color with HSLA

Sometimes you want a color you can partly see through. Like a faint layer on top of a photo. For that there is hsla(). The extra a stands for alpha, which just means how solid the color is.

This box uses a red color that is only half solid, so whatever is behind it shows through.

.overlay {
  background-color: hsla(0, 100%, 50%, 0.5);
}

The first three values are the same hue, saturation, and lightness as before. The fourth value is the alpha. It runs from 0 (fully see-through) to 1 (fully solid). So 0.5 means half see-through.

⚠️ Common Mistakes

A few small things trip up beginners with HSL. Watch for these.

• Forgetting the % signs. Saturation and lightness must have a percent, like 60%. Writing hsl(200, 60, 40) will not work.
• Putting a % on the hue. The hue is an angle, not a percent. Write 200, not 200%.
• Mixing up lightness and saturation. Lightness near 0% gives black and near 100% gives white. If your color keeps coming out black or white, check the lightness first.

✅ Best Practices

Keep these habits and HSL will stay easy to use.

• Use HSL when you need matching shades, like hover states or light and dark versions of one color.
• Change only the lightness to go darker or lighter. Keep hue and saturation steady.
• Reach for hsla() when you want a soft, see-through layer instead of a fully solid color.

🧩 What You’ve Learned

Here is the quick recap of what we covered.

• ✅ HSL describes a color as Hue, Saturation, and Lightness, the way humans think about color.
• ✅ Hue is an angle from 0 to 360, while saturation and lightness are percents from 0% to 100%.
• ✅ You make a color darker or lighter by changing only the lightness.
• ✅ hsla() adds an alpha value from 0 to 1 to make the color see-through.

🚀 What’s Next?

Now you can write colors the way your eyes think about them. Next we move from colors to sizes, and learn the different ways CSS measures things on a page.

CSS Units