CSS 中的色彩万象（2025）
本文全面梳理了 2025 年 CSS 中与颜色相关的所有特性，涵盖从基础的 color 和 background-color 属性，到较新的 color-mix()、相对颜色语法、色域（如 sRGB、Display P3）以及 HDR 颜色支持等内容。文章旨在帮助开发者掌握现代 CSS 中丰富且灵活的色彩控制系统，从而更精准地管理网页设计的配色方案。
背景速读
- 2025 年的 CSS 迎来了多项原生色彩特性。开发者过去长期依赖预处理器（Sass/Less）或 JavaScript 来处理调色板、主题切换和颜色运算。
- 关键新增包括：CSS Color Level 4/5 规范中的 OKLCH 和 OKLAB 色彩空间（基于人眼感知设计，可预测的亮度渐变）；`light-dark()` 函数（自动适配明暗主题）；`color-mix()`（无需 Sass 即可混合颜色）；以及相对颜色语法 `from <color>`（对任意颜色做亮度、饱和度等通道级调整）。
- 推荐使用 `color-mix(in oklch, ...)` 生成色阶，配合 CSS 自定义属性（CSS 变量）构建设计令牌（design tokens），替代过去的手动十六进制值管理。
- 浏览器兼容性：Chrome 119+、Firefox 113+、Safari 16.2+ 已支持 OKLCH；`light-dark()` 在 Chrome 123+、Firefox 120+、Safari 17.5+ 可用。Edge 跟随 Chromium 内核进度。
- 原文还介绍了用 CSS 原生能力实现主题切换（省去 JavaScript 切换 class 的繁琐）、基于 OKLCH 的调色板生成工具，以及如何用 `@property` 注册自定义属性使颜色运算更可靠。