Sass hsl() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The hsl() function in Sass is a useful tool for defining colors using the HSL (Hue, Saturation, Lightness) color model. Unlike the traditional RGB color model, which is based on the primary colors of light (red, green, and blue), the HSL model represents colors in a way that is more intuitive to human perception.

The hsl() function allows you to create colors by specifying their hue, saturation, and lightness, giving you greater control over your color design.

💡 Syntax

The syntax of the hsl() function is simple and involves three main components:

Syntax

Copied

hsl(hue, saturation, lightness)

🔢 Parameters

hue: An integer between 0 and 360, where 0 is red, 120 is green, and 240 is blue.
saturation: A percentage (0% to 100%) where 0% is a shade of gray and 100% is the full color.
lightness: A percentage (0% to 100%) where 0% is black, 100% is white, and 50% is the pure color.

↩️ Return Value

The function returns a color value based on the specified hue, saturation, and lightness.

📝 Example Usage

Let's explore some examples to understand how to use the hsl() function in Sass.

📜 Example 1: Basic HSL Color

example.scss

Copied

$hsl-color: hsl(120, 100%, 50%); // Pure green

header {
  background-color: $hsl-color;
}

In this example, the color is defined using HSL values where the hue is set to 120 (green), the saturation is 100% (fully saturated), and the lightness is 50% (normal brightness). The result is a pure green color.

📜 Example 2: Adjusting Lightness

example.scss

Copied

$light-blue: hsl(210, 100%, 70%); // Light blue

button {
  background-color: $light-blue;
}

Here, a blue color is created by setting the hue to 210. The saturation remains at 100%, but the lightness is increased to 70%, resulting in a lighter blue.

📜 Example 3: Desaturated Color

example.scss

Copied

$desaturated-red: hsl(0, 50%, 50%); // Desaturated red

footer {
  color: $desaturated-red;
}

This example creates a desaturated red color by setting the hue to 0 (red), reducing the saturation to 50%, and setting the lightness to 50%.

📜 Example 4: Using HSL in a Loop

example.scss

Copied

@for $i from 1 through 5 {
  .color-#{$i} {
    background-color: hsl(30 * $i, 100%, 50%);
  }
}

This loop creates a series of classes with colors that rotate through different hues by multiplying the hue by 30 degrees each time.

🎉 Conclusion

The hsl() function in Sass provides a flexible and intuitive way to define colors based on the HSL color model. By allowing you to manipulate hue, saturation, and lightness, it opens up a wide range of possibilities for color design in your projects. Whether you’re looking to create vibrant, fully saturated colors or more subdued tones, the hsl() function gives you the control you need.

Understanding and leveraging the hsl() function can help you create cohesive color schemes and enhance the visual appeal of your web designs. Experiment with different values to discover the endless potential of the HSL color model in your Sass projects.