在 Web 开发中,颜色代码有多种表示方式,每种方式都有其特定的语法和适用场景。以下是常见的几种类型:

1. 十六进制颜色码(HEX)
格式:`RRGGBB` 或 `RGB`(缩写形式)
说明:
`RR`(红)、`GG`(绿)、`BB`(蓝)是十六进制值(00-FF),范围从 0 到 255。
缩写形式(如 `f00`)会扩展为 `ff0000`(红色)。
透明度的 HEX8:`RRGGBBAA`(如 `ff000080` 表示半透明红色)。
示例:
css
color: ff0000; / 纯红色 /
color: 0f0; / 绿色缩写 /
color: 00000080; / 半透明黑色 /
2. RGB / RGBA
格式:
不透明:`rgb(red, green, blue)`
透明:`rgba(red, green, blue, alpha)`
说明:
`red`、`green`、`blue` 是 0-255 的整数或百分比(0%-100%)。
`alpha`(透明度)是 0(完全透明)到 1(完全不透明)的小数。
示例:
css
color: rgb(255, 0, 0); / 红色 /
color: rgba(0, 255, 0, 0.5); / 半透明绿色 /
3. HSL / HSLA
格式:
不透明:`hsl(hue, saturation%, lightness%)`
透明:`hsla(hue, saturation%, lightness%, alpha)`
说明:
`hue`(色相):0-360 度(0=红,120=绿,240=蓝)。
`saturation`(饱和度):0%(灰)到 100%(鲜艳)。
`lightness`(亮度):0%(黑)到 100%(白)。
`alpha`:同 RGBA。
示例:
css
color: hsl(120, 100%, 50%); / 纯绿色 /
color: hsla(0, 100%, 50%, 0.3); / 半透明红色 /
4. 预定义颜色名称
说明:CSS 规范定义了 140+ 个颜色名称(如 `red`, `blue`, `cornflowerblue`)。
示例:
css
color: red;
background-color: skyblue;
5. 其他现代颜色空间
CSS Color Module Level 4 引入了新的颜色空间(需注意浏览器兼容性):
HWB(Hue-Whiteness-Blackness):
css
color: hwb(120 0% 0%); / 绿色 /
LAB / LCH(基于人类视觉感知):
css
color: lab(56% -40 50); / LAB 颜色 /
color: lch(56% 72 134deg); / LCH 颜色 /
6. 特殊关键字
`transparent`:完全透明(等价于 `rgba(0,0,0,0)`)。
`currentColor`:继承当前元素的文字颜色。
如何选择?
快速使用:颜色名称或 HEX。
透明度需求:RGBA/HSLA 或 HEX8。
动态调整颜色:HSL/HWB(适合通过代码动态修改亮度、饱和度等)。
专业设计:LAB/LCH(更符合视觉一致性)。
需要检查目标浏览器的兼容性(如 LAB/LCH 需较新浏览器支持)。可以通过 [Can I Use] 查询具体支持情况。