📅  最后修改于: 2021-01-06 04:42:33             🧑  作者: Mango
较少的颜色通道功能是用于设置通道值的内置功能。通道根据颜色定义设置值。 HSL颜色由色调,饱和度和亮度通道组成,而RGB颜色由红色,绿色和蓝色通道组成。
颜色通道功能列表:
Index | Function | Description | Example |
---|---|---|---|
1) | hue | In hsl color space, the hue channel is extracted of the color object. | background: hue(hsl(80, 90%, 40%)); it compiles in the CSS to show only hue value as: background: 80; |
2) | saturation | In hsl color space, the saturation channel is extracted of the color object. | background: saturation(hsl(80, 90%, 40%)); it compiles in the CSS to show only saturation value as: background: 90%; |
3) | lightness | In hsl color space, the lightness channel is extracted of the color object. | background: lightness(hsl(80, 90%, 40%)); it compiles in the CSS to show only lightness value as: background: 30%; |
4) | hsvhue | In hsv color space, the hue channel is extracted of the color object. | background: hsvhue(hsv(80, 90%, 40%)); it compiles in the CSS to show hue value as: background: 80; |
5) | hsvsaturation | In hsl color space, the saturation channel is extracted of the color object. | background: hsvsaturation(hsv(80, 90%, 40%)); it compiles in the CSS to show only saturation value as: background: 90%; |
6) | hsvvalue | In hsl color space, the value channel is extracted of the color object. | background: hsvvalue(hsv(80, 90%, 40%)); it compiles in the CSS to show value as: background: 40%; |
7) | red | The red channel is extracted of the color object. | background: red(rgb(10, 20, 30)); it compiles in the CSS to show only red value: background: 10; |
8) | green | The green channel is extracted of the color object. | background: green(rgb(10, 20, 30)); it compiles in the CSS as shown below:
background: 20;
|
9) | blue | The blue channel is extracted of the color object. | background: blue(rgb(10, 20, 30)); it compiles in the CSS to show only blue value: background: 30; |
10) | alpha | The alpha channel is extracted of the color object. | background: alpha(rgba(5, 15, 25, 1.5)); it compiles in the CSS to show alpha value as: background: 2; |
11) | luma | luma value is calculated of a color object. | background: luma(rgb(50, 250, 150)); it compiles in the CSS to show luma value as: background: 71.2513323%; |
12) | luminance | The luma value is calculated without gamma correction. | background: luminance(rgb(50, 250, 150)); it compiles in the CSS as shown below: background: 78.53333333%; |