1、rgb() 函数

通过十进制红、绿、蓝(RGB)值创建一个不透明的颜色对象。

标准的 HTML/CSS 格式中的字面颜色值也可以用来定义颜色，例如#ff0000。

语法

rgb(red, green, blue)

• red: 一个 0-255 或 0%-100% 的整数。
• green: 一个 0-255 或 0%-100% 的整数。
• blue: 一个 0-255 或 0%-100% 的整数。

例子

@color: rgb(90, 129, 32); // #5a8120

2、rgba() 函数

通过十进制红、绿、蓝(RGB)和透明度(RGBA)值创建一个透明的颜色对象。 标准的 HTML/CSS 格式中的字面颜色值也可以用来定义颜色，例如#ff0000。

语法

rgba(red, green, blue, alpha)

• red: 一个 0-255 或 0%-100% 的整数。
• green: 一个 0-255 或 0%-100% 的整数。
• blue: 一个 0-255 或 0%-100% 的整数。
• alpha: 一个 0-1 或 0%-100% 的数字。

例子

@color: rgba(90, 129, 32, 0.5); // rgba(90, 129, 32, 0.5)

3、argb() 函数

创建一个 #AARRGGBB 格式（不是 #RRGGBBAA 格式）的颜色十六进制表示。

这种格式用于 Internet Explorer、.NET 和 Android 开发。

语法

argb(value)

• value: 一个 32 位整数，其前 8 位表示 alpha，后 24 位表示颜色。

例子

argb(rgba(90, 23, 148, 0.5)); // #805a1794

4、hsl() 函数

通过色相(HSL)值创建一个不透明的颜色对象。

语法

hsl(hue, saturation, lightness)

• hue: 一个 0-360 的整数。
• saturation: 一个 0-100% 的百分比或者 0 - 1。
• lightness: 一个 0-100% 的百分比或者 0 - 1。

当需要基于另一个颜色的通道创建新颜色时非常有用，例如：@new: hsl(hue(@old), 45%, 90%);

@new将继承@old的色相(hue)，但使用自己的饱和度和亮度。

例子

@color: hsl(90, 100%, 50%); // #80ff00

5、hsla() 函数

通过色相(HSL)和透明度(HSLA)值创建一个透明的颜色对象。

语法

hsla(hue, saturation, lightness, alpha)

• hue: 一个 0-360 的整数。
• saturation: 一个 0-100% 的百分比或者 0 - 1。
• lightness: 一个 0-100% 的百分比或者 0 - 1。
• alpha: 一个 0-100% 的百分比或者 0 - 1。

例子

@color: hsla(90, 100%, 50%, 0.5); // rgba(128, 255, 0, 0.5)

6、hsv() 函数

通过色相(HSV)值创建一个不透明的颜色对象。

注意：这是 Photoshop 中可用的色彩空间，与hsl不同。

语法

hsv(hue, saturation, value)

• hue: 一个 0-360 的整数。
• saturation: 一个 0-100% 的百分比或者 0 - 1。
• value: 一个 0-100% 的百分比或者 0 - 1。

例子

@color: hsv(90, 100%, 50%); // #408000

7、hsva() 函数

通过色相(HSV)和透明度(HSVA)值创建一个透明的颜色对象。 注意：这是 Photoshop 中可用的色彩空间，与hsla不同。

语法

hsva(hue, saturation, value, alpha)

• hue: 一个 0-360 的整数。
• saturation: 一个 0-100% 的百分比或者 0 - 1。
• value: 一个 0-100% 的百分比或者 0 - 1。
• alpha: 一个 0-100% 的百分比或者 0 - 1。

例子

@color: hsva(90, 100%, 50%, 0.5); // rgba(128, 255, 0, 0.5)

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24