2

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

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

首先，我认为我可以得到 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>
4

1 回答 1

1

即时计算颜色 1、2 和 3 之间的差异真的有意义吗？如果我看你的原件，你正在做：basecolor，basecolor 饱和度低一点，暗很多，然后饱和度也低一点，也暗很多。

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

然后，您可以为自己的测试选择 32 种基本颜色，并为每种颜色生成 3 种颜色集，看看效果如何。

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

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

于 2012-12-12T06:12:34.057 回答