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 %}
以上就是Less 中的颜色通道函数有哪些？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625346.html
微信扫一扫 
支付宝扫一扫 
