Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Color

Sass hue() Function

Posted in Sass Tutorial
Updated on Sep 29, 2024
By Mari Selvan
👁ī¸ 6 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass hue() Function

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

👨‍đŸ’ģ 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