Updated April 10, 2023
Introduction to SASS Color Functions
Sass color functions are incredible ways to help design decision-making when operating in the browser and they have a flexibility that even challenges the best graphics software. Sass provides a variety of useful functions that you can use to quickly change and modify colors. Many color functions work in a single color, but others can be used in various ways to combine two colors.
Sass arrives with functions that your CSS properties can easily add to colors. Such functions can be extremely effective when used correctly. They bring a few of the sting out of the colors they choose and manipulate. When using variables, they can dramatically speed development.
Top 6 SASS Color Functions
We will discuss how to use color functions with the help of examples.
1. Darken and Lighten Color Functions
They darken and lighten color functions make a color dark and lighter respectively.
Syntax
darken($color, $amount)
lighten($color, $amount)Example
Create an HTML file called sass_light_darken.html with the below code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Color Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_darken_lighten.css"/>
</head>
<body><br>
<div class="heading">
<p>Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</p>
</div>
<div class="heading1">
<p>It is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain.</p>
</div>
</body>
</html>Now create a file called sass_darken_lighten.scsswith the below code:
$head_color: #FFD700;
.heading {
background: darken($head_color,15%);
}
.heading1 {
background: lighten($head_color,15%);
}Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
sass –watch sass_ darken_lighten.scss: sass_darken_lighten.cssNow, execute the file with the above command and it will create the sass_darken_lighten.css file as shown in the below code:
.heading {
background: #b39700;
}
.heading1 {
background: #ffe34d;
}Output:
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
2. Mix Color Function
SASS allows mixing of two colors together.
Syntax
mix($color1, $color2, 20%)In this syntax, 20% is an opacity value, and you can change as per your choice.
Example
Create an HTML file called sass_mix.html with the below code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Color Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_mix.css"/>
</head>
<body><br>
<div class="heading">
<p>Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</p>
</div>
<div class="heading1">
<p>It is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain.</p>
</div>
</body>
</html>Create a file called sass_mix.scss with the below code:
$color_one: #6495ED;
$color_two: #66CDAA;
.heading {
background: mix($color_one,$color_two,20%);
}
.heading1 {
background: mix($color_one,$color_two,40%);
}Execute the file with the command which is shown in the previous example and it will create the sass_mix.css file with the below code:
.heading {
background: #66c2b7;
}
.heading1 {
background: #65b7c5;
}Output: Execute the same steps as shown in the above example to display the output.
3. Combine Functions
SASS enables us to combine different types of functions to generate a new color.
Syntax
darken(mix($color1,$color2,20%), 10%)Here, we will combine darken function with mixed function to produce another color as shown in the below example.
Example
Create an HTML file called sass_combine_function.html with the below code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Color Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_combine.css"/>
</head>
<body><br>
<div class="heading">
<p>Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</p>
</div>
</body>
</html>Create a file called sass_combine.scss with the below code:
$color_one: #F5DEB3;
$color_two: #DEB887;
.heading {
background: darken(mix($color_one,$color_two,25%), 35%);
}Execute the above files and it will create the sass_combine.css file with the below code:
.heading {
background: #9d6c27;
}Output:
4. Change Color Function
The function change-color() provides new values to one or more properties of a color.
Syntax:
change-color($color, $red, $green, $blue, $hue, $saturation, $lightness, $alpha)$color is a required color and the rest of the parameters are optional. It replaces the $color variable with the given value in one or more specified parameters.
Example
Create an HTML file called sass_change_color.html with the below code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Color Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_change_color.css"/>
</head>
<body><br>
<div class="heading">
<p>Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</p>
</div>
</body>
</html>Create a file called sass_change_color.scss with the below code:
.heading {
color: change-color(#8B008B, $lightness: 20%, $alpha: 0.5);
}Execute the above files and it will create the sass_change_color.css file with the below code:
.heading {
color: rgba(102, 0, 102, 0.5);
}Output:
5. Saturate Color Function
Increases the saturation of the color defined by the percentage given in $amount.
Syntax:
saturate($color, $amount)Example
Create an HTML file called sass_saturate.html with the below code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Color Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_saturate.css"/>
</head>
<body><br>
<div class="heading">
<p>Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</p>
</div>
</body>
</html>Create a file called sass_saturate.scsswith the below code:
.heading{
color: saturate(#A52A2A, 40%);
}Execute the above files and it will create the sass_saturate.css file with the below code:
.heading {
color: #ce0101;
}Output:
6. Desaturate Color Function
Decreases the saturation of the color defined by the percentage given in $amount.
Syntax
desaturate($color, $amount)Example
Create an HTML file called sass_desaturate.html with the below code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Color Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_desaturate.css"/>
</head>
<body><br>
<div class="heading">
<p>Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</p>
</div>
</body>
</html>Create a file called sass_desaturate.scss with the below code:
.heading{
color: desaturate(#006400, 25%);
}Execute the above files and it will create the sass_desaturate.css file with the below code:
.heading {
color: #0d580d;
}Output:
Conclusion
In this article, we have studied SASS color functions which manipulates the elements of color. There are several places where such color functions are used like for gradients, borders, and shadows. Just adjust a color variable when you need a slightly darker border and a slightly lighter inset shadow, and then let Sass should be doing the rest for you.
Recommended Articles
This is a guide to SASS Color Functions. Here we discuss an introduction to SASS colors with top 6 Functions and examples for better understanding. You can also go through our other related articles to learn more –
