颜色通道功能（Color Channel Functions）

优质

小牛编辑

128浏览

2023-12-01

在本章中，我们将了解颜色通道功能在LESS中的重要性。 LESS支持很少的内置函数，可以设置关于通道的值。通道根据颜色定义设置值。 HSL颜色具有色调，饱和度和亮度通道，RGB颜色具有红色，绿色和蓝色通道。下表列出了所有颜色通道功能 -


background: hue(hsl(75, 90%, 30%));
background: saturation(hsl(75, 90%, 30%));
background: lightness(hsl(75, 90%, 30%));
background: hsvhue(hsv(75, 90%, 30%));
background: hsvsaturation(hsv(75, 90%, 30%));
background: hsvvalue(hsv(75, 90%, 30%));
background: red(rgb(5, 15, 25));
background: green(rgb(5, 15, 25));
background: blue(rgb(5, 15, 25));
background: alpha(rgba(5, 15, 25, 1.5));
background: luma(rgb(50, 250, 150));
background: luminance(rgb(50, 250, 150));

Sr.No.	功能说明	例
1	hue 在HSL颜色空间中，从颜色对象中提取色调通道。	`background: hue(hsl(75, 90%, 30%));` 它在CSS中编译，如下所示 - `background: 75;`
2	saturation 在HSL颜色空间中，从颜色对象中提取饱和度通道。	`background: saturation(hsl(75, 90%, 30%));` 它在CSS中编译，如下所示 - `background: 90%;`
3	lightness 在HSL颜色空间中，亮度通道从颜色对象中提取。	`background: lightness(hsl(75, 90%, 30%));` 它在CSS中编译，如下所示 - `background: 30%;`
4	hsvhue 在HSV颜色空间中，从颜色对象中提取色调通道。	`background: hsvhue(hsv(75, 90%, 30%));` 它在CSS中编译，如下所示 - `background: 75;`
5	hsvsaturation 在HSL颜色空间中，从颜色对象中提取饱和度通道。	`background: hsvsaturation(hsv(75, 90%, 30%));` 它在CSS中编译，如下所示 - `background: 90%;`
6	hsvvalue 在HSL颜色空间中，从颜色对象中提取值通道。	`background: hsvvalue(hsv(75, 90%, 30%));` 它在CSS中编译，如下所示 - `background: 30%;`
7	red 从颜色对象中提取红色通道。	`background: red(rgb(5, 15, 25));` 它在CSS中编译，如下所示 - `background: 5;`
8	green 从颜色对象中提取绿色通道。	`background: green(rgb(5, 15, 25));` 它在CSS中编译，如下所示 - `background: 15;`
9	blue 从颜色对象中提取蓝色通道。	`background: blue(rgb(5, 15, 25));` 它在CSS中编译，如下所示 - `background: 25;`
10	alpha 从通道颜色对象中提取Alpha通道。	`background: alpha(rgba(5, 15, 25, 1.5));` 它在CSS中编译，如下所示 - `background: 2;`
11	luma 亮度值是根据颜色对象计算的。	`background: luma(rgb(50, 250, 150));` 它在CSS中编译，如下所示 - `background: 71.2513323%;`
12	luminance 在没有伽马校正的情况下计算亮度值。	`background: luminance(rgb(50, 250, 150));` 它在CSS中编译，如下所示 - `background: 78.53333333%;`