时间戳

首页 > 解决方案 > JavaScript 中的反向混合颜色

javascript - JavaScript 中的反向混合颜色

问题描述

我发现以下片段可以混合两种十六进制颜色，效果很好。（抱歉我不记得出处了）

    function blendHexColors(c0, c1, p) {
        var f = parseInt(c0.slice(1), 16);
        var t = parseInt(c1.slice(1), 16);
        var R1 = f >> 16;
        var G1 = f >> 8 & 0x00FF;
        var B1 = f & 0x0000FF;
        var R2 = t >> 16;
        var G2 = t >> 8 & 0x00FF;
        var B2 = t & 0x0000FF;

        return "#" + (0x1000000
            + (Math.round((R2 - R1) * p) + R1) * 0x10000
            + (Math.round((G2 - G1) * p) + G1) * 0x100
            + (Math.round((B2 - B1) * p) + B1)).toString(16).slice(1);
    }

我现在想要一种方法来扭转这个过程。

有谁知道这样做的方法。

我的例子是这样的

var blendColor = blendHexColors('#ffffff', '#ff0000', 0.5);
var unblenColors = unblenHexColors(blendColor, '#ff0000', 0.5); // result would be #ffffff

标签： javascript

解决方案

在您发表评论后，我能够修复代码并创建一个显示其工作原理的小提琴（https://jsfiddle.net/zvp4sh26/）

我发布的原始代码的问题是某些组件（如G和B）的结果为256（而不是255）

function unblendHexColors(c0, c1, p) {
  var f = parseInt(c0.slice(1), 16);
  var t = parseInt(c1.slice(1), 16);
  var R1 = f >> 16;
  var G1 = f >> 8 & 0x00FF;
  var B1 = f & 0x0000FF;
  var R2 = t >> 16;
  var G2 = t >> 8 & 0x00FF;
  var B2 = t & 0x0000FF;
  var d = 1 - p;
  var R3 = (R1 - R2 * p) / d;
  var G3 = (G1 - G2 * p) / d;
  var B3 = (B1 - B2 * p) / d;

  return "#" + (0x1000000
    + (R3 > 255 ? 255 : R3) * 0x10000
    + (G3 > 255 ? 255 : G3) * 0x100
    + (B3 > 255 ? 255 : B3)).toString(16).slice(1);
}

现在应该工作:)

推荐阅读