在Less中色彩频道函数是什么

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

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

在本教程中，我们将学习Less中的12种色彩频道函数及其示例。以下是所有色彩频道函数的列表。

• Red()函数

• Green()函数

• Blue()函数

• Alpha()函数

• Hue()函数

• Saturation()函数

• Brightness()函数

• Hsvhue()函数

• Hsvsaturation()函数

• Hsvvalue()函数

• Luma()函数

• Luminance()函数

Red()函数

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

示例

在下面的示例中，我们将橙色的RGB值存储为“mycolor”变量的值。然后，我们使用red()函数通过将“mycolor”作为参数传递，并将返回值存储在“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()方法的第二个参数来表示。

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

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

输出

.element {
   color: 15;
}

blue()函数

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

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

示例

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

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

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

输出

.output {
   background-color: 51;
}

alpha() 函数

正如其名称所示，alpha() 函数用于获取当前颜色的不透明度，表示 alpha 通道值。

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

示例

下面的示例中，’color’ 变量存储了 rgba 颜色值。在这里，我们在 rgba 中传递了 ‘0.9’ 作为 alpha 通道值。

我们使用了 alpha() 函数来获取 ‘color’ 的不透明度，它返回了 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’变量中。然后，我们使用颜色() 函数来获取当前颜色的色调值。

我们在使用hsl()定义颜色时使用了色调值。颜色() 函数返回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）函数

饱和度（Saturation）函数返回传入参数颜色的饱和度值，范围在0到100%之间。

示例

在本示例中，我们选择了rgb(34, 9, 76)颜色，并使用saturation()函数获取其饱和度值。在这里，我们将saturation()函数嵌套在hsl()方法中以获取当前颜色的饱和度值。

在输出结果中，我们可以观察到返回了78.8%作为饱和度值。

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

输出

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

brightness()函数

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()函数也用于获取特定值的亮度值，但没有进行伽马校正。

示例

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

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

输出

.demo {
  Background: 78.533 %
}