Web前端入门之CSS中11种颜色写法全解析

曾经，CSS 颜色的写法很专一，就只有十六进制写法（`#ff0000`）和关键字写法（`red`）。 现在，它变了，变得花样多了，各种招式眼花缭乱。 以红色（`red`）为例： ## 1. 颜色关键字 直接使用预定义的颜色名称： ```css color: red; ``` - 解释 直接使用关键词 red。 ## 2. 6位十六进制 使用完整的 6 位十六进制（`#RRGGBB`）： ```css color: #ff0000; ``` - 解释 ff: 红色分量（十进制 255）； 00: 绿色分量（十进制 0）； 00: 蓝色分量（十进制 0）。 ## 3. 3位十六进制 使用简写的 3 位十六进制（`#RGB`）： ```css color: #f00; /* 等价于 #ff0000 */ ``` - 参数： f: 红色分量（ff，即十进制 255）； 0: 绿色分量（00，即十进制 0）； 0: 蓝色分量（00，即十进制 0）。 ## 4. 8位十六进制（带透明度） 使用 8 位十六进制（`#RRGGBBAA`），最后两位表示透明度（`00`为完全透明，`ff`为不透明）： ```css color: #ff000080; /* 红色，50% 透明度 */ ``` - 参数： ff: 红色分量（255）； 00: 绿色分量（0）； 00: 蓝色分量（0）； 80: 透明度分量（十六进制 80 = 十进制 128，即 50% 透明度）。 ## 5. RGB 函数 使用 `rgb()` 函数指定红、绿、蓝分量（0-255）： ```css color: rgb(255, 0, 0); ``` - 参数： 255: 红色分量（0-255）； 0: 绿色分量（0-255）； 0: 蓝色分量（0-255）。 ## 6. RGBA 函数 使用 `rgba()` 函数，额外指定透明度（0-1）： ```css color: rgba(255, 0, 0, 0.5); /* 红色，50% 透明度 */ ``` - 参数： 255: 红色分量（0-255）； 0: 绿色分量（0-255）； 0: 蓝色分量（0-255）； 0.5: 透明度（0=透明，1=不透明）。 ## 7. HSL 函数 使用 `hsl()` 函数通过色相（0-360）、饱和度（0%-100%）、明度（0%-100%）表示： ```css color: hsl(0, 100%, 50%); /* 色相 0 度（红色），100% 饱和度，50% 明度 */ ``` - 参数： 0: 色相（0-360 度，0°=红色，120°=绿色，240°=蓝色）； 100%: 饱和度（0%=灰色，100% 最鲜艳）； 50%: 明度（0%=黑色，100%=白色，50% 为基准颜色）。 ## 8. HSLA 函数 使用 `hsla()` 函数，额外指定透明度（0-1）： ```css color: hsla(0, 100%, 50%, 0.5); /* 红色，50% 透明度 */ ``` - 参数： 0: 色相（0-360 度）； 100%: 饱和度； 50%: 明度； 0.5: 透明度（0-1）。 ## 9. HWB 函数（较新） 使用 `hwb()` 函数通过色相（0-360）、白度（0%-100%）、黑度（0%-100%）表示： ```css color: hwb(0 0% 0%); /* 色相 0 度，0% 白度，0% 黑度 */ ``` - 参数： 0: 色相（0-360 度）； 0%: 白度（混合白色的比例，0%-100%）； 0%: 黑度（混合黑色的比例，0%-100%）。 注意：白度 + 黑度 ≤ 100%，超出会被规范化。 **浏览器兼容性：**  ## 10. LAB() 函数（较新） 基于 CIE LAB 颜色空间（人眼感知的色彩模型）： ```css color: lab(53.23% 80.09 67.2); /* 亮度 53.23%，a 轴 80.09，b 轴 67.2 */ ``` - 参数： 53.23%: 亮度（Lightness），范围 0%-100%； 80.09: a 轴（绿-红轴），负值偏绿，正值偏红； 67.2: b 轴（蓝-黄轴），负值偏蓝，正值偏黄。 **浏览器兼容性：**  ## 11. LCH() 函数（较新） 基于 LCH 颜色空间（亮度、色度、色相的极坐标形式）： ```css color: lch(53.23% 104.55 40.85); /* 亮度 53.23% ，色度 104.55 ，色相 40.85 */ ``` - 参数： 53.23%: 亮度（Lightness），范围 0%-100%； 104.55: 色度（Chroma），数值越大颜色越鲜艳； 40.85: 色相（Hue），0-360 度的角度值（红色约在 0-50 度之间）。 **浏览器兼容性：**  * * * 最新版本的 Chrome 浏览器已支持全部写法，如图：  删除线并不是说不支持这种写法，而是同一条规则中相同的 css 属性，只会有一条生效，其他的将会被丢弃。 ## 总结 共 **9 种常见写法**，涵盖颜色关键字、十六进制、RGB/RGBA、HSL/HSLA 和 HWB。 其他高级颜色空间（如 `lab()`、`lch()`）根据兼容情况，选择性使用。