# 颜色混合器

像 CSS color-mix() 一样，按任意比例在指定颜色空间中混合两种颜色。输入任意 CSS 格式的两种颜色，将第二种颜色的占比设为 0 到 100 percent，并选择 OKLab、OKLCH、Lab、LCH、sRGB、linear sRGB、Display P3、HSL、HWB 或 XYZ。结果包括 HEX、RGB、HSL 和 OKLCH 值，以及可直接用于样式表的 color-mix() 表达式。

## 常见问题

### 混合比例如何计算？

比例表示颜色 2 在混合结果中的占比。0% 会返回颜色 1，100% 会返回颜色 2，50% 则会在所选空间中得到两者的中间值。这与 color-mix(in space, color1 (100 - p)%, color2 p%) 的计算方式一致。

### 应该选择哪种颜色空间？

默认的 OKLab 符合感知均匀性，可避免混合结果发浑或变暗。sRGB 像旧版浏览器和 Sass 一样混合经过伽马编码的通道，因此高饱和度颜色的混合结果会更暗、更灰。Lab 是较早的 CIE 感知空间，表现与 OKLab 相似，但蓝色的均匀性较差。

### 基于色相的空间有什么效果？

OKLCH、LCH、HSL 和 HWB 会沿色轮较短的弧线插值色相，这是 CSS 默认方式，因此中间色会保留饱和度，可能比任一输入颜色都鲜艳。如果其中一种颜色是没有色相的中性灰，则会使用另一种颜色的色相。

### linear sRGB 和 XYZ 有什么用途？

两者都会像光束重叠那样线性混合光强，因此中间色看起来比在 sRGB 中更亮。它们适用于基于物理原理的效果，以及匹配模糊或混合像素的外观。

### 如何处理透明度？

与 CSS color-mix() 一样，混合器使用预乘 alpha 进行插值，因此透明颜色不会让混合结果偏向黑色。alpha 值本身也会按相同比例插值，并显示在 8 位十六进制代码中，以及 CSS 函数的斜杠之后。

### 可以使用哪些输入格式？

支持带 # 或不带 # 的十六进制代码、CSS 颜色名称、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color()（例如 display-p3）等颜色空间，以及 cmyk()，可任意组合使用。每种颜色最多可包含 100 个字符。

### 结果超出 sRGB 色域时会怎样？

在 Display P3、OKLCH 或 LCH 中混合可能会产生 sRGB 无法显示的颜色。此时，HEX、RGB 和 HSL 会使用 CSS Color 4 算法映射到 sRGB，结果旁也会显示提示；OKLCH 值则保留未经映射的颜色。

### 如何使用 color-mix() 表达式？

将其粘贴到任何接受颜色值的 CSS 属性中。表达式会通过十六进制代码指定输入颜色；对于广色域输入，则通过 oklch() 指定，浏览器会据此重新计算相同的混合结果。所有当前版本的 Chrome、Edge、Firefox 和 Safari 都支持 color-mix()。

### 结果有多精确？

比例为整数百分比，混合结果由 culori 库以全精度计算。RGB 通道四舍五入为整数，HSL 百分比保留两位小数，OKLCH 亮度和色度保留四位小数，因此不同浏览器最后一位可能相差一个单位。

### 如何在两种颜色之间生成多个步长？

使用不同的比例运行混合器，例如 25%、50% 和 75%。如需生成从原色到白色、黑色或灰色的完整色阶，颜色淡色、暗色和色调生成器可在一张表格中显示所有步长。

在这里投放广告？

[给我们发邮件](mailto:hi@dennn.is?subject=%E5%9C%A8%20OneClick%20Pro%20%E4%B8%8A%E6%8A%95%E6%94%BE%E5%B9%BF%E5%91%8A)

[广告 适用于 WordPress 的智能体就绪型插件套件。](https://sleekwp.com/?ref=oneclickpro)