颜色混合器

步 1 / 2

颜色 A

颜色 B

步骤

结果

输入两个 HEX 颜色，选择需要的步骤数，颜色混合器会显示起始颜色、结束颜色，以及两者之间均匀分布的颜色。它适合快速制作 UI 色阶、规划渐变、检查图标状态，并在写入 CSS 或设计文件前确认准确的 HEX 节点。

HEX 混合的计算方式

颜色混合器只处理标准 HEX 颜色写法。它接受 #F60 这样的短 HEX，也接受 #FF6B35 这样的完整 HEX，并在内部标准化后，把每个结果输出为 6 位大写 HEX 代码。

混合方式是在 RGB/sRGB 通道中做简单的线性插值：

因为包含两端颜色，所以 2 个步骤表示“只有起点和终点”。从 #FF6B35 到 #1E3A8A 设置 7 个步骤时，输出为：

这个混合器不接受 rgb()、hsl()、颜色名称、alpha 值或 8 位 HEX。它不导出 RGB、HSL、LAB、LCH、CSS 片段、对比度检查或无障碍评分。如果需要这些功能，请先取得 HEX 节点，再使用专门的转换器、对比度检查器或渐变生成器。

只能输入 HEX：3 位或 6 位，前面带不带 # 都可以。工具不会读取 rgb()、hsl()、alpha 通道或颜色名称。

会。第一个步骤是第一个颜色，最后一个步骤是第二个颜色。其他步骤是在两者之间插值得到的颜色。

混合是在 RGB/sRGB 中逐通道计算的。这种方式可预测，也容易在代码中复用，但不同于基于感知的 LAB 或 LCH 插值。

不会。它只显示色块和 HEX 代码。请把生成的 HEX 值用于 CSS，或者在需要无障碍比例时交给对比度检查器。