Do you think IIT Guwahati certified course can help you in your career?
INTRODUCTION
Sass nowadays has become the most popular option to avoid rewriting CSS codes because of its attractive features. Somehow, each of us wants to opt for a path that reduces time and becomes compelling enough, so Sass has given compatibility in the same way. Now one such property that Sass offers to us is of color. Extra attention to colors needs to be given to make your application's visibility attractive. Colors are an integral part hence, the concept of Sass color came into the picture. Therefore, let's check out the Sass color feature through this blog. This blog gives a clear description of sass color and its effectiveness.
BASICS
It's essential to get a clear understanding of basic color schema and its elements. It is divided into three parts: hue, saturation, and value.HUE includes red, blue, and green.
Red Green Blue
SATURATION
Saturation measures how much hue exists in the color means its intensity. The purity of color is directly proportional to saturation.
100% 50% 25%
VALUE
Value is the measure of how dark or light the color is.
100% 50% 25%
COLOR CREATION FUNCTIONS
Now let’s look at the color functions that Sass provides.
SASS SET COLOR FUNCTIONS
After reading the above points, we know what color components we will work on; let's look at Sass's functions. We'll start with functions that create a color based on one of the two-color models. The rgb() and HSL() help produce more concise CSS. The Sass transpiler will keep these functions as it is in the CSS.
The remaining three functions, grayscale(), invert() and complement() create a new color based on an existing one. Here, Invert () inverts each red, green and blue value and complement(), which rotates the color by 180 degrees and returns very similar but not the same results. Let's have a look at the various set color functions.
FUNCTION
DESCRIPTION
EXAMPLE
rgb(red, green, blue)
Here the color is made as per the RGB model, and the value is between integer, i.e., 0 to 255, and percentage value from 0 to 100%
rgb(255,0,0); this will show the value red as other fields are set to 0.
rgba(red,blue,green,alpha)
Here, an extra parameter is added in the rgb model, which is alpha. Alpha stands for the opacity of the color, and its value lies between 0.0(fully transparent) to 1.0(fully opaque)
rgba(255,0,0,0.5); this means the color is red with opacity.
HSL(hue, saturation, lightness)
Hue is the degree on the color wheel. Its value lies between 0 to 360 degrees,360 is red, 120 is green, 240 is blue. Saturation is the % value; 0% is the shade of grey, and 100% is the full color. Lightness is also a percentage value of 0% is black, and 100% is white.
hsl(240,100%,75%); the color is light blue.
hsl(122, 64, 56)
Result: #47d74c
hsla(hue, saturation, lightness, alpha)
hsl model is used with the alpha value where 0.0 is fully transparent and 1.0 is fully opaque.
hsla(240,100%,50%,0.4); green with opacity.
grayscale(color)
It sets the gray color with the same lightness as the color
grayscale(#7fffd4)
Result: #c6c6c6
complement(color)
It sets the color as the complement of the color
complement(#7fffd4)
Result: #ff7ffa
invert(color)
It sets the color as the inverse of color
invert(black)
Result: White
SASS GET COLOR FUNCTIONS
Now to extract the colors to fetch the results, we will use some functions in our code. Below is the list of some of them.
FUNCTION
DESCRIPTION
EXAMPLE
green(color)
This will give green color as a number between 0 to 255
green(green)
Result: 255
red(color)
This will give red color as a number between 0 to 255
red(#7fffd4)
Result:127
blue(color)
This will give blue color as a number between 0 to 255
blue(green)
Result:0
blue(blue)
Result:255
hue(color)
This will be given a hue of color. The value will lie between 0deg and 360deg
hue(#d747d2)
Result: 302deg
saturation(color)
This will give value of saturation of color ranging between 0% to 100%.
saturation(#d747d2)
Result: 64%
lightness(color)
This will give the value of lightness of color ranging between 0% to 100%.
lightness(#7fffd4)
Result:74.9%
alpha(color)
This will give the alpha channel of color ranging between numbers 0 to 1
alpha(#7fffd4)
Result: 1
opacity(color)
This will give the opacity of color ranging between number 0 to 100
opacity(rgba(127, 80, 200, 0.3));
Result: 0.3
SASS MANIPULATE COLOR FUNCTIONS
With the help of the functions that are mentioned below, we can get whatever color we want. The value can vary depending on the values we will add to our code.
FUNCTION
DESCRIPTION & EXAMPLE
mix(color1, color2, weight)
With the help of this function, the color is made using the combination of color1 and color2. The weight's value lies between 0% to 100%. If a more significant weight value is there, then color one is used more, and if a lesser weight value is used, then color two is used. The default value of the weight parameter is 50%.
mix(#FFFF00, #000FF, 90)
Result:#ADFF2F
adjust-hue(color, degree)
The color's hue is adjusted with a value from -360 degree to 360 degree through this function.
This function scales the one or more parameters of the color
Example: scale-color(#008000, $green:50%)
Result: #90EE90
rgba(color, alpha)
This function helps to give a color a different alpha channel value.
Example: rgba(#7fffd4, 60%)
Result: rgba(127, 255, 212, 0.6)
lighten(color, amount)
This function helps create a lighter version of the color with a specific value between 0% to 100%. This parameter increases the HSL lightness with that value.
Example:lighten(#ad4038, 30)
Result: #d37e78
darken(color, amount)
This function helps create a darkened version of the color with a specific value between 0% to 100%. This parameter decreases the HSL lightness with that value.
Example: darken(#ad4038, 30)
Result: #60241f
saturate(color, amount)
This function helps create a saturated version of the color with a specific value between 0% to 100%. This parameter increases the HSL lightness with that value.
Example:
saturate(#ad4038, 30)
Result: #c42c22
desaturate(color, amount)
This function helps to create a lesser saturated version of the color with a specific value between 0% to 100%. This parameter decreases the HSL lightness with that value.
Example: desaturate(#ad2038, 40)
Result: #c42c21
opacify(color, amount)
This function helps create a more opaque version of the color with a specific value between 0 to 1. This parameter increases the alpha channel by that amount.
Example: opacify(#ad4038,40)
Result: rgba(172,64,56,2)
fade-in(color, amount)
This function helps create a more opaque version of the color with a specific value between 0 to 1. This parameter increases the alpha channel by that amount.
Example: fade-in(#ad4038, 60)
Result: rgba(172,65,56,1)
transparentize(color, amount)
This function helps create a more transparent version of the color with a specific value lying between 0 to 1. This parameter decreases the alpha channel by that amount.
Example: transparentize(#ad4038, 50)
Result: rgba(172,65,56,0.5)
fade-out(color, amount)
This function helps create a more transparent version of the color with a specific value lying between 0 to 1. This parameter decreases the alpha channel by that amount.
Example: fade-out(#ad4038, 40)
Result: rgba(172,62,56,1)
FAQs
Why should one opt for the Sass color feature? Sass color feature enables us to write accessible and effective code. It is more stable and fully compatible with CSS3.
How to calculate complement and invert color in Sass? For complement, Step 1: Convert the color value to RGB Step 2: Add the highest and lowest RGB values Step 3: Subtract each of the original RGB values from the number in step 2 For Invert, Convert the color value to RGB Flip the values by subtracting the original RGB values from 255
What does A stand for in RGBA. A means Alpha, and it stands for the opacity of the color, and its value lies between 0.0(fully transparent) to 1.0(fully opaque).
KEY TAKEAWAYS
Through this blog, a clear vision of Sass's color is being depicted. As Sass is a very efficient feature because of the features and adversity that it offers, that's why it's been used a lot. Sass color is a very necessary topic because colors play a crucial role in the presentation. The functions that are being shown in this Sass color blog with parts that are going to help you add exclusive features to your code. Therefore, do implement it to see good results.
If you found this blog worth it, feel free to upvote. And don't stop here. Explore more Sass blogs like Sass variables, Sass Introduction, etc., to enhance your knowledge.
310+ registered 
