CSS还是PHP？将颜色变为原始颜色的80％但不带“透明度”？

Question

这可能是一个比较困难的问题。

我有一个 PHP 函数，它返回一个带有参数 $alpha 的 rgba() 颜色值。

function colorWheel($alpha) {

   "rgba(170, 135, 178, ".$alpha.")"
   …
}

So when calling …

.title { color: <?php echo colorWheel(.8); ?>; }

我得到的颜色是rgba(170, 135, 178, .8);

---

我对此的问题在于颜色是“透明的”并且显示了“叠加”。

然而，我真正想要的只是颜色值的80%！ 没有任何透明的叠加。

现在的问题是如何解决呢？

有没有创意的想法来解决这个问题？我不需要使用rgba()，它只是我想到的最简单的事情。是否有CSS方式不混合具有alpha值的叠加形状？

或者有没有php解决方案来计算rgb(170, 135, 178)的80％版本？ 这个计算必须与函数动态工作，因为函数中有更多的颜色 - 这是“基于日期和随机数返回颜色值的方法？”的后续问题！

提前致谢。

- matt

---

但这就是透明颜色的工作原理。我认为你想要在整个容器上设置一个总体的 opacity: .8;，而不是在每个对象上设置单独的 RGBA 颜色。 - BoltClock

不要使用 alpha 值来获取“该颜色的 80%”表示，为什么不转换为 HSL 并减少其亮度或饱和度，然后将其转换回 RGB 并使用这些值而不是修改 alpha 值。RGBA 使用 alpha。 - Rudi Visser

我知道透明度是如何工作的 :) 这就是为什么我在问的原因。不幸的是，那些颜色的项目不是同一个“容器”，而是彼此重叠的不同对象。这也是我要求 PHP 答案的原因。我只是想知道是否可能我错过了某些 CSS 设置。 - matt

80%的是什么？Html中的颜色空间RBG和HSL。您可以取所有颜色通道的80％，或转换为HSL并将饱和度或亮度减少到80％。 - Christoph

@Christoph 没关系！我也可以用十六进制颜色创建数组。看这个...https://dev59.com/6mzXa4cB1Zd3GeqPZvvI 我只需要函数像那样工作。我只想传递一个 $alpha 参数，并获得 colorWheel() 返回的颜色的80％版本。我不在乎是否返回 rgba()，rgb() 或 #hex。我只需要用css设置值。 - matt

@matt 我想说的是，在计算RGB 80％或使用HSL并将亮度降低到80％之间存在差异。请查看我的答案以获取更多信息。 - Christoph

Answer 1

问题是你对“颜色的80%”有什么定义。

目前CSS有两种可用的颜色空间：RGB和HSL（实际上支持得相当好）。

你可以进行以下RGB计算：

function colorWheel($alpha) {

    'rgba('.$r*$alpha.','.$g*$alpha.','.$b*$alpha.', 1)';
    …
}

或者您可以使用HSL，仅将亮度（和/或饱和度）通道降低20％。在进行颜色变暗/变亮等操作时，HSL颜色空间更直观。

function colorWheel($alpha) {

    "hsla($h,$s,".$l*$alpha.",1)";
    // or
    // ("hsla($h, "+$s*$alpha+", $l, 1)";)
    …
}

这些都会产生（稍微）不同的结果。

颜色空间可以通过一些不太复杂的公式相互转换。也许你应该看看一个随机的颜色选择器（例如这个或那个），然后决定哪种计算方法最适合你。

- Christoph

---

PHP在字符串中是否实际插值$r*$alpha？我已经很久没有写PHP了。 - BoltClock

Answer 2

应该就可以了：

function colorWheel($alpha) {
    $r = round(170 * $alpha);
    $g = round(135 * $alpha);
    $b = round(178 * $alpha);
    "rgba($r, $g, $b, 1)";
    …
}

嗯，这会使颜色变暗，如果你想让它变亮，你需要将 alpha 值设为大于 1 的值，并检查 r、g 或 b 是否超过了 255，如果超过了就将其设置为 255。

- x4rf41

---

如果您不使用 alpha 通道，实际上您不需要使用 rgba（支持较少）。 - Christoph

Answer 3

为了模拟带有不透明度的颜色，您还需要背景颜色。假设 R,G,B 是背景颜色组件，r,g,b 是您的颜色组件。 如果您想在特定背景上模拟不透明度颜色，则应该取相同通道的相应值，并使用特定权重将它们相加。

r = r*alpha + R*(1-alpha)
g = g*alpha + G*(1-alpha)
b = b*alpha + B*(1-alpha)

让我们举个简单的例子。你想在背景色为白色（rgb(R,G,B) = rgb(255,255,255)）的情况下，在颜色为红色（rgb(r,g,b) = rgb(255,0,0)）的情况下获得alpha=0.8。这意味着，你需要将你的颜色和背景色分别加上80%和20%的权重：

r = 255*0.8 + 255*0.2 = 255
g = 0*0.8 + 255*0.2 = 51
b = 0*0.8 + 255*0.2 = 51

- Kasyx

---

你确定这是正确的吗？对我来说，我总是得到一个更暗的版本，而不是更亮的。 - matt