Skip to content
W3S101

Less - 颜色定义函数

LESS - 颜色定义函数

Section titled “LESS - 颜色定义函数”

描述

Section titled “描述”

LESS 提供了一组强大的内置函数用于定义颜色。这些函数允许您使用各种颜色模型（如 RGB、HSL 和 HSV）创建颜色，从而在样式表中指定颜色时具有灵活性。它们是实现动态主题和一致调色板的基础。

序号函数与描述示例与输出
1rgb(red, green, blue)
从红（Red）、绿（Green）和蓝（Blue）通道值创建颜色。

参数：
  • red: 0-255 之间的整数或 0-100% 的百分比。
  • green: 0-255 之间的整数或 0-100% 的百分比。
  • blue: 0-255 之间的整数或 0-100% 的百分比。
color: rgb(220, 20, 60);

输出：#dc143c (猩红色)

2rgba(red, green, blue, alpha)
从红（Red）、绿（Green）、蓝（Blue）和 Alpha（透明度）通道值创建颜色。

参数：
  • red、green、blue: 同 rgb()。
  • alpha: 0（透明）到 1（不透明）之间的数字，或 0-100% 的百分比。
color: rgba(220, 20, 60, 0.5);

输出：rgba(220, 20, 60, 0.5)

3argb(color)
创建一个颜色的 ARGB 十六进制表示（例如，#AARRGGBB）。

参数：
  • color: 一个 LESS 颜色对象。

注意：虽然可用，但在现代 CSS 中，ARGB 十六进制的直接使用不如 RGBA 或 8 位十六进制（#RRGGBBAA）常见。		background: argb(rgba(176, 23, 31, 0.5));

输出：#80b0171f

4hsl(hue, saturation, lightness)
从色相（Hue）、饱和度（Saturation）和亮度（Lightness）值创建颜色。

参数：
  • hue: 0-360 之间的整数，表示色轮上的度数。
  • saturation: 0-100% 的百分比或 0-1 之间的数字。
  • lightness: 0-100% 的百分比或 0-1 之间的数字。
color: hsl(120, 100%, 50%);

输出：#00ff00 (柠檬绿)

5hsla(hue, saturation, lightness, alpha)
从色相（Hue）、饱和度（Saturation）、亮度（Lightness）和 Alpha 值创建颜色。

参数：
  • hue、saturation、lightness: 同 hsl()。
  • alpha: 0-1 之间的数字或 0-100% 的百分比。
color: hsla(0, 100%, 50%, 0.5);

输出：rgba(255, 0, 0, 0.5) (半透明红色)

6hsv(hue, saturation, value)
从色相（Hue）、饱和度（Saturation）和明度（Value/Brightness）值创建颜色。

参数：
  • hue: 0-360 之间的整数。
  • saturation: 0-100% 的百分比或 0-1 之间的数字。
  • value: 0-100% 的百分比或 0-1 之间的数字。
color: hsv(80, 90%, 70%);

输出：#7db312

7hsva(hue, saturation, value, alpha)
从色相（Hue）、饱和度（Saturation）、明度（Value）和 Alpha 值创建颜色。

参数：
  • hue、saturation、value: 同 hsv()。
  • alpha: 0-1 之间的数字或 0-100% 的百分比。
color: hsva(80, 90%, 70%, 0.6);

输出：rgba(125, 179, 18, 0.6)

这些定义函数通常与 LESS 颜色操作函数（LESS Color Operation Functions）（例如，lighten()、darken()、saturate()）结合使用，以创建动态和谐的配色方案。