冲浪网站优化 / Products Center

颜色定义函数

rgb

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

在 HTML/CSS 中也会用文本颜色值 (literal color values) 定义颜色值，例如 #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) 创建带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)

argb

创建格式为 #AARRGGBB 的十六进制颜色值 (注意不是 #RRGGBBAA！)。

这种格式被用于 IE 、.NET 和 Android 的开发中。

参数： color, 颜色对象。

返回值： string

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

输出： #805a1794

hsl

通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (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

通过色相 (hue)，饱和度 (saturation)，亮度 (lightness)，以及 alpha 四种值 (HSLA) 创建透明的颜色对象。

参数：
•hue: 0-360 的整数，用于表示度数。
•saturation: 0-100% 的百分比数或 0-1 的整数。
•lightness: 0-100% 的百分比数或 0-1 的整数。
•alpha: 0-100% 的百分比数或 0-1 的整数。

返回值： color

案例： hsl(90, 100%, 50%, 0.5)

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

hsv

通过色相 (hue)、饱和度 (saturation)、色调 (value) 三种值 (HSV) 创建不透明的颜色对象。

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

参数：
•hue: 0-360 的整数，用于表示度数。
•saturation: 0-100% 的百分比数或 0-1 的整数。
•value: 0-100% 的百分比数或 0-1 的整数。

返回值： color

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

输出： #408000

hsva

通过色相 (hue)，饱和度 (saturation)，色调 (value)，以及 alpha 四种值 (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)