CSS color-mix() 预览 (插值空间对比)

使用方法

1. 用拾色器选定颜色 A 和颜色 B，或粘贴 hex。
2. 拖动百分比滑块 — 这是混合中 A 的比例 (30% 表示 30% A + 70% B)。
3. 对比 8 张卡片：色块是当前比例的结果，渐变条显示该空间下 A→B 的完整渐变。
4. 点击任意卡片的复制图标，获取 `background: color-mix(in <space>, ...);` 声明。
5. 试试预设 — 红↔蓝、黄↔蓝是 'srgb 为什么看起来很脏' 的经典案例。

常见问题

为什么每个空间的结果差这么多?

color-mix() 做的线性插值，是在你选的坐标系中走一条直线。在 sRGB 里这条直线穿过去饱和的灰色，因为 sRGB 立方体的主对角线就是灰色。在 OKLCH 里同样的直线保持感知明度不变只旋转色相，所以保持鲜艳。在 HSL 里直线沿色相环最短路径走，可能经过 A 和 B 之间根本没有的颜色。哪个都不算错，只是几何结构不同。

应该用哪个空间?

大多数 UI 工作中，`oklch` 或 `oklab` 在感知上最佳 — 渐变亮度均匀、混合后仍鲜艳、没有浑浊的中间点。`srgb-linear` 对物理光线叠加 (照片合成) 正确。`srgb` 与旧工具和 2023 年前的 CSS 行为一致。`hsl` 仅在 A 和 B 饱和度·明度相同时适合做基于色相的调色板。除非特意要哑光效果，否则鲜艳色对避免直接用 `srgb`。

显示的 hex 准确吗?

正是浏览器计算出的值。颜色表达式被设为 canvas 的 `fillStyle`，渲染 1×1 像素，然后 `getImageData()` 读出真实的 sRGB 字节。所以你看到的 hex 与 `getComputedStyle()` 对该混合的解析值一致 — 在 8 位 canvas 量化误差 (每通道 ±1) 范围内。

hue-shortest 与 hue-longest 呢?

CSS 为色相相关空间 (hsl, hwb, lch, oklch) 支持 `longer hue` / `shorter hue` / `increasing hue` / `decreasing hue` 修饰符。本工具默认使用 (shorter hue) 以保持卡片简洁。如果需要长弧色相插值，自己加上修饰符: `color-mix(in oklch longer hue, A 50%, B)` — 同样的颜色，色环相反方向。

浏览器支持?

color-mix() 在 Chrome/Edge 111+ (2023 年 3 月)、Safari 16.2+ (2022 年 12 月)、Firefox 113+ (2023 年 5 月) 推出。2023 年起的所有主流浏览器都支持这里列出的全部空间。如果出现不支持横幅，说明浏览器更旧 — CSS 仍能解析，但不会产生正确颜色。

相关工具