Sass hue() Function

Posted in Sass Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The hue() function in Sass is a valuable tool for extracting the hue component from a color. In the HSL (Hue, Saturation, Lightness) color model, hue represents the type of color and is measured as an angle on the color wheel, typically in degrees (0° to 360°).

By using the hue() function, you can retrieve this value, which can then be used to manipulate colors dynamically in your stylesheets.

💡 Syntax

The hue() function takes a single argument:

Syntax

Copied

hue(color)

🔢 Parameters

color: The input color from which you want to extract the hue value (e.g., #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)).

↩️ Return Value

The function returns the hue of the color as an angle in degrees.

📝 Example Usage

Let's explore some examples to see how hue() can be used effectively in your Sass projects.

📜 Example 1: Extracting Hue from a Hex Color

example.scss

Copied

$red-hue: hue(#ff0000); // Red

body {
  background-color: hsl($red-hue, 100%, 50%);
}

In this example, the hue of the red color #ff0000 is extracted and then used to set the background color using the HSL function.

📜 Example 2: Using Hue from an RGB Color

example.scss

Copied

$green-hue: hue(rgb(0, 128, 0)); // Green

.header {
  border-color: hsl($green-hue, 50%, 30%);
}

Here, the hue of a green color specified in RGB is extracted and used to set a border color with modified saturation and lightness.

📜 Example 3: Dynamic Hue Adjustment

example.scss

Copied

$blue: #0066cc; // Blue
$blue-hue: hue($blue);

.button {
  background-color: $blue;
  &:hover {
    background-color: hsl($blue-hue + 30, 100%, 50%);
  }
}

In this example, the hue of a blue color is extracted and then adjusted by adding 30 degrees, creating a dynamic hover effect with a different color.

🎉 Conclusion

The hue() function in Sass is an essential tool for color manipulation, especially when working with the HSL color model. By extracting the hue, you can dynamically adjust and create new color variations, allowing for greater control over your design's color schemes. Understanding how to leverage the hue() function can enhance your ability to create visually appealing and harmonious styles in your projects.

With hue(), you can tap into the power of HSL color manipulation, giving you the flexibility to design with precision and creativity. Experiment with different colors and adjustments to see how the hue() function can elevate your Sass workflow.