跳到主要内容

Color Definition Functions

rgb​

从十进制的红、绿、蓝（RGB）值创建一个不透明的颜色对象。

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

参数：

  • red：一个 0-255 的整数或 0-100% 的百分比。
  • green：一个 0-255 的整数或 0-100% 的百分比。
  • blue：一个 0-255 的整数或 0-100% 的百分比。

返回值：color

示例：rgb(90, 129, 32)

输出：#5a8120

rgba​

从十进制的红、绿、蓝和 alpha（RGBA）值创建一个透明的颜色对象。

参数：

  • 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)

argb​

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

这种格式在 Internet Explorer、.NET 和 Android 开发中使用。

参数：color，颜色对象。

返回值：string

示例：argb(rgba(90, 23, 148, 0.5));

输出：#805a1794

hsl​

从色调、饱和度和亮度（HSL）值创建一个不透明的颜色对象。

参数：

  • hue：一个表示度数的 0-360 的整数。
  • saturation：一个 0-100% 的百分比或 0-1 的数字。
  • lightness：一个 0-100% 的百分比或 0-1 的数字。

返回值：color

示例：hsl(90, 100%, 50%)

输出：#80ff00

如果你想基于另一个颜色的通道创建一个新的颜色，这很有用，例如：@new: hsl(hue(@old), 45%, 90%);

@new 将拥有 @old 的 hue，以及自己的饱和度和亮度。

hsla​

从色调、饱和度、亮度和 alpha（HSLA）值创建一个透明的颜色对象。

参数：

  • hue：一个表示度数的 0-360 的整数。
  • saturation：一个 0-100% 的百分比或 0-1 的数字。
  • lightness：一个 0-100% 的百分比或 0-1 的数字。
  • alpha：一个 0-1 的数字或 0-100% 的百分比。

返回值：color

示例：hsla(90, 100%, 50%, 0.5)

输出：rgba(128, 255, 0, 0.5)

hsv​

从色调、饱和度和值（HSV）值创建一个不透明的颜色对象。

请注意，这是 Photoshop 中可用的一种颜色空间，与 hsl 不同。

参数：

  • hue：一个表示度数的 0-360 的整数。
  • saturation：一个 0-100% 的百分比或 0-1 的数字。
  • value：一个 0-100% 的百分比或 0-1 的数字。

返回值：color

示例：hsv(90, 100%, 50%)

输出：#408000

hsva​

从色调、饱和度、值和 alpha（HSVA）值创建一个透明的颜色对象。

参数：

  • hue：一个表示度数的 0-360 的整数。
  • saturation：一个 0-100% 的百分比或 0-1 的数字。
  • value：一个 0-100% 的百分比或 0-1 的数字。
  • alpha：一个 0-1 的数字或 0-100% 的百分比。

返回值：color

示例：hsva(90, 100%, 50%, 0.5)

输出：rgba(64, 128, 0, 0.5)

ue、饱和度、明度和透明度（HSVA）值。

请注意，这与 hsla 不同，是 Photoshop 中可用的一种颜色空间。

参数：

  • 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(64, 128, 0, 0.5)