HSL Colors: A More Intuitive Approach

Choosing colors with weird codes like #3498db can feel like guessing. What does that number even mean? If you’ve ever tried to tweak a color and ended up breaking your whole design, you’re not alone.

In this article, you’ll learn a more intuitive way to work with colors using HSL. You’ll see how HSL works in plain language, how to use it in simple CSS code, and how to confidently adjust colors without getting lost.

What is HSL?

HSL stands for:

Hue – the basic color (red, blue, green, etc.)
Saturation – how intense or dull the color is
Lightness – how light or dark the color is

An HSL color looks like this in CSS:

color: hsl(200, 80%, 50%);

This breaks down as:

200 → Hue (a number on a color wheel from 0 to 360)
80% → Saturation (0% = gray, 100% = very intense color)
50% → Lightness (0% = black, 100% = white)

Think of it as: what color, how colorful, and how bright.

Why HSL Feels More Intuitive

With hex colors like #ff5733, you can’t easily tell how to make it lighter or less saturated. You have to guess and change random letters and numbers.

With HSL, you can say:

“I like this blue. Make it a bit lighter.” → increase lightness
“Make this color more gray-ish.” → lower saturation
“Shift this blue toward green.” → change the hue slightly

Instead of random codes, you control color using three sliders in your head: hue, saturation, lightness.

Step 1: Your First HSL Color in CSS

Let’s start with a very simple web page that uses an HSL color.

Create a file called hsl-example-1.html and paste this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HSL Example 1</title>
  <style>
    body {
      /* A soft blue using HSL */
      background-color: hsl(210, 100%, 95%);
      font-family: Arial, sans-serif;
      text-align: center;
      padding-top: 50px;
    }

    h1 {
      /* A stronger blue for the heading */
      color: hsl(210, 90%, 35%);
    }
  </style>
</head>
<body>
  <h1>Hello, HSL Colors!</h1>
</body>
</html>

What this does

The page background uses hsl(210, 100%, 95%) → a very light sky blue.
The heading text uses hsl(210, 90%, 35%) → a dark, rich blue.

Notice both colors share the same hue: 210. That means they’re the same basic blue, just with different saturation and lightness.

Try it yourself

Open the file in your browser, then experiment:

Change the background to hsl(210, 100%, 85%) (a bit darker)
Change the heading to hsl(210, 60%, 40%) (less saturated, more muted)

Pay attention to how the color feels as you change the numbers. You’re already controlling color like a designer.

Step 2: Understanding Hue (the Color Wheel)

The hue value picks the base color using a circle from 0 to 360 degrees:

0 or 360 → red
120 → green
240 → blue

You can think of it as spinning around a color wheel.

Let’s build a tiny color demo using different hues.

Create hsl-example-2.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HSL Hue Demo</title>
  <style>
    .swatch {
      width: 120px;
      height: 80px;
      display: inline-block;
      margin: 10px;
      color: white;
      font-family: Arial, sans-serif;
      text-align: center;
      line-height: 80px; /* vertically center text */
      border-radius: 8px;
    }

    .red    { background-color: hsl(0,   80%, 50%); }
    .green  { background-color: hsl(120, 80%, 50%); }
    .blue   { background-color: hsl(240, 80%, 50%); }
    .purple { background-color: hsl(280, 80%, 50%); }
  </style>
</head>
<body>
  <div class="swatch red">hsl(0, 80%, 50%)</div>
  <div class="swatch green">hsl(120, 80%, 50%)</div>
  <div class="swatch blue">hsl(240, 80%, 50%)</div>
  <div class="swatch purple">hsl(280, 80%, 50%)</div>
</body>
</html>

What this does

Each .swatch box has:

The same saturation (80%) and lightness (50%)
Only the hue changes

This lets you clearly see how hue selects different basic colors.

Try it yourself

Add your own color, for example: hsl(45, 80%, 50%) (a warm yellow)
Slowly change one hue value (e.g., from 240 to 260 to 280) and watch blue turn into purple

You are learning to “read” colors just by their numbers.

Step 3: Tuning Saturation and Lightness

Once you’ve picked a hue you like, you can adjust saturation and lightness to create a whole set of related colors: backgrounds, borders, and text.

Let’s build a small color palette based on one hue.

Create hsl-example-3.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HSL Palette</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .row {
      margin-bottom: 20px;
    }

    .box {
      width: 120px;
      height: 60px;
      display: inline-block;
      margin-right: 10px;
      border-radius: 6px;
      color: #333;
      text-align: center;
      line-height: 60px;
      font-size: 12px;
    }

    /* All boxes share the same hue: 210 (blue) */
    .sat-low  { background-color: hsl(210, 20%, 50%); }
    .sat-mid  { background-color: hsl(210, 50%, 50%); }
    .sat-high { background-color: hsl(210, 90%, 50%); }

    .light-low  { background-color: hsl(210, 70%, 25%); color: white; }
    .light-mid  { background-color: hsl(210, 70%, 50%); color: white; }
    .light-high { background-color: hsl(210, 70%, 85%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box sat-low">20% sat</div>
    <div class="box sat-mid">50% sat</div>
    <div class="box sat-high">90% sat</div>
  </div>

  <div class="row">
    <div class="box light-low">25% light</div>
    <div class="box light-mid">50% light</div>
    <div class="box light-high">85% light</div>
  </div>
</body>
</html>

What this shows

The first row changes saturation while keeping hue and lightness the same.
- 20% sat → dull, grayish blue
- 90% sat → bright, intense blue
The second row changes lightness while keeping hue and saturation the same.
- 25% light → dark blue
- 85% light → very light blue (almost white)

You can now control whether a color is muted vs. vibrant and dark vs. light using just two numbers.

Try it yourself

Change the hue from 210 to another number (like 340 for pinkish/red)
Keep the same saturation/lightness values and see a new matching color palette appear

This is a powerful way to design consistent themes.

Step 4: Building a Simple HSL Color Theme

Now let’s use HSL to style a tiny “card” layout: a title, some text, and a button. We’ll base everything on a single hue so the design feels unified.

Create hsl-example-4.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HSL Theme Example</title>
  <style>
    :root {
      /* Base hue for the whole theme (blue-green) */
      --theme-hue: 190;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: hsl(var(--theme-hue), 40%, 96%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .card {
      background-color: white;
      border-radius: 10px;
      padding: 20px 25px;
      box-shadow: 0 4px 12px hsl(var(--theme-hue), 30%, 80%);
      max-width: 320px;
    }

    .card-title {
      color: hsl(var(--theme-hue), 70%, 30%);
      margin-top: 0;
    }

    .card-text {
      color: hsl(var(--theme-hue), 20%, 30%);
      font-size: 14px;
      line-height: 1.5;
    }

    .card-button {
      display: inline-block;
      margin-top: 15px;
      padding: 8px 16px;
      border-radius: 6px;
      border: none;
      background-color: hsl(var(--theme-hue), 80%, 45%);
      color: white;
      cursor: pointer;
      font-size: 14px;
    }

    .card-button:hover {
      /* Slightly darker on hover */
      background-color: hsl(var(--theme-hue), 80%, 38%);
    }
  </style>
</head>
<body>
  <div class="card">
    <h2 class="card-title">HSL Color Theme</h2>
    <p class="card-text">
      This card uses one hue value to create a full color theme.
      Change the hue number to instantly try a new color scheme.
    </p>
    <button class="card-button">Click me</button>
  </div>
</body>
</html>

What’s happening here

We store the base hue in a CSS variable: --theme-hue: 190;
Every color uses hsl(var(--theme-hue), ..., ...)
By changing one number, you can recolor the entire card:
- Try --theme-hue: 340; for pink
- Try --theme-hue: 45; for warm yellow
- Try --theme-hue: 130; for green

This shows how HSL helps you build flexible themes where all colors feel related.

Try it yourself

Open the file and:

Change --theme-hue a few times.
Adjust button lightness, e.g. from 45% to 55% for a lighter button.
Lower saturation for the text (e.g. from 20% to 10%) to make it softer.

You are now controlling an entire mini design with just a few understandable numbers.

Quick Recap and What’s Next

You’ve just taken a big step in understanding color on the web:

HSL describes color using hue (color), saturation (intensity), and lightness (brightness).
Adjusting hue moves around the color wheel (red, green, blue, etc.).
Adjusting saturation makes colors more vivid or more gray.
Adjusting lightness makes colors lighter or darker.
You can build entire color themes by keeping the same hue and changing saturation and lightness.

From here, you can:

Explore online HSL color pickers and copy/paste values into your CSS.
Try turning your favorite hex colors into HSL and see how they’re built.
Create your own simple design system: pick one hue and build buttons, backgrounds, and text colors around it.

Learning color takes practice, but every small experiment helps. Keep playing with HSL values, notice how the page changes, and you’ll quickly develop an eye for color—even as a complete beginner.

Mudzinga

HSL Colors: A More Intuitive Approach

What is HSL?

Why HSL Feels More Intuitive

Step 1: Your First HSL Color in CSS

What this does

Try it yourself

Step 2: Understanding Hue (the Color Wheel)

What this does

Try it yourself

Step 3: Tuning Saturation and Lightness

What this shows

Try it yourself

Step 4: Building a Simple HSL Color Theme

What’s happening here

Try it yourself

Quick Recap and What’s Next

About Percy Mudzinga

Related Articles

HSL Colors: A More Intuitive Approach

What is HSL?

Why HSL Feels More Intuitive

Step 1: Your First HSL Color in CSS

What this does

Try it yourself

Step 2: Understanding Hue (the Color Wheel)

What this does

Try it yourself

Step 3: Tuning Saturation and Lightness

What this shows

Try it yourself

Step 4: Building a Simple HSL Color Theme

What’s happening here

Try it yourself

Quick Recap and What’s Next

About Percy Mudzinga

Related Articles

Never Miss an Update