Sass change-color() Function

Posted in Sass Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 27 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The change-color() function in Sass is a versatile tool that allows you to modify specific components of a color, such as its hue, saturation, lightness, alpha (transparency), red, green, or blue values.

This function is especially useful when you want to adjust a color without creating an entirely new one from scratch. It provides a concise and efficient way to fine-tune colors directly within your Sass code.

💡 Syntax

The syntax of the change-color() function is flexible, allowing you to modify one or multiple properties of a color at once.

Syntax

Copied

change-color(color, $red: value, $green: value, $blue: value, $hue: value, $saturation: value, $lightness: value, $alpha: value)

🔢 Parameters

color: The original color you wish to modify.
$red, $green, $blue (Optional): The new values for the red, green, and blue channels, respectively. These can be absolute values (e.g., 255) or percentage changes (e.g., +20%).
$hue, $saturation, $lightness (Optional): The new values for the hue, saturation, and lightness of the color. These can also be specified as absolute or relative values.
$alpha (Optional): The new alpha value, which controls the transparency of the color.

↩️ Return Value

The function returns a new color with the specified changes applied.

📝 Example Usage

Below are some examples demonstrating how to use the change-color() function in different scenarios.

📜 Example 1: Adjusting the Hue and Saturation

example.scss

Copied

$base-color: #3498db; // Light blue
$modified-color: change-color($base-color, $hue: 200, $saturation: -20%);

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

In this example, the hue of the light blue color #3498db is changed to 200 degrees, and its saturation is decreased by 20%, resulting in a more muted color.

📜 Example 2: Modifying the Alpha Value

example.scss

Copied

$base-color: rgba(255, 99, 71, 0.8); // Tomato color with 80% opacity
$modified-color: change-color($base-color, $alpha: 0.5);

.button {
  background-color: $modified-color;
}

Here, the alpha value of a tomato color is reduced from 0.8 to 0.5, making it more transparent.

📜 Example 3: Adjusting RGB Values

example.scss

Copied

$base-color: #ff6347; // Tomato color
$modified-color: change-color($base-color, $red: 220, $blue: +10%);

header {
  color: $modified-color;
}

This example changes the red value of the tomato color to 220 and increases the blue component by 10%, resulting in a slightly altered hue.

📜 Example 4: Changing Multiple Properties at Once

example.scss

Copied

$base-color: #e74c3c; // Red
$modified-color: change-color($base-color, $hue: 180, $lightness: +15%, $alpha: 0.7);

.card {
  border-color: $modified-color;
}

In this example, multiple properties are modified: the hue is shifted to 180 degrees, lightness is increased by 15%, and the alpha value is set to 0.7.

🎉 Conclusion

The change-color() function in Sass is a powerful tool that offers fine control over color properties. It enables you to make precise adjustments to your colors without needing to define new ones, which can be particularly useful in maintaining consistency across a design system. By leveraging change-color(), you can quickly and easily tweak colors to achieve the exact look you want in your web projects.

Whether you're adjusting hues for a theme or refining the transparency of an overlay, the change-color() function allows you to handle color modifications with efficiency and ease. Experiment with different combinations to fully harness its potential in your Sass workflows.