如何为PNG图片设置HTML色调？实现通过颜色码/RGBA动态改色

下面提供三种实用方案，覆盖从快速调整到精准控制的不同需求：

方法1：CSS滤镜快速调色调 #

适合对颜色精度要求不高的场景，通过组合滤镜函数调整整体色调：

<style>
  .custom-color-logo {
    /* 示例：将原图调整为偏红色调，参数可根据原图微调 */
    filter: hue-rotate(-30deg) saturate(4) brightness(1.1);
    /* 如果是白底透明图标，也可以用这套组合：filter: invert(1) sepia(1) saturate(5) hue-rotate(0deg); */
  }
</style>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeSIKRkAOaco7-ho-0VMICMF7ZeF3LE21NsQ&usqp=CAU" alt="logo" class="custom-color-logo">

优点：代码简单，无需额外资源；缺点：颜色匹配不够精准，依赖原图基础色调。

方法2：SVG滤镜精准替换单一颜色 #

如果原图是单一纯色+透明背景（比如白色图标），用SVG的feColorMatrix滤镜可以精准替换成目标RGB/RGBA颜色：

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <!-- 定义滤镜：将白色替换为#2563eb（蓝色），数值为目标RGB值除以255 -->
    <filter id="replaceWhiteToBlue">
      <feColorMatrix
        type="matrix"
        values="
          0 0 0 0 0.149   <!-- R通道：25/255 ≈ 0.149 -->
          0 0 0 0 0.388   <!-- G通道：99/255 ≈ 0.388 -->
          0 0 0 0 0.922   <!-- B通道：235/255 ≈ 0.922 -->
          0 0 0 1 0       <!-- 透明度保持不变 -->
        "
      />
    </filter>
  </defs>
  <image 
    href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeSIKRkAOaco7-ho-0VMICMF7ZeF3LE21NsQ&usqp=CAU" 
    width="100%" 
    height="100%" 
    filter="url(#replaceWhiteToBlue)"
  />
</svg>

优点：颜色替换精准，不损失图片细节；缺点：仅适合单一纯色的原图。

方法3：Canvas API动态控制像素 #

需要完全动态修改（比如用户输入颜色后实时更新）时，用Canvas直接操作像素是最灵活的方案：

<!-- 隐藏原图，仅作为素材 -->
<img id="original-logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeSIKRkAOaco7-ho-0VMICMF7ZeF3LE21NsQ&usqp=CAU" alt="logo" style="display:none;">
<!-- 显示修改后的画布 -->
<canvas id="colored-canvas" width="200" height="200"></canvas>

<script>
  const originalImg = document.getElementById('original-logo');
  const canvas = document.getElementById('colored-canvas');
  const ctx = canvas.getContext('2d');

  originalImg.onload = function() {
    // 先把原图绘制到画布
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    // 获取像素数据
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // 目标颜色：RGBA(255, 0, 0, 1) 纯红色
    const targetR = 255;
    const targetG = 0;
    const targetB = 0;

    // 遍历每个像素，替换非透明区域颜色
    for (let i = 0; i < data.length; i += 4) {
      const alpha = data[i + 3];
      if (alpha > 0) { // 只处理有透明度的像素
        data[i] = targetR;
        data[i + 1] = targetG;
        data[i + 2] = targetB;
        // 如需修改透明度，可调整data[i+3]
      }
    }

    // 将修改后的像素放回画布
    ctx.putImageData(imageData, 0, 0);
  };
</script>

优点：完全自定义，支持实时动态修改；缺点：需要编写少量JS代码。

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