根据不透明度值将 6 位十六进制颜色转换为 6 位十六进制颜色

Question

我已经设置了背景颜色#ec2024（红色）不透明度为 .5.

正如我使用颜色选择器看到的那样，颜色值略有变化并变为#F69092（粉红色）

如何使用 js 或 jquery 从 #ec2024 和 .5 不透明度值中获取输出值 #F69092(pink)？

TIA

Answer 1

取 % 的背景色并将它们混合。很容易写。

我确实创建了非常简单的片段来展示它是如何工作的：

const mixColors = (c1, c2, p = 0.5) => {
  const pn = n => ('0' + n.toString(16)).slice(-2);
    const [r0, g0, b0, r1, g1, b1] = [
    parseInt(c1.slice(1, 3), 16),
    parseInt(c1.slice(3, 5), 16),
    parseInt(c1.slice(5, 7), 16),
    parseInt(c2.slice(1, 3), 16),
    parseInt(c2.slice(3, 5), 16),
    parseInt(c2.slice(5, 7), 16),
  ];
    const [r, g, b] = [
    Math.round(r0 * p + r1 * (1 - p)),
    Math.round(g0 * p + g1 * (1 - p)),
    Math.round(b0 * p + b1 * (1 - p)),
  ];
  return `#${pn(r)}${pn(g)}${pn(b)}`;
};

const setValue = val => {
  document.querySelector('.value').innerHTML = `${(val * 100).toFixed(0)}%`;
  document.querySelector('.mixed-color').value = mixColors(
    document.querySelector('.color2').value,
    document.querySelector('.color1').value,
    val
  );
};

document.querySelector('.range').addEventListener('input', function() {
  setValue(this.value);
});

setValue(0.5);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div>
    <input class="color1" type="color" value="#F69092">
    <label for="head">Color 1</label>
  </div>
  
  <div>
    <input class="color2" type="color" value="#6699cc">
    <label for="head">Color 2</label>
  </div>
  
  <input class="range" type="range" min="0" max="1" step="0.01"/>
  <span class="value"></span>
  
  <div>
    <input class="mixed-color" type="color">
    <label for="head">Mixed Color</label>
  </div>
</body>
</html>

根据不透明度值将 6 位十六进制颜色转换为 6 位十六进制颜色

Convert 6 digit hex colors to 6 digit hex color based on opacity value

javascript

css

jquery

hex

colors