LESS - 颜色通道函数
在本章中,我们将了解 LESS 中颜色通道函数的重要性。LESS 支持一些内置函数来设置通道的值。通道根据颜色定义设置值。HSL 颜色有色调、饱和度和亮度通道,RGB 颜色有红色、绿色和蓝色通道。下表列出了所有颜色通道函数 −
Sr.No. | 函数 &描述 | 示例 |
---|---|---|
1 | 色调 在 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%; |