CSS颜色标准通过Color Module模块演进,Level 1定义基础颜色关键字、十六进制和rgb();Level 3扩展至140+颜色名、HSL/RGBA/HSLA及简写#RGB;Level 4引入color()、color-mix()、相对颜色语法、广色域空间与#rrggbbaa透明度支持,持续提升色彩控制精度与设计灵活性。

CSS 颜色标准并非按 CSS1、CSS2、CSS3 这样整体版本划分,而是通过独立演进的 CSS Color Module 模块来定义和扩展。每个 Level 在前一个的基础上增加新的颜色格式、功能和关键字,确保向后兼容。以下是各主要 Level 的核心内容与对比。
Color Module Level 1:基础颜色支持
作为最早的标准,Level 1 奠定了颜色使用的基础,被所有现代浏览器广泛支持。
- 颜色关键字:定义了最初的 16 个基本颜色名称,如 black、white、red、blue 等。
- 十六进制颜色 (#RRGGBB):使用 # 后跟六位十六进制数表示 RGB 值,例如 #ff0000 表示红色。
- RGB 函数 (rgb()):支持用整数(0-255)或百分比(0%-100%)指定红、绿、蓝三原色,如 rgb(255, 0, 0) 或 rgb(100%, 0%, 0%)。
Color Module Level 3:扩展与现代化
Level 3 极大地丰富了颜色表达能力,是当前最广泛使用的标准之一。
- 扩展颜色关键字:将预定义的颜色名称从 16 个大幅增加到超过 140 个,加入了 orange、tomato、rebeccapurple 等更具体的名字。
- RGBA 和 HSLA:在 RGB 和 HSL 模型基础上增加了 Alpha 透明度通道。rgba(255, 0, 0, 0.5) 可以创建半透明红色,hsla(120, 100%, 50%, 0.3) 则用于半透明绿色。
- HSL 颜色 (hsl()):引入色相(Hue)、饱和度(Saturation)、亮度(Lightness)模型,更符合人类对颜色的直观理解。色相为 0-360 度的角度,如 hsl(0, 100%, 50%) 是红色。
- 简写十六进制 (#RGB):允许将像 #ff0000 这样的值简写为 #f00,提升了代码简洁性。
Color Module Level 4:高级功能与未来方向
Level 4 引入了更先进、更精确的颜色处理特性,尤其关注高动态范围(HDR)和广色域显示。
立即学习“前端免费学习笔记(深入)”;
- 相对颜色语法:允许基于一个参考颜色进行修改,例如调整其亮度或饱和度,提高了主题化和动态配色的灵活性。
- 新颜色空间:支持 display-p3、a98-rgb、prophoto-rgb 等广色域色彩空间,以及 lab、lch 等感知均匀的颜色模型,更适合专业设计。
- color() 函数:提供一种通用方式来指定特定色彩空间中的颜色,增强了跨设备颜色的一致性。
- color-mix() 函数:可以直接混合两种或多种颜色,并指定混合的色彩空间,实现更自然的渐变和调色效果。
- 改进的 Alpha 语法:允许在十六进制颜色中直接添加 Alpha 通道,如 #rrggbbaa 或 #rgba,无需再依赖 rgba() 函数。
基本上就这些,从 Level 1 的简单实用,到 Level 3 的功能完善,再到 Level 4 的面向未来,CSS 颜色标准持续进化以满足日益复杂的网页设计需求。










