我如何计算出一种颜色与多少白色混合以创建另一种颜色？

Question

假设我有 color1 #0c3058 和 color2 #466280 并且我知道 color2是color1混合了一定比例的白色。我怎么知道有多少白色？

在这个例子中，我知道答案是 24%，我使用 mix(#fff, #0c3058, 24%) 在 Sass 中创建了 color2。我想知道如何找出其他组合。

Answer 1

所以我最终查找了 Sass mix() 函数的工作原理，并找到了 this JavaScript code that recreates its functionality.

我借用了它的h2d函数： function h2d(h) { return parseInt(h, 16); } // convert a hex value to decimal

然后我查看了它是如何混合颜色的：

// combine the current pairs from each source color, according to the specified weight
val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));

我已经知道我的一种颜色是白色，它的所有RGB值都是255。我把v2换成了255。

因为我在与白色进行比较，所以我可以选择测试 R、G 或 B，它们都会给我相同的结果。

所以我尝试做代数，失败了，寻求帮助，并从原来的方程中得到这个方程：

100 * (c2 - 255) / (c1 - 255) = x

其中：

c1 = R(ed) 原始颜色
c2 = R(ed) 为最终混合颜色
x = 混合中的颜色权重
100 - x = 混合中的白色重量

//based on https://gist.github.com/jedfoster/7939513

function h2d(h) { return parseInt(h, 16); } // convert a hex value to decimal 

var unmix = function() {
  color_1 = document.getElementById('color1').value;
  color_2 = document.getElementById('color2').value;
  
  var c1 = h2d(color_1.substr(0, 2));
  var c2 = h2d(color_2.substr(0, 2)); 
  
  document.getElementById('percents').value = 100 - Math.floor((100 * (c2 - 255) / (c1 - 255)));
}

<label for="color1" />Color 1</label>
<input id="color1" value="0c3058" />
<label for="color2">Color 2</label>
<input id="color2" value="466280" />
<button onclick="unmix()">Figure Out White Color Weight</button>
<input id="percents" />

我如何计算出一种颜色与多少白色混合以创建另一种颜色？

How can I figure out how much white a color is mixed with to create another color?

sass

colors