颜色混合器 - 在线混合颜色工具
在RGB或HSL色彩空间中以可调比例混合两种或多种颜色。预览渐变步骤并复制结果 — 100%客户端处理，无需服务器。
常见问题
什么是颜色混合器？
颜色混合器是一种在线工具，可以按可配置的比例将两种或多种颜色混合在一起，生成新的中间颜色。它在选定的颜色空间（如RGB或HSL）中计算输入颜色之间的数学插值，并以多种格式（HEX、RGB、HSL）输出结果。
如何使用此工具？
1. 使用HEX输入框或可视化颜色选择器输入两种颜色。2. 调整混合比例滑块。3. 可选择在RGB和HSL模式之间切换。4. 查看带有HEX、RGB、HSL值的结果颜色。5. 点击任何输出值复制到剪贴板。6. 可以添加更多颜色进行多色混合，或使用渐变步骤预览查看中间颜色。
我的颜色数据安全吗？会发送到服务器吗？
您的颜色数据100%安全，永远不会离开您的浏览器。所有颜色混合计算都完全在客户端使用JavaScript数学运算执行。不会向任何服务器传输数据。
RGB混合和HSL混合有什么区别？
RGB混合独立插值每个红、绿、蓝通道。简单可预测，但混合色轮上相距较远的颜色时可能产生灰暗的中间色。HSL混合分别插值色相、饱和度和亮度，沿着360度色轮的最短路径，通常产生更鲜艳直观的结果。
可以混合两种以上的颜色吗？
可以。点击'添加颜色'按钮添加更多颜色输入（最多8种）。每种颜色都有权重控制，结果是RGB空间中所有输入颜色的加权平均值。
混合比例是如何计算的？
对于两种颜色，比例滑块控制从0%到100%的线性插值因子。0%时结果为纯色1，50%时为均匀混合，100%时为纯色2。公式：result = color1 × (1 - ratio/100) + color2 × (ratio/100)。
什么是渐变步骤？
渐变步骤预览显示两个输入颜色之间的中间颜色条带。您可以在3到10个步骤之间选择。点击任何步骤即可复制其颜色值。
代码示例
// Color Mixer
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return null;
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
};
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0'))
.join('');
}
function mixColorsRgb(hex1, hex2, ratio = 0.5) {
const c1 = hexToRgb(hex1);
const c2 = hexToRgb(hex2);
if (!c1 || !c2) return null;
const t = Math.max(0, Math.min(1, ratio));
return rgbToHex(
c1.r * (1 - t) + c2.r * t,
c1.g * (1 - t) + c2.g * t,
c1.b * (1 - t) + c2.b * t,
);
}
function generateGradientSteps(hex1, hex2, steps = 5) {
const result = [];
for (let i = 0; i < steps; i++) {
const ratio = steps === 1 ? 0.5 : i / (steps - 1);
result.push(mixColorsRgb(hex1, hex2, ratio));
}
return result;
}
// Usage
const blue = '#3b82f6';
const red = '#ef4444';
console.log('50/50 mix:', mixColorsRgb(blue, red, 0.5));
console.log('Gradient:', generateGradientSteps(blue, red, 5));