Less 中的颜色通道函数有哪些？

LESS（学习者 CSS）是在普通 CSS 之上开发的预处理器，允许开发人员轻松维护和自定义 CSS 代码。例如，它允许在 CSS 代码中创建变量和函数。因此，开发人员不需要像我们通常在普通 CSS 中那样编写重复的代码。

颜色通道函数也是 Less 的另一个重要功能，它将颜色值作为输入并返回特定颜色通道的值。

在本教程中，我们将通过示例了解 Less 中的 12 个颜色通道函数。这是所有颜色通道函数的列表。

• Red() 函数

• Green() 函数

• Blue() 函数

• Alpha() 函数

• Hue() 函数

• Saturation() 函数

• 亮度()函数

• Hsvhue() 函数

• Hsvsaturation() 函数

• Hsvvalue() 函数

• Luma() 函数

• Luminance() 函数

Red() 函数

red() 是我们列表中的第一个颜色通道函数。它以颜色值作为参数，返回0到255之间的值，即当前颜色中红色的强度。

示例

在下面的示例中，我们将橙色的 rgb 值存储为“mycolor”变量的值。之后，我们通过传递“myclor”作为参数来使用 red() 函数，并将返回值存储在“redchannle”变量中。

在输出中，用户可以观察到“redchannle”变量的值为 255。

@mycolor: rgb(255, 165, 0);@redchannel: red(@mycolor);.element {   background-color: @redchannel;}

输出

.element {   background-color: 255;}

Green() 函数

green() 位于我们的较少颜色通道函数列表中的第二个位置。它接受一个颜色值并返回 0 到 255 之间的绿色强度。

示例

在下面的示例中，我们将 RGB 颜色值存储在“mycolor”变量中。我们总是将绿色的强度写为 rgb() 方法的第二个参数。

我们使用 green() 函数从 rgb 值中获取绿色的颜色通道值，在输出中，我们可以看到它返回了 15。

@mycolor: rgb(0, 15, 0);@greenchannel: green(@mycolor);.element {   color: @greenchannel;}

输出

.element {   color: 15;}

蓝色()函数

blue() 函数返回与作为参数传递的颜色相关的蓝色通道的值。

用户可以按照下面的示例在 less 中使用 blue() 函数。

示例

在这里，我们将“#FF5733”十六进制颜色值作为 blue() 函数的参数传递，它是橙色的阴影。

输出显示 51 作为蓝色通道的值，这意味着特定颜色中蓝色的强度为 51。

@bluechannel: blue(#FF5733);.output {   color: @bluechannel;}

输出

.output {   background-color: 51;}

Alpha() 函数

顾名思义，alpha()函数用于获取当前颜色的不透明度，代表alpha通道值。

在 rgba() 颜色格式中，我们将 alpha 值作为最后一个参数传递。

示例

下例中的“color”变量存储 rgba 颜色值。在这里，我们将“0.9”作为 rgba 中的 Alpha 通道值传递。

我们使用 alpha() 函数来获取“颜色”的不透明度，它返回 0.9，我们可以在输出中看到。

@color: rgba(25, 77, 91, 0.9);@alphachannel: alpha(@color);.output {   opacity: @alphachannel;}

输出

.output {   opacity: 0.9;}

Hue() 函数

hue()函数用于获取特定颜色的色调值。它返回色轮上颜色的色调角，其值在0到360之间。

示例

在示例中，我们将 RGB 值存储在“color”变量中。之后，我们使用了hue()函数来获取当前颜色的色调值。

我们在使用 hsl() 定义颜色时使用了色调值。 Hue() 函数返回 rgb(34, 9, 0) 颜色值 16。

@color: rgb(34, 9, 0);@huevalue: hue(@color);.element {   color: hsl(@huevalue, 100%, 50%);}

输出

.element {   color: hsl(16, 100%, 50%);}

饱和度()函数

saturation() 函数返回作为参数传递的颜色的饱和度值，范围在 0 到 100% 之间。

示例

在此示例中，我们采用 rgb(34, 9, 76) 颜色来获取其饱和度值。这里，我们在hsl()方法中执行saturation()函数来获取当前颜色的饱和度值。

在输出中，我们可以观察到它返回 78.8% 作为饱和值

@color: rgb(34, 9, 76);.element {   color: hsl(21, saturation(@color), 50%);}

输出

.element {   color: hsl(21, 78.8%, 50%);}

亮度()函数

brightness()函数用于获取特定函数的亮度。它返回 0% 到 100% 之间的值。

示例

在这里，我们获取了 rgb(34, 9, 76) 颜色的亮度值，并在使用 hsl() 方法定义其他颜色时使用它。在输出中，用户可以观察到 Brightness() 方法返回 16.7% 的值。

@color: rgb(34, 9, 76);.element {   color: hsl(21, 78.8%, brightness(@color));}

输出

.element {   color: hsl(21, 78.8%, 16.7%);}

Hsvhue() 函数

hsvhue()函数用于获取hsv颜色模型中的色调值。

示例

在此示例中，我们使用 hsvhue() 函数获取 hsv 模型中的色调值，该函数返回 0 到 360 之间的值。在输出中，我们可以观察到它返回 16 的颜色值。

@ hsvhueValue: hsvhue(rgb(255, 87, 51);.demo {   background-color: hsv(@hsvhueValue, 70%,60%);}

输出

.demo {   background-color: hsv(16, 70%, 60%);}

Hsvsaturation() 函数

hssaturation()函数用于获取hsv颜色模型中的饱和度值。

示例

在此示例中，我们通过传递颜色值作为参数来使用 hsvsaturation() 函数。在输出中，我们可以看到它返回 100% 饱和度。

@hsvsaturationValue: hsvsaturation(rgb(255, 87, 51);.demo {   background-color: hsv(65, @hsvsaturationValue,80%);}

输出

.demo {   background-color: hsv(65, 100%, 80%);}

Hsvvalue() 函数

hsvalue()函数用于获取hsv颜色模型中的亮度值。

示例

这里，我们使用 hsvvalue() 函数来获取 hsv 模型中颜色的亮度。它返回 100%，我们可以在输出中看到。

@hsvvalue: hsvvalue(rgb(255, 87, 51);.demo {   background-color: hsv(65, 90%, @hsvvalue);}

输出

.demo {   background-color: hsv(65, 90%, 100%);}

Luma() 函数

luma() 函数用于通过伽马校正获取特定值的亮度值。它返回 1 到 100 之间的值。

示例

在下面的示例中，我们使用 luma() 函数获取经过伽玛校正的 rgb(50, 250, 150) 颜色的亮度值。在输出中，我们可以看到它返回了 71.251% 的值。

.demo {   background: luma(rgb(50, 250, 150));}

输出

.demo {   Background: 71.251%}

亮度()函数

luminance() 函数还用于获取特定值的亮度值，但不进行伽玛校正。

示例

在这个例子中，我们使用luminance()函数来获取没有伽马校正的rgb(50,250,150)颜色的亮度值。用户可以观察相同颜色值的luma()和luminance()函数的输出值之间的差异。

.demo {   background: luminance(rgb(50, 250, 150));}

输出

.demo {  Background: 78.533 %}