跳至主要內容

颜色函数

Kpsmart2025年3月4日大约 3 分钟

颜色函数

CSS 颜色函数用于定义和操作颜色的函数，如 rgb()、hsl()、rgba() 等。这些函数支持不同的颜色模型，并提供了透明度控制和颜色混合功能。

函数列表

下面是颜色函数的完整列表，点击函数名可跳转到 MDN 文档查看详细信息。

函数名描述语法
rgb()使用红、绿、蓝三原色定义颜色rgb(R, G, B) 或 rgb(R G B)
rgba()使用红、绿、蓝三原色及透明度定义颜色rgba(R, G, B, A) 或 rgba(R G B / A)
hsl()使用色相、饱和度、亮度定义颜色hsl(H, S, L) 或 hsl(H S L)
hsla()使用色相、饱和度、亮度及透明度定义颜色hsla(H, S, L, A) 或 hsla(H S L / A)
hwb()使用色相、白度、黑度定义颜色hwb(H W B) 或 hwb(H W B / A)
lab()使用 CIELAB 颜色空间定义颜色lab(L a b) 或 lab(L a b / A)
lch()使用 CIELCH 颜色空间定义颜色lch(L C H) 或 lch(L C H / A)
oklab()使用 Oklab 颜色空间定义颜色oklab(L a b) 或 oklab(L a b / A)
oklch()使用 Oklch 颜色空间定义颜色oklch(L C H) 或 oklch(L C H / A)
color()使用特定颜色空间定义颜色color(colorspace c1 c2 c3) 或 color(colorspace c1 c2 c3 / A)
color-mix()混合两种颜色color-mix(in colorspace, color1, color2)
color-contrast()从列表中选择与基准色对比度最高的颜色color-contrast(color vs color1, color2, ...)

使用示例

/* RGB 颜色模型 */
.rgb-example {
  color: rgb(255, 0, 0);                /* 红色 */
  background-color: rgb(0 255 0);       /* 绿色，现代语法 */
  border: 1px solid rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
}

/* HSL 颜色模型 */
.hsl-example {
  color: hsl(0, 100%, 50%);             /* 红色 */
  background-color: hsl(120 100% 50%);  /* 绿色，现代语法 */
  border: 1px solid hsla(240, 100%, 50%, 0.5); /* 半透明蓝色 */
}

/* 其他颜色模型 */
.color-models {
  color: hwb(0 0% 0%);                  /* 红色 */
  background-color: lab(50% 50 30);     /* 橙红色 */
  border: 1px solid lch(50% 70 40);     /* 鲜艳的橙色 */
}

/* 颜色混合 */
.color-mixing {
  background-color: color-mix(in srgb, red, blue); /* 紫色 */
}

浏览器兼容性

函数ChromeFirefoxSafariEdge
rgb()/rgba()1+1+1+12+
hsl()/hsla()1+1+3.1+12+
hwb()101+96+15+101+
lab()/lch()101+113+15+101+
oklab()/oklch()101+113+15+101+
color()101+113+15+101+
color-mix()111+113+15.4+111+
color-contrast()未实现未实现未实现未实现

颜色函数参数说明

RGB 参数

  • R (红): 0-255 或 0%-100%
  • G (绿): 0-255 或 0%-100%
  • B (蓝): 0-255 或 0%-100%
  • A (透明度): 0-1 或 0%-100%

HSL 参数

  • H (色相): 0-360 度
  • S (饱和度): 0%-100%
  • L (亮度): 0%-100%
  • A (透明度): 0-1 或 0%-100%

HWB 参数

  • H (色相): 0-360 度
  • W (白度): 0%-100%
  • B (黑度): 0%-100%
  • A (透明度): 0-1 或 0%-100%

LAB 参数

  • L (亮度): 0%-100%
  • a (绿-红轴): 通常在 -125 到 125 之间
  • b (蓝-黄轴): 通常在 -125 到 125 之间
  • A (透明度): 0-1 或 0%-100%

LCH 参数

  • L (亮度): 0%-100%
  • C (色度): 0-150+
  • H (色相): 0-360 度
  • A (透明度): 0-1 或 0%-100%

相关资源