Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Color

Sass desaturate() Function

Posted in Sass Tutorial
Updated on Aug 24, 2024
By Mari Selvan
👁ī¸ 38 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass desaturate() Function

Photo Credit to CodeToFun

🙋 Introduction

The desaturate() function in Sass is a powerful tool for manipulating colors. It reduces the saturation of a color by a specified amount, making the color less intense.

This function is useful for creating color variations, ensuring color harmony, and achieving specific design aesthetics without needing to manually adjust colors.

💡 Syntax

The syntax of the desaturate() function is straightforward. It takes two arguments:

Syntax
Copied
Copy To Clipboard
desaturate(color, amount)

đŸ”ĸ Parameters

  • color: A color value (e.g., #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)).
  • amount: A percentage value that specifies how much to desaturate the color (e.g., 20%).

↩ī¸ Return Value:

The function returns a color with its saturation reduced by the specified amount.

📝 Example Usage

Let's dive into some examples to see how desaturate() can be used in real-world scenarios.

📜 Example 1: Basic Usage

example.scss
Copied
Copy To Clipboard
$original-color: #ff0000; // Red
$desaturated-color: desaturate($original-color, 50%);

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

In this example, the red color #ff0000 is desaturated by 50%. The resulting color will be a less intense red, moving towards gray.

📜 Example 2: Using RGB Colors

example.scss
Copied
Copy To Clipboard
$original-color: rgb(0, 128, 0); // Green
$desaturated-color: desaturate($original-color, 30%);

button {
  background-color: $original-color;
  border-color: $desaturated-color;
}

Here, a green color specified in RGB is desaturated by 30%, resulting in a duller green color for the border.

📜 Example 3: Desaturating in a Loop

example.scss
Copied
Copy To Clipboard
$base-color: #0066cc; // Blue

@for $i from 1 through 5 {
  .desaturate-#{$i} {
    background-color: desaturate($base-color, $i * 10%);
  }
}

This example creates a series of classes with increasingly desaturated versions of the base blue color.

🎉 Conclusion

The desaturate() function in Sass is a versatile and easy-to-use tool for reducing the saturation of colors. Whether you're aiming to create a muted color palette or need to tone down specific colors for better visual harmony, desaturate() provides a simple and effective solution. Understanding and utilizing this function can significantly enhance your ability to manage colors in your Sass projects.

By mastering desaturate(), you can create sophisticated color schemes and improve the overall aesthetics of your web designs. Experiment with different colors and desaturation levels to see the wide range of possibilities this function offers.

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