Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Color

Sass lighten() Function

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

Photo Credit to CodeToFun

🙋 Introduction

The lighten() function in Sass is a powerful tool for manipulating colors by increasing their lightness.

This function is particularly useful when you need to create lighter shades of a base color, allowing for more design flexibility and creating visual hierarchy without needing to select different colors manually.

💡 Syntax

The lighten() function takes two arguments:

Syntax
Copied
Copy To Clipboard
lighten(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 lighten the color (e.g., 20%).

↩ī¸ Return Value

The function returns a color with its lightness increased by the specified amount.

📝 Example Usage

Let's explore some examples to see how lighten() can be applied in various situations.

📜 Example 1: Basic Usage

example.scss
Copied
Copy To Clipboard
$original-color: #3498db; // Blue
$lightened-color: lighten($original-color, 20%);

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

In this example, the blue color #3498db is lightened by 20%. The resulting color will be a lighter shade of blue.

📜 Example 2: Using HSL Colors

example.scss
Copied
Copy To Clipboard
$original-color: hsl(120, 100%, 50%); // Green
$lightened-color: lighten($original-color, 15%);

header {
  background-color: $original-color;
  border-color: $lightened-color;
}

Here, a green color specified in HSL is lightened by 15%, resulting in a softer green for the border.

📜 Example 3: Lightening Multiple Colors

example.scss
Copied
Copy To Clipboard
$colors: (
  primary: #e74c3c, // Red
  secondary: #2ecc71, // Green
  accent: #9b59b6  // Purple
);

@each $name, $color in $colors {
  .#{$name}-light {
    background-color: lighten($color, 10%);
  }
}

This example uses a map of colors and lightens each one by 10%, applying the lightened color to different classes.

🎉 Conclusion

The lighten() function in Sass is an essential tool for any developer working with color in their stylesheets. By increasing the lightness of a color, you can create visually appealing designs with subtle variations and emphasis. Whether you're lightening colors for hover states, background shades, or overall design consistency, lighten() provides a simple and effective way to achieve your desired result.

Mastering the lighten() function allows you to build dynamic, responsive color schemes that enhance the user experience. Experiment with different colors and lightening levels to unlock the full potential of this powerful function in your Sass projects.

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