Sass adjust-hue() Function

Posted in Sass Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The adjust-hue() function in Sass allows you to modify the hue of a color by a specified degree. Hue is the component of a color that defines its shade, such as red, blue, or green.

By adjusting the hue, you can shift a color around the color wheel, creating different shades and tones, which is particularly useful for creating color schemes or achieving specific design aesthetics.

💡 Syntax

The syntax of the adjust-hue() function is simple and intuitive. It takes two arguments:

Syntax

Copied

adjust-hue(color, degrees)

🔢 Parameters

color: The original color you want to adjust (e.g., #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)).
degrees: The number of degrees to shift the hue. Positive values rotate the hue clockwise, while negative values rotate it counterclockwise.

↩️ Return Value

The function returns a color with its hue adjusted by the specified number of degrees.

📝 Example Usage

Let's explore how the adjust-hue() function can be utilized in different scenarios.

📜 Example 1: Basic Usage

example.scss

Copied

$original-color: #ff0000; // Red
$adjusted-color: adjust-hue($original-color, 120deg);

body {
  background-color: $original-color;
  color: $adjusted-color;
}

In this example, the red color #ff0000 is adjusted by 120 degrees. The resulting color will be a vibrant green, as 120 degrees is one-third of the way around the color wheel.

📜 Example 2: Creating a Color Scheme

example.scss

Copied

$base-color: #00ff00; // Green
$primary-color: adjust-hue($base-color, 30deg);
$secondary-color: adjust-hue($base-color, -30deg);

nav {
  background-color: $primary-color;
}

footer {
  background-color: $secondary-color;
}

Here, a green color is adjusted by 30 degrees in both directions to create a cohesive color scheme. The adjust-hue() function is perfect for generating analogous colors.

📜 Example 3: Adjusting Hue in a Loop

example.scss

Copied

$base-color: #663399; // Purple

@for $i from 1 through 5 {
  .adjust-hue-#{$i} {
    background-color: adjust-hue($base-color, $i * 15deg);
  }
}

In this example, the hue of a purple color is adjusted by increasing amounts in a loop, creating a series of classes with varying shades of purple.

🎉 Conclusion

The adjust-hue() function in Sass is a powerful and flexible tool for manipulating the hue of colors. By shifting the hue around the color wheel, you can create a wide variety of color variations, enhance your design's visual interest, and develop harmonious color schemes.

Whether you're building a brand's color palette, designing a website, or experimenting with new color combinations, adjust-hue() can help you achieve the perfect hue adjustments with ease. Incorporate this function into your Sass workflow to unlock a new level of color control and creativity.