Skip to content
W3S101

Less - 颜色通道函数

LESS - 颜色通道函数

Section titled “LESS - 颜色通道函数”

LESS 提供了一套内置函数，用于提取和操纵颜色的各个通道。这些函数作用于颜色对象，返回表示颜色特定组件（如色相、饱和度、亮度、红色、绿色、蓝色或 Alpha 透明度）的数值或百分比。这使得精确调整颜色和创建动态配色方案成为可能。

这些函数对于创建主题、通过编程方式调整颜色或确保颜色对比度和可访问性非常宝贵。它们主要与 HSL (Hue, Saturation, Lightness)、HSV (Hue, Saturation, Value) 和 RGB (Red, Green, Blue) 颜色模型一起使用，包括 Alpha 通道 (RGBA, HSLA)。

下面是 LESS 中常用的颜色通道函数列表：

序号函数描述示例 (展示提取和用法)
1hue(color)在 HSL 颜色空间中提取 color 的色相通道。返回一个 0 到 360 之间的无单位数值。// LESS
@my-color: hsl(90, 75%, 50%);
@extracted-hue: hue(@my-color); // @extracted-hue 是 90

.example {
// 用法：使用提取的色相创建新颜色
border-color: hsl(@extracted-hue, 100%, 30%); // hsl(90, 100%, 30%)
}
2saturation(color)在 HSL 颜色空间中提取 color 的饱和度通道。返回一个百分比值（0% 到 100%）。// LESS
@my-color: hsl(90, 75%, 50%);
@extracted-saturation: saturation(@my-color); // @extracted-saturation 是 75%

.example {
background-color: hsla(120, @extracted-saturation, 60%, 0.5);
}
3lightness(color)在 HSL 颜色空间中提取 color 的亮度通道。返回一个百分比值（0% 到 100%）。// LESS
@my-color: hsl(90, 75%, 50%);
@extracted-lightness: lightness(@my-color); // @extracted-lightness 是 50%

.example {
color: hsl(240, 50%, @extracted-lightness);
}
4hsvhue(color)在 HSV 颜色空间中提取 color 的色相通道。返回一个 0 到 360 之间的无单位数值。// LESS
@my-color: hsv(120, 100%, 100%); // HSV 中的纯绿色
@hsv-h: hsvhue(@my-color); // @hsv-h 是 120

.example {
color: hsv(@hsv-h, 80%, 90%);
}
5hsvsaturation(color)在 HSV 颜色空间中提取 color 的饱和度通道。返回一个百分比值（0% 到 100%）。// LESS
@my-color: hsv(120, 100%, 100%);
@hsv-s: hsvsaturation(@my-color); // @hsv-s 是 100%

.example {
color: hsv(150, @hsv-s, 70%);
}
6hsvvalue(color)在 HSV 颜色空间中提取 color 的明度（亮度）通道。返回一个百分比值（0% 到 100%）。// LESS
@my-color: hsv(120, 100%, 100%);
@hsv-v: hsvvalue(@my-color); // @hsv-v 是 100%

.example {
color: hsv(180, 90%, @hsv-v);
}
7red(color)在 RGB 颜色空间中提取 color 的红色通道。返回一个 0 到 255 之间的数值。// LESS
@my-color: rgb(255, 128, 0); // 橙色
@red-component: red(@my-color); // @red-component 是 255

.example {
border-left-color: rgb(@red-component, 100, 50);
}
8green(color)在 RGB 颜色空间中提取 color 的绿色通道。返回一个 0 到 255 之间的数值。// LESS
@my-color: rgb(255, 128, 0);
@green-component: green(@my-color); // @green-component 是 128

.example {
border-top-color: rgb(100, @green-component, 50);
}
9blue(color)在 RGB 颜色空间中提取 color 的蓝色通道。返回一个 0 到 255 之间的数值。// LESS
@my-color: rgb(255, 128, 0);
@blue-component: blue(@my-color); // @blue-component 是 0

.example {
border-right-color: rgb(100, 50, @blue-component + 100); // rgb(100,50,100)
}
10alpha(color)提取 color 的 Alpha（透明度）通道。返回一个 0（完全透明）到 1（完全不透明）之间的数值。// LESS
@my-color: rgba(0, 0, 255, 0.5); // 半透明蓝色
@alpha-value: alpha(@my-color); // @alpha-value 是 0.5

.example {
background-color: rgba(255, 0, 0, @alpha-value - 0.2); // rgba(255,0,0,0.3)
}
11luma(color)使用 RGB 分量的加权平均值（通常带伽马校正）计算 color 的 Luma（感知亮度）。返回一个百分比（0% 到 100%）。用于确定文本颜色对比度很有用。// LESS
@dark-bg: #333333;
@light-bg: #eeeeee;
@luma-dark: luma(@dark-bg); // 例如，约 12.9%
@luma-light: luma(@light-bg); // 例如，约 87.7%

.example {
// 使用 luma 决定文本颜色（概念性）
color: if((luma(@dark-bg) < 50%), white, black);
}
12luminance(color)计算 color 的相对亮度，类似于 Luma，但通常指 XYZ 颜色空间中的 Y 分量（不带伽马校正，或假设线性 RGB）。返回一个百分比（0% 到 100%）。常用于可访问性对比度计算。// LESS
@my-color: #00FF00; // 纯绿色
@lum: luminance(@my-color); // 例如，约 71.5%

.example {
// 通常用于更复杂的对比度计算
// —debug-luminance: unit(@lum,);
}

这些函数结合其他颜色操纵函数，如 lighten(), darken(), saturate(), desaturate(), spin(), 和 mix(), 使开发者能够在 LESS 中对颜色进行精细控制，实现复杂和动态的样式。