CSS 中颜色的表示方式非常丰富，以下是目前 CSS 中所有主流的颜色表示方法（按推荐程度排序）：
1. 命名颜色（Color Keywords） —— 最简单
CSS 预定义了 140+ 个颜色名称，直接用英文单词：
color: red;
color: blue;
color: green;
color: transparent; /* 透明 */
color: currentColor; /* 当前元素的 color 值（非常实用） */
常用中文对应（部分）：
- black（黑）、white（白）、red（红）、blue（蓝）、green（绿）、yellow（黄）、purple（紫）、pink（粉）、orange（橙）、gray/grey（灰）
2. 十六进制颜色（Hex） —— 最常用
/* 标准写法 */
color: #ff0000; /* 红色 */
color: #f00; /* 简写，三位数 = 六位数重复 */
/* 带透明度（8位十六进制）CSS Color Module Level 4 */
color: #ff000080; /* 红色，50% 透明 */
color: #f008; /* 简写，带透明度 */
3. RGB / RGBA —— 最直观
color: rgb(255, 0, 0); /* 红色 */
color: rgb(255, 0, 0, 0.5); /* 带透明度 */
color: rgba(255, 0, 0, 0.5); /* 旧写法，仍支持 */
/* 新语法（推荐）—— 支持百分比和小数 */
color: rgb(100% 0% 0% / 50%);
4. HSL / HSLA —— 最适合调色（强烈推荐）
HSL = Hue（色相） + Saturation（饱和度） + Lightness（亮度）
color: hsl(0, 100%, 50%); /* 红色 */
color: hsl(240, 100%, 50%); /* 蓝色 */
color: hsla(0, 100%, 50%, 0.5);
/* 新语法（推荐） */
color: hsl(0 100% 50% / 50%);
HSL 的优势：
- 调整色相（H）就能得到不同颜色
- 调整亮度（L）就能得到明暗版本
- 设计系统里用得非常多
5. HWB（Hue-Whiteness-Blackness） —— 新增，适合设计师
color: hwb(0 0% 0%); /* 纯红色 */
color: hwb(240 20% 20%); /* 偏白的蓝色 */
6. Lab / Oklab —— 现代最精确的颜色空间（CSS Color 4）
color: lab(50% 40 30); /* Lab 颜色 */
color: oklab(0.7 0.1 0.05); /* Oklab（更推荐，人眼感知更均匀） */
7. LCH / OKLCH —— 目前最先进的颜色表示（强烈推荐用于高端设计）
color: lch(50% 80 30); /* LCH */
color: oklch(0.7 0.15 240); /* OKLCH（目前最推荐） */
优点：颜色过渡更自然、明度更准确、支持更宽的色域（尤其是 Display-P3）。
8. 颜色函数（Color()） —— 未来语法
color: color(srgb 1 0 0); /* sRGB 红色 */
color: color(display-p3 1 0 0); /* Display-P3 更鲜艳的红色 */
color: color(a98-rgb 1 0 0 / 0.8);
9. 系统颜色（System Colors） —— 无障碍推荐
color: Canvas; /* 背景色 */
color: CanvasText; /* 文本色 */
color: LinkText;
color: ButtonFace;
总结对比表
| 表示方式 | 写法示例 | 推荐场景 | 现代性 |
|---|---|---|---|
| 命名颜色 | red | 快速原型 | ★☆☆☆☆ |
| 十六进制 | #ff0000 / #f00 | 日常开发（最常用） | ★★★★☆ |
| RGB/RGBA | rgb(255 0 0) | 需要精确数值时 | ★★★★☆ |
| HSL | hsl(0 100% 50%) | 调色、设计系统（推荐） | ★★★★★ |
| HWB | hwb(0 0% 0%) | 设计师调色 | ★★★★☆ |
| OKLCH | oklch(0.7 0.15 240) | 高端设计、宽色域（最推荐） | ★★★★★ |
| Lab / Oklab | oklab(0.7 0.1 0.05) | 精确颜色科学 | ★★★★★ |
实用建议（2026年）
- 日常开发：继续用 Hex + HSL 组合最舒服。
- 设计系统 / 高级项目：优先使用 OKLCH，颜色过渡最自然。
- 需要透明度：统一使用新语法
rgb(255 0 0 / 0.5)、hsl(0 100% 50% / 0.5)。 - 暗黑模式：配合
color-scheme和currentColor使用效果极佳。
需要我给你一个完整的现代颜色函数对比示例代码吗？或者针对某个具体场景（如渐变、暗黑模式、设计系统）深入讲解？
