LESS - 颜色通道函数

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

先生。 功能说明 例子
1

色调

在 HSL 颜色空间中，色调通道是从颜色对象中提取的。

 
background: hue(hsl(75, 90%, 30%));

它在 CSS 中编译，如下所示 -

background: 75;
2

饱和

在 HSL 颜色空间中，从颜色对象中提取饱和度通道。

 
background: saturation(hsl(75, 90%, 30%));

它在 CSS 中编译，如下所示 -

background: 90%;
3

亮度

在 HSL 颜色空间中，从颜色对象中提取亮度通道。

 
background: lightness(hsl(75, 90%, 30%));

它在 CSS 中编译，如下所示 -

background: 30%;
4

HSV色调

在 HSV 颜色空间中，色调通道是从颜色对象中提取的。

 
background: hsvhue(hsv(75, 90%, 30%));

它在 CSS 中编译，如下所示 -

background: 75;
5

HS饱和度

在 HSL 颜色空间中，从颜色对象中提取饱和度通道。

 
background: hsvsaturation(hsv(75, 90%, 30%));

它在 CSS 中编译，如下所示 -

background: 90%;
6

HSV值

在 HSL 颜色空间中，值通道是从颜色对象中提取的。

 
background: hsvvalue(hsv(75, 90%, 30%));

它在 CSS 中编译，如下所示 -

background: 30%;
7

红色的

红色通道是从颜色对象中提取的。

 
background: red(rgb(5, 15, 25));

它在 CSS 中编译，如下所示 -

background: 5;
8

绿色的

绿色通道是从颜色对象中提取的。

 
background: green(rgb(5, 15, 25));

它在 CSS 中编译，如下所示 -

background: 15;
9

蓝色的

蓝色通道是从颜色对象中提取的。

 
background: blue(rgb(5, 15, 25));

它在 CSS 中编译，如下所示 -

background: 25;
10

α

Alpha 通道是从颜色对象中提取的。

 
background: alpha(rgba(5, 15, 25, 1.5));

它在 CSS 中编译，如下所示 -

background: 2;
11

亮度

亮度值是根据颜色对象计算的。

 
background: luma(rgb(50, 250, 150));

它在 CSS 中编译，如下所示 -

background: 71.2513323%;
12

亮度

计算亮度值时无需进行伽玛校正。

 
background: luminance(rgb(50, 250, 150));

它在 CSS 中编译，如下所示 -

background: 78.53333333%;