CSS color-mix() 预览 (插值空间对比)
颜色
现代 CSS 允许你用 `color-mix(in <space>, A <p>, B)` 混合两种颜色，选择的插值空间会极大改变结果。红色和蓝色在 `srgb` 中混合得到浑浊的紫灰；同样的混合在 `oklch` 中产生鲜艳的洋红；在 `hsl` 中则会扫过青色，因为色相沿色环短弧插值。该工具将同样的混合并排显示在 8 个常用空间 (`srgb`, `srgb-linear`, `hsl`, `hwb`, `lab`, `lch`, `oklab`, `oklch`) 中 — 使用浏览器原生 `color-mix()`，所见即所得。每张卡片显示当前比例的大色块、解析得到的 sRGB hex (通过将颜色画到 1×1 canvas 并读取像素计算)、以及显示从 A 到 B 完整路径的 11 步渐变条。拖动比例滑块，8 条路径同时动起来。点击任意卡片即可复制对应的 CSS 声明。
—
预设
srgb
—
srgb-linear
—
hsl
—
hwb
—
lab
—
lch
—
oklab
—
oklch
—
关于插值空间
color-mix() 在你指定的空间内对两种颜色做线性插值。sRGB 经过去饱和的灰色。srgb-linear 与物理光线相加 (照片合成) 一致。HSL/HWB/LCH/OKLCH 在色环上插值色相 — 默认走短弧。OKLab/OKLCH (Björn Ottosson, 2020) 感知均匀 — 数值上等距的步长看起来视觉间距也相等。每个色块下方的 hex 是浏览器解析混合后从 1×1 canvas 中读出的，所以与 getComputedStyle() 一致。
使用方法
- 用拾色器选定颜色 A 和颜色 B，或粘贴 hex。
- 拖动百分比滑块 — 这是混合中 A 的比例 (30% 表示 30% A + 70% B)。
- 对比 8 张卡片：色块是当前比例的结果，渐变条显示该空间下 A→B 的完整渐变。
- 点击任意卡片的复制图标，获取 `background: color-mix(in <space>, ...);` 声明。
- 试试预设 — 红↔蓝、黄↔蓝是 '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 仍能解析，但不会产生正确颜色。