Less 颜色通道函数怎么用?

文章导读
Previous Quiz Next 在本章中,我们将了解 LESS 中颜色通道函数的重要性。LESS 支持一些内置函数,用于设置通道的值。这些通道的值取决于颜色定义。HSL 颜色具有色相(hue)、饱和度(saturation)和亮度(lightness)通道,而 RGB
A A

LESS - 颜色通道函数



Previous
Quiz
Next

在本章中,我们将了解 LESS 中颜色通道函数的重要性。LESS 支持一些内置函数,用于设置通道的值。这些通道的值取决于颜色定义。HSL 颜色具有色相(hue)、饱和度(saturation)和亮度(lightness)通道,而 RGB 颜色具有红(red)、绿(green)和蓝(blue)通道。下面的表格列出了所有颜色通道函数 —

序号 函数 & 描述 示例
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

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

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

它编译为以下 CSS —

background: 90%;
6

hsvvalue

在 HSV 颜色空间中,从颜色对象中提取值通道。

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

从颜色对象计算 luma 值。

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

它编译为以下 CSS —

background: 71.2513323%;
12

luminance

不进行 gamma 校正计算 luma 值。

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

它编译为以下 CSS —

background: 78.53333333%;