Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Color

Sass saturate() Function

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

Photo Credit to CodeToFun

🙋 Introduction

The saturate() function in Sass is used to increase the saturation of a color, making it more vivid and intense.

This function is particularly useful when you need to emphasize colors, create vibrant designs, or adjust the color scheme to achieve a more dynamic visual impact.

Understanding how to use saturate() effectively can help you fine-tune the aesthetics of your website or application.

💡 Syntax

The syntax of the saturate() function is simple and consistent with other Sass color functions. It requires two arguments:

Syntax
Copied
Copy To Clipboard
saturate(color, amount)

đŸ”ĸ Parameters

  • color: The color value you wish to adjust (e.g., #00ff00, rgb(0, 255, 0), hsl(120, 100%, 50%)).
  • amount: A percentage value that determines how much to increase the color's saturation (e.g., 20%).

↩ī¸ Return Value

The function returns a color with its saturation increased by the specified percentage.

📝 Example Usage

Below are some examples that demonstrate how to use the saturate() function in different contexts.

📜 Example 1: Basic Usage

example.scss
Copied
Copy To Clipboard
$original-color: #00ff00; // Green
$saturated-color: saturate($original-color, 40%);

h1 {
  color: $original-color;
  border-bottom: 2px solid $saturated-color;
}

In this example, the green color #00ff00 is saturated by 40%, resulting in a brighter and more intense green for the border.

📜 Example 2: Using HSL Colors

example.scss
Copied
Copy To Clipboard
$original-color: hsl(240, 50%, 50%); // A muted blue
$saturated-color: saturate($original-color, 50%);

a {
  color: $saturated-color;
  text-decoration: none;
}

Here, a blue color specified in HSL format is saturated by 50%, leading to a more vibrant blue for the text links.

📜 Example 3: Saturating Multiple Colors in a Map

example.scss
Copied
Copy To Clipboard
$colors: (
  primary: #ff5733, // A reddish-orange color
  secondary: #33ff57, // A greenish color
  accent: #3357ff  // A blue color
);

@each $name, $color in $colors {
  .btn-#{$name} {
    background-color: saturate($color, 20%);
  }
}

This example demonstrates how to loop through a map of colors and apply the saturate() function to each one, increasing their saturation by 20%.

🎉 Conclusion

The saturate() function in Sass is a powerful tool for enhancing the intensity of colors in your design. By increasing the saturation of specific colors, you can create visually striking elements that stand out and draw attention. Whether you're working on a colorful user interface or need to highlight certain areas of your design, the saturate() function offers a straightforward way to achieve your desired effects.

Mastering the use of saturate() allows you to create bold and dynamic color schemes, giving your projects a vibrant and lively appearance. Experiment with different saturation levels to find the perfect balance for your designs.

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