用 HSL + GD 替换色调？

Question

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

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

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

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

下一个也是当前的尝试是保留色相值并添加饱和度和亮度值的原始差异，结果非常好，但我不确定它是否适用于不同的颜色。

• 有没有办法在颜色变化时保持色调？
• 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 种颜色集，看看效果如何。

如果效果不佳，那么您可能需要在 Google 上搜索“颜色感知”或类似内容。对于所有颜色，我们不会以相同的方式感知黑暗的变化（如果我没记错的话，还有其他品质）。

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