Sass function -- color function -- HSL function, sass function ---- hsl

Sass function -- color function -- HSL function, sass function ---- hsl

HSL Functions
What are the specific functions and functions of the HSL color function:

• Hsl ($ hue, $ saturation, $ lightness): Creates a color based on the values of hue, saturation, and lightness;
• Hsla ($ hue, $ saturation, $ lightness, $ alpha): Creates a color by using the values of hue, saturation, lightness, and alpha;
• Hue ($ color): Gets the hue value from a color;
• Saturation ($ color): Gets the saturation value from a color;
• Lightness ($ color): Obtain the brightness value from a color;
• Adjust-hue ($ color, $ degrees): Creates a new color by changing the color value;
• Lighten ($ color, $ amount): Change the brightness of the color to make the color brighter and create a new color;
• Darken ($ color, $ amount): Change the brightness of the color to make the color darker and create a new color;
• Saturate ($ color, $ amount): Creates a new color by changing the color saturation value to make the color more saturated.
• Desaturate ($ color, $ amount): Creates a new color by changing the color saturation value to make the color less saturated;
• Grayscale ($ color): Turns a color into gray, equivalent to desaturate ($ color, 100% );
• Complement ($ color): Return a complementary color, equivalent to adjust-hue ($ color, 180deg );
• Invert ($ color): Reversed to a reversed color. The values of red, green, and blue are reversed, while the transparency remains unchanged.

1> hsl (60%, 60%) // create a color by h200, s30 %, l60 % 2 #7aa3b8 3> hsla ,. 8) // use h200, s30 %, l60 %, a80 % to create a color 4 rgba (122,163,184, 0.8) 5> hue (# 7ab) // obtain the # 7ab color's color phase value 6 195deg 7> saturation (# 7ab) // obtain the # 7ab color's saturation value 8 33.33333% 9> lightness (# 7ab) // obtain the # 7ab color brightness value 10 60% 11> adjust-hue (# f36, 150deg) // change # The color of f36 to 150deg12 #33ff6613> lighten (# f36, 50%) // increase the # f36 color brightness by 50% 14 # ffffff15> darken (# f36, 50%) // decrease the # f36 color brightness by 50% 16 #33000d17> saturate (# f36, 50%) // increase the # f36 color saturation by 50% 18 # ff310419> desaturate (# f36, 50%) // reduce # f36 color saturation by 50% 20 # cc667f21> grayscale (# f36) // change # f36 color to Gray 22 #99999923> complement (# f36) 24 #33ffcc25> invert (# f36) 26 #00cc99

The most common HSL functions are lighten (), darken (), saturate (), desaturate (), grayscale (), complement (), and invert.

 

 

 

HSL function-lighten ()
The lighten () and darken () functions both adjust the brightness value of the color. The lighten () function makes the color brighter, opposite to the darken () function () the function will make the color darker. The brightness value can be 0 ~ 1, but usually 3% ~ In the range of 20%.
First, define a color variable:

$baseColor: #ad141e;

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

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

Compiled css code:

1 //CSS2 .lighten {3     background: #db1926;4 }5 .darken {6     background: #7f0f16;7 }

Use the lightness () function to verify the brightness changes between the three colors:

> Lightness (# ad141e) // Brightness Value of the primary color: 37.84314%> lightness (# db1926) // increase by 10% Based on the brightness value of the primary color.> lightness (#7f0f16) // reduce the brightness value of the primary color by 10% or 27.84314%.

When the brightness value of the color is close to or greater than 100%, the color turns white. If the brightness value of the color is close to or less than 0, the color turns black.

 

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

 

Compiled css code:

1 //CSS2 .lighten {3     background: white;4 }5 .darken {6     background: black;7 }

 

 

 

HSL function-saturate ()
Saturate (),Desaturate ()The two functions are used to obtain a new color by changing the color saturation.

1 // SCSS2 $ baseColor: # ad141e; 3. saturate {4 background: saturate ($ baseColor, 30%); // increase the saturation by 5} 6 based on the primary color saturation. desaturate {7 background: desaturate ($ baseColor, 30%); // reduce the saturation by 8 based on the primary color saturation}

Compiled css code:

1 //CSS2 .saturate {3     background: #c1000d;4 }5 .desaturate {6     background: #903137;7 }

The color has changed. Similarly, the saturation () function is used to calculate the changes in the terminal:

1> saturation (# ad141e) // saturation of primary colors 2 79.27461% 3> saturation (# c1000d) // increase by 30% based on primary color saturation, when the value exceeds 100%, the value is calculated by 100%. 4 100% 5> saturation (#903137) // The value is reduced by 30% based on the primary color saturation. If the value is less than 0, the value is calculated by 49.2228% Based on 0.

 

 

 

 

HSL function-adjust-hue () function
Convert a new color by adjusting the color. He needs a color and hue value. Generally, this degree is between-360deg and 360deg. Of course, it can be a percentage:

1 //SCSS2 $baseColor: #ad141e;3 .adjust-hue-deg {4     background: adjust-hue($baseColor,30deg);5 }6 .adjust-hue-per {7     background: adjust-hue($baseColor,30%);8 }

Compiled css code:

1 //CSS2 .adjust-hue-deg {3     background: #ad5614;4 }5 .adjust-hue-per {6     background: #ad5614;7 }

You can useHue ()The function returns the color values before and after the color conversion:

> Hue (# ad141e) // original color phase value 356.07843deg> hue (# ad5614) // added 30deg25. 88235deg based on primary color.

InHSLIn color expression, the color is from-360 and 360Between, negative values turn counter-clockwise, positive values turn clockwise. In this example, the color of the primary color is about 356deg. After 30deg is added, the new color is changed to 0000deg, but our color Board has no greater value than 360deg, at this time, the value of the new color is not 0000deg. What should I do? In fact, it is very simple. When the value is greater than 360deg, it indicates that the color disk has completed a circle and continues to turn the remaining value clockwise (26deg here). Then the value of this conversion is the color phase value of the new color. Otherwise, the negative value is the same.

 

 

 

HSL function-grayscale () function
This function will directly adjust the color saturation value0%, So this function correspondsDesaturate ($ color, 100%)The functions are the same. In general, this function can convert the color to different degrees of gray.

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

Compiled css code:

1 //CSS2 .grayscale {3     background: #616161;4 }5 .desaturate {6     background: #616161;7 }

Let's take a look at the changes in the calculated HSL values:

 1 >> hue(#ad141e) 2 356.07843deg 3 >> hue(#616161) 4 0deg 5 >> saturation(#ad141e) 6 79.27461% 7 >> saturation(#616161) 8 0% 9 >> lightness(#ad141e)10 37.84314%11 >> lightness(#616161)12 38.03922%

Grayscale ()The biggest feature of the color processed by the function is that the color saturation is 0.