Sass Function--color function--HSL function

Introduction to HSL Functions
What are the specific functions of the HSL color function, and what is the function of it:

• HSL ($hue, $saturation, $lightness): Creates a color from the values of Hue (hue), saturation (saturation), and brightness (lightness);
• Hsla ($hue, $saturation, $lightness, $alpha): Creates a color from the values of Hue (hue), saturation (saturation), brightness (lightness), and transparency (alpha);
• Hue ($color): Gets the hue (hue) value from a color;
• saturation ($color): Gets the value of saturation (saturation) from a color;
• lightness ($color): Gets the luminance (lightness) value from a color;
• Adjust-hue ($color, $degrees): Creates a new color by changing the hue value of a color;
• lighten ($color, $amount): Make the color brighter by changing the luminance value of the color, creating a new color;
• Darken ($color, $amount): By changing the luminance value of the color, darken the color and create a new color;
• saturate ($color, $amount): Creates a new color by changing the saturation value of the color to make the color more saturated
• desaturate ($color, $amount): Create a new color by changing the saturation value of the color so that the color is less saturated;
• grayscale ($color): Turns a color into gray, equivalent to Desaturate ($color, 100%);
• complement ($color): Returns a complementary color equivalent to Adjust-hue ($color, 180deg);
• Invert ($color): Invert an inverted color, the red, green, and blue values are reversed, and the transparency is the same.

1>> HSL (200,30%,60%)//via h200,s30%,l60%Create a color2 #7aa3b83>> Hsla (200,30%,60%,.8)//through h200,s30%,l60%,a80%Create a color4RGBA (122, 163, 184, 0.8)5>> Hue (#7ab)//Get the hue value of #7ab color6 195deg7>> Saturation (#7ab)//Get saturation value of #7ab color833.33333%9>> Lightness (#7ab)//Get the luminance value of #7ab colorTen60% One>> Adjust-hue (#f36,150deg)//change the hue value of #f36 color to 150deg A #33ff66 ->> Lighten (#f36,50%)//#f36 color brightness increase 50% - #FFFFFF the>> Darken (#f36,50%)//reduce the #f36 color brightness 50% - #33000d ->> Saturate (#f36,50%)//#f36 color saturation increased 50% - #ff3366 +>> Desaturate (#f36,50%)//Reduce the #f36 color saturation 50% - #cc667f +>> Grayscale (#f36)//Turn #f36 color into grey A #999999 at>> Complement (#f36) - #33FFCC ->> Invert (#f36) - #00cc99

The most common of the HSL functions should be lighten (),darken (),saturate (),desaturate (),grayscale () ,complement () , and invert () several functions.

HSL function-lighten ()
lighten () and darken () two functions are adjusted around the luminance value of the color, where the lighten () function makes the color brighter , and the opposite The darken () function causes the color to become darker . This luminance value can be between 0~1 , but commonly used is usually between 3%~20% .
First define a color variable:

$baseColor: #ad141e;

Use the lighten () and darken () functions to modify the luminance value of 10%:

1 //scss 2  {3    background: lighten ($baseColor, 10%);  4 }5. Darken{6    background: darken ($baseColor, 10%) ; 7 }

Compiled CSS code:

1 //css 2  {3    background: #db1926;  4 }5{6    background: #7f0f16;  7 }

Use the function lightness () function to verify the change in brightness values between the three colors:

>> Lightness (#ad141e)//brightness value of primary color 37.84314%>> lightness (#db1926)// Increase 10% 47.84314%>> lightness (# 7F0F16) based on the luminance value of the primary color//Decrease 10% 27.84314% based on the luminance value of the primary color

When the luminance value of the color is close to or greater than 100%, the color turns white and the color becomes black when the luminance value of the color is close to or less than 0 o'clock.

1 //scss 2 $baseColor: #ad141e; 3  {4    background: lighten ($baseColor, 70%);  5 }6. Darken{7    background: darken ($baseColor, 40%) ; 8 }

Compiled CSS code:

1 //css 2  {3    background: White;  4 }5{6    background: black;  7 }

HSL function-saturate ()
saturate () , Desaturate () These two functions are through change the saturation of the color to get a new color.

1 //scss 2 $baseColor: #ad141e; 3  {4    background: saturate ($baseColor, 30%); //increase saturation on the basis of primary color saturation 5 }6{7    background: desaturate ($baseColor, 30%) ; //Reduce saturation on the basis of primary color saturation 8 }

Compiled CSS code:

1 //css 2  {3    background: #c1000d;  4 }5{6    background: #903137;  7 }

The color has changed. Also use the saturation () function in the terminal to calculate what the changes are:

1 >> Saturation (#ad141e)//saturation of Primary colors 2 79.27461% 3 >> Saturation (#c1000d)//increased by 30% on the basis of primary color saturation, more than 100% at 100% 4 100% 5 >> Saturation (#903137)//reduced by 30% on the basis of primary color saturation, less than 0 at 0 6 49.2228%

HSL function-adjust-hue () function
by Adjust the hue of the color convert one new color . He needs a color and hue degree value. Usually this degree value is in -360deg to 360deg , of course, it can be percent :

1 //scss 2 $baseColor: #ad141e; 3  {4    background: Adjust-hue ($baseColor, 30deg);  5 }6{7    background: Adjust-hue ($baseColor, 30%);  8 }

Compiled CSS code:

1 //css 2  {3    background: #ad5614;  4 }5{6    background: #ad5614;  7 }

Hue values before and after color conversion can be obtained by using the hue () function:

>> Hue (#ad141e)//original color hue value 356. 07843deg>> Hue (#ad5614)// 30deg 25.88235deg on the basis of color hue

In the HSL color expression, the hue is between 360 and A, negative value counterclockwise turn, positive value clockwise . In this example, the hue value of the primary color is about 356deg, plus 30deg, the new color becomes 386deg, but our color plate does not have a greater value than 360deg, when the value of the new color will not be 386deg, that will do? In fact, it is very simple, when the value is greater than 360deg , indicating that the color plate turns round, continue to clockwise to the remaining value (here is 26deg), then this continuation of the values of the new color is the hue value. Conversely, the resulting negative value is the same reason.

HSL function-grayscale () function
saturation value directly to 0% , so this function has the same function as Desaturate ($color, 100%) . Generally this function can be color color converted to varying degrees of gray .

1 //scss 2 $baseColor: #ad141e; 3  {4    background: grayscale ($baseColor);  5 }6{7    background: desaturate ($baseColor, 100%) ; 8 }

Compiled CSS code:

1 //css 2  {3    background: #616161;  4 }5{6    background: #616161;  7 }

Look at the changes in the calculated HSL values:

1>> Hue (#ad141e)2356. 07843deg3>> Hue (#616161)4 0deg5>> Saturation (#ad141e)679.27461%7>> Saturation (#616161)80%9>> Lightness (#ad141e)Ten37.84314% One>> Lightness (#616161) A38.03922%

The grayscale () function handles the color, and its greatest feature is that the saturation of the color is 0.

Sass Function--color function--HSL function