Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Color

Sass grayscale() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
πŸ‘οΈ 8 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass grayscale() Function

Photo Credit to CodeToFun

πŸ™‹ Introduction

The grayscale() function in Sass is a useful tool for converting colors to their grayscale equivalents.

This function simplifies the process of removing color hues, resulting in a shade of gray that corresponds to the lightness of the original color. It’s particularly handy when you need to create grayscale versions of colored elements or maintain a consistent design theme with varying shades of gray.

πŸ’‘ Syntax

The syntax of the grayscale() function is quite simple. It requires only one argument:

Syntax
Copied
Copy To Clipboard
grayscale(color)

πŸ”’ Parameters

  • color: A color value that you want to convert to grayscale (e.g., #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)).

↩️ Return Value

The function returns a grayscale color, with all hue information removed, leaving only the lightness and saturation values adjusted to create a shade of gray.

πŸ“ Example Usage

Let's look at a few examples to understand how the grayscale() function can be applied in your Sass projects.

πŸ“œ Example 1: Basic Usage

example.scss
Copied
Copy To Clipboard
$original-color: #ff4500; // OrangeRed
$grayscale-color: grayscale($original-color);

header {
  background-color: $original-color;
  border-bottom: 2px solid $grayscale-color;
}

In this example, the bright OrangeRed color #ff4500 is converted to its grayscale equivalent. The grayscale color is then used for the border of a header element, providing a subtle contrast.

πŸ“œ Example 2: Grayscale with RGB Colors

example.scss
Copied
Copy To Clipboard
$original-color: rgb(75, 0, 130); // Indigo
$grayscale-color: grayscale($original-color);

.footer {
  background-color: $grayscale-color;
  color: $original-color;
}

Here, the Indigo color is converted to grayscale and applied as the background color for a footer, while the original color is used for text, creating a visually appealing design.

πŸ“œ Example 3: Grayscale Conversion in a List

example.scss
Copied
Copy To Clipboard
$colors: (
  red: #ff0000,
  green: #00ff00,
  blue: #0000ff
);

@each $name, $color in $colors {
  .#{$name}-grayscale {
    background-color: grayscale($color);
  }
}

This example demonstrates how you can use the grayscale() function within a loop to generate classes for grayscale versions of multiple colors.

πŸŽ‰ Conclusion

The grayscale() function in Sass is an efficient way to create grayscale variations of any color in your stylesheet. By converting colors to grayscale, you can easily achieve a more neutral and cohesive look for certain design elements or create visual emphasis by contrasting grayscale with full-color items.

Understanding how to leverage the grayscale() function allows you to create dynamic and visually balanced styles, making it an essential tool in your Sass toolkit. Experiment with different colors and see how they translate to grayscale to better grasp the subtleties of this function.

πŸ‘¨β€πŸ’» 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