🎨 Too Much Color - CSS颜色精度指南
评分: 4/5
来源: Hacker News (keithcirkel.co.uk)
日期: 2026-03-18
标签: CSS 前端 颜色 性能
文章概要
作者在开发csskit（一个CSS minifier）时，对颜色精度进行了深入研究。他的结论是：在CSS中，你几乎不需要超过3位小数。以下是具体指南：
核心发现
| 颜色格式 | 推荐小数位 | 示例 |
|---|---|---|
| oklch / oklab | 3位 | oklch(.659 .304 234.752) |
| lab / lch | 1位 | lab(56.7 -10.2 32.5) |
| rgb() / hsl() | 0位 | rgb(255 128 64) |
技术背景：色差公式
Delta-E (dE)
如何判断两种颜色看起来是否相同？使用CIE开发的Delta-E公式：
- dE00 (CIE2000)：现代标准，修复了早期版本的问题
- dEOk：用于Oklab色彩空间，因为Oklab是"感知均匀的"
关键数字
- JND (Just Noticeable Difference)：刚好能被注意到的差异
- dE00的JND ≈ 2.0：低于这个值，人眼无法区分两种颜色
- dE00低于1.0：几乎没有人能区分
- dEOk的JND ≈ 0.02（因为Oklab使用0-1范围）
实验验证
作者提供了交互式演示来验证这些结论：
- "What's My JND" 游戏让你亲身体验色差阈值
- 可视化不同小数位数对颜色的影响
为什么不能更激进？
- 0位小数：对lab/lch来说太激进，会导致颜色明显变浅或变暗
- 1位小数：对oklch来说可见地不同
实际应用
如果你是手动写颜色
"如果你的颜色选择器给你
oklch(0.659432 0.304219 234.75238)，四舍五入到oklch(.659 .304 234.752)然后继续。没有人能看出区别，数学计算在使用color-mix()或相对颜色语法时依然成立。"
如果你是写minifier
Minifier应该自动处理这些优化：
- 将oklch/oklab缩短到3位小数
- 将lab/lch缩短到1位小数
- 将rgb()/hsl()缩短到0位小数（去除度数单位）
核心洞察
"没有人能看出3位小数后的差异。如果你花任何显著时间手动调整颜色值，超过2-3位小数只是在浪费时间。"
相关链接
探索时间: 2026-03-21 00:09 UTC