如何用CSS或JavaScript混合两种以上的颜色？

一、CSS方案：嵌套调用color-mix() #

原生color-mix()仅支持两种颜色混合，但可以通过嵌套调用实现多色混合——本质是按顺序逐步混合：先混合前两种颜色，再将结果与第三种混合，以此类推。

示例代码（等权重混合三种颜色）：

.mixed-text {
  /* 红、绿、蓝各占1/3权重 */
  color: color-mix(in srgb, color-mix(in srgb, red 33.33%, green 33.33%), blue 33.33%);
}

如果需要混合n种颜色，每个颜色的权重设为100%/n即可。这种方式适合简单场景，但颜色数量较多时代码会比较冗长。

二、JavaScript方案：手动实现多色混合逻辑 #

通过将颜色转换为RGBA数值，计算通道的加权平均值，再转换回合法颜色格式，可灵活支持任意数量的颜色混合。

核心实现代码 #

// 将任意合法颜色转换为RGBA对象
function colorToRGBA(color) {
  const tempEl = document.createElement('div');
  tempEl.style.color = color;
  document.body.appendChild(tempEl);
  const computed = getComputedStyle(tempEl).color;
  document.body.removeChild(tempEl);

  const match = computed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/);
  if (!match) return null;

  return {
    r: parseInt(match[1]),
    g: parseInt(match[2]),
    b: parseInt(match[3]),
    a: match[4] ? parseFloat(match[4]) : 1
  };
}

// 混合多个颜色，支持自定义权重（默认等权重）
function mixMultipleColors(colors, weights = null) {
  if (colors.length < 2) return colors[0] || '';

  // 处理权重：默认等权重，数量不匹配则抛出错误
  if (!weights) {
    weights = Array(colors.length).fill(1 / colors.length);
  } else if (weights.length !== colors.length) {
    throw new Error('颜色数量与权重数量必须一致');
  }

  // 归一化权重，确保总和为1
  const totalWeight = weights.reduce((sum, w) => sum + w, 0);
  const normalizedWeights = weights.map(w => w / totalWeight);

  let totalR = 0, totalG = 0, totalB = 0, totalA = 0;
  colors.forEach((color, index) => {
    const rgba = colorToRGBA(color);
    if (!rgba) return;
    totalR += rgba.r * normalizedWeights[index];
    totalG += rgba.g * normalizedWeights[index];
    totalB += rgba.b * normalizedWeights[index];
    totalA += rgba.a * normalizedWeights[index];
  });

  // 限制通道值在合法范围内并取整
  const r = Math.max(0, Math.min(255, Math.round(totalR)));
  const g = Math.max(0, Math.min(255, Math.round(totalG)));
  const b = Math.max(0, Math.min(255, Math.round(totalB)));
  const a = Math.max(0, Math.min(1, totalA));

  return a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
}

// 使用示例1：等权重混合红、绿、蓝
console.log(mixMultipleColors(['red', 'green', 'blue']));
// 输出示例：rgb(85, 85, 85)

// 使用示例2：按自定义权重混合
console.log(mixMultipleColors(['#ff0000', '#00ff00', '#0000ff'], [0.5, 0.3, 0.2]));
// 输出示例：rgb(128, 77, 51)

说明 #

• colorToRGBA利用浏览器计算样式，兼容hex、rgb、hsl等所有合法CSS颜色格式。
• mixMultipleColors支持任意数量的颜色混合，可自定义各颜色的权重占比。
• 如果需要在HSL颜色空间混合，可修改转换逻辑：将颜色转为HSL数值计算后再转回RGB。

内容的提问来源于stack exchange，提问作者b0k0d7