CSS 现代色彩空间：color()、lab、lch 与显示器

---

title: CSS 现代色彩空间：color()、lab、lch 与显示器

keywords:

• CSS Color Level 4
• color()
• lab()
• lch()
• display-p3
• 色彩管理

description: 介绍 CSS 现代色彩函数及广色域支持，如何在显示器与浏览器中使用更准确的颜色，并给出示例与兼容策略。

categories:

• 文章资讯
• 编程技术

---

概述

CSS Color Level 4 引入 color()、lab()、lch() 等函数，支持广色域（如 Display-P3），在现代设备上呈现更准确的颜色。需关注不同浏览器的支持与回退。

示例

.p3 { color: color(display-p3 1 0.2 0.2) }
.lab { color: lab(60% 20 30) }
.lch { color: lch(60% 50 30) }
/* 背景与渐变 */
.bg { background: linear-gradient(90deg, color(display-p3 0.8 0.2 0.2), color(display-p3 0.2 0.2 0.8)) }

工程建议

• 回退策略：为不支持广色域的浏览器提供 sRGB 近似；使用特性查询与级联层控制。
• 设计流程：在设计到实现保持色彩空间一致；使用正确的图像 ICC/色彩标记。
• 性能与兼容：避免过度复杂的渐变与重绘；验证不同平台的呈现差异。

参考与验证

• MDN CSS Color 文档：https://developer.mozilla.org/docs/Web/CSS/color_value
• web.dev 广色域与色彩指南：https://web.dev/articles/css-color-function
• CSS Color Module Level 4：https://www.w3.org/TR/css-color-4/