Question

我们正在使用具有三种蓝色调（#645591，#6B90CA和#7BC8EF）的基本图像，其中一个用户选择的颜色将替换第一个蓝色值（基础）并且它将为要替换的额外两种颜色生成两个音调。

我发现this answer非常有效且有用，但问题是如何计算一种颜色与另一种颜色之间的差异，所以我可以在完全不同的颜色中重复使用这种差异？

首先，我认为我可以获得RGB差异，只需将其添加到新颜色，这对我来说是天真的。

然后，经过一些研究，似乎HSL是要走的路，所以我计算了基础蓝（第一个）和接下来的两个值之间的差异，这样我就可以确定选择另一个值并添加差异吧？嗯......事实证明它没有：

下一个和当前的尝试是单独保留Hue值并为Saturation和Light值添加原始差异，结果非常好，但我不确定它是否适用于不同的颜色。

有没有办法在颜色变化时保留色调？
HSL是可行的吗？
我有把它转换成灰度然后从那里着色的感觉，这是正确的吗？

这是代码，我用CSS来测试这个概念，但工具是PHP + GD。

<style>
span{
  display: inline-block;
  width: 100px;
  height: 400px;
  float: left;
}
.c1{
  background: #645591;
  /* hsl(255, 26%, 45%) */
}
.c2{
  background: #6B90CA;
  /* hsl(217, 47%, 61%) */
}
.c3{
  background: #7BC8EF;
  /* hsl(200, 78%, 71%) */
}
.r1{
  background: hsl(50, 35%, 24%);
}
.r2{
  background: hsl(12, 56%, 40%);
}
.r3{
  background: hsl(355, 87%, 50%);
}
/* Preserving the Hue values turns out to be pretty good */
.z1{
  background: hsl(355, 35%, 24%);
}
.z2{
  background: hsl(355, 56%, 40%);
}
.z3{
  background: hsl(355, 87%, 50%);
}
</style>
<span class="c3"></span>
<span class="c2"></span>
<span class="c1"></span>
<span style="width: 50px;"></span>
<span class="r3"></span>
<span class="r2"></span>
<span class="r1"></span>
<span style="width: 50px;"></span>
<span class="z3"></span>
<span class="z2"></span>
<span class="z1"></span>

Answer 1

计算飞行中颜色1,2和3之间的差异真的有意义吗？如果我看一下你的原版，你就是这样做的：basecolor，basecolor有点不那么饱和，颜色更深，然后也有点不那么饱和，而且颜色也更深。

为什么不在每次转换中使用相同的公式，让用户从给定的调色板中选择基色

然后，您可以为自己的测试选择32种基色，并为每种颜色生成3种颜色，以了解它的工作情况。

如果这不能很好地运作，那么，您可能希望谷歌对“颜色的感知”或类似的东西。对于所有颜色，我们都不会感觉到黑暗的变化（如果我没记错的话，还有其他品质）。

您可能还想考虑使用所有CSS或CSS + PHP或LessCss或CSS + Javascript。

用HSL + GD替换色调？

1 个答案: