Tutorials

Sass adjust-color() Function

Posted in Sass Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 102 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The adjust-color() function in Sass is a versatile tool that allows you to modify the properties of a color, such as its hue, saturation, lightness, red, green, blue, alpha, etc.

This function is particularly useful when you need to fine-tune colors to achieve the desired aesthetic or to create color variations dynamically in your stylesheets.

💡 Syntax

The syntax of the adjust-color() function is flexible, allowing you to modify multiple color properties at once. Here's the basic structure:

Syntax

Copied

adjust-color(color, $red: 0, $green: 0, $blue: 0, $hue: 0, $saturation: 0%, $lightness: 0%, $alpha: 0)

🔢 Parameters

color: The base color you want to adjust.
$red: The amount by which to adjust the red component (can be positive or negative).
$green: The amount by which to adjust the green component (can be positive or negative).
$blue: The amount by which to adjust the blue component (can be positive or negative).
$hue: The degree by which to adjust the hue (can be positive or negative).
$saturation: The percentage by which to adjust the saturation (can be positive or negative).
$lightness: The percentage by which to adjust the lightness (can be positive or negative).
$alpha: The amount by which to adjust the alpha (opacity) value (can be positive or negative).

↩️ Return Value

The function returns a new color with the specified adjustments applied to the original color.

📝 Example Usage

Let's explore some examples to understand how the adjust-color() function can be used to tweak colors.

📜 Example 1: Adjusting Hue

example.scss

Copied

$original-color: #ff8800; // Orange
$adjusted-color: adjust-color($original-color, $hue: 60);

div {
  background-color: $adjusted-color;
}

In this example, the hue of the original orange color is adjusted by 60 degrees, resulting in a new color that shifts towards yellow.

📜 Example 2: Adjusting Saturation and Lightness

example.scss

Copied

$original-color: #3498db; // Blue
$adjusted-color: adjust-color($original-color, $saturation: -20%, $lightness: 10%);

a {
  color: $adjusted-color;
}

Here, the blue color is desaturated by 20% and lightened by 10%, creating a softer, lighter blue suitable for text.

📜 Example 3: Adjusting RGB Values

example.scss

Copied

$original-color: rgb(255, 0, 0); // Red
$adjusted-color: adjust-color($original-color, $red: -50, $blue: 50);

button {
  background-color: $adjusted-color;
}

In this example, the red color is modified by reducing the red component by 50 and increasing the blue component by 50, resulting in a purplish hue.

📜 Example 4: Multiple Adjustments

example.scss

Copied

$original-color: #ff6600; // Bright orange
$adjusted-color: adjust-color($original-color, $hue: 30, $saturation: 10%, $lightness: -5%, $alpha: -0.1);

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

This example demonstrates how you can make multiple adjustments to a color at once, tweaking its hue, saturation, lightness, and alpha for a customized result.

🎉 Conclusion

The adjust-color() function in Sass is an essential tool for developers who need precise control over color manipulation. By allowing you to adjust multiple color properties at once, this function offers a powerful way to create color schemes that are dynamic and adaptable. Whether you’re adjusting colors for a subtle effect or making dramatic changes, adjust-color() gives you the flexibility to fine-tune your designs to perfection.

Incorporating adjust-color() into your Sass toolkit can significantly enhance your ability to manage and manipulate colors in your projects, leading to more refined and cohesive design outcomes.