Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Color

Sass hsl() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
πŸ‘οΈ 16 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass hsl() Function

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
Copy To Clipboard
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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
@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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy