css – 如何计算所需的色相旋转以生成特定颜色？

我有一个白色的图像，我用作一个div的背景，我想要颜色匹配主题的主要颜色。我知道我可以做：

filter: sepia() saturate(10000%) hue-rotate(30deg);

并循环通过色调旋转来寻找颜色，但是可以提前计算这个值吗？假设指定的十六进制值很暗，我想我将需要包括invert(％)过滤器。

给定一个十六进制值#689d94我需要做什么计算所需的色调旋转和反转值才能将我的白色背景图像转换成相同的颜色？

编辑

这是一个div的片段，白色背景图像被过滤为绿色。这里的诀窍在于正在被过滤的整个div，而不仅仅是形象。如果我要在div中输入一些文本，文本颜色也会变成绿色。

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
  filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
}

<div>
  </div>

解决方法

这种情况下的关键是定义初始颜色。白色或黑色或任何灰度在技术上都是实际的颜色 – 您不能饱和或旋转它。你必须以某种方式“着色”，而褐藻过滤器是唯一可以进行某种形式的着色的过滤器。

如果您的图像纯净100％红色会更容易。然后，您可以直接添加目标度，并使用目标的HSL调整饱和度和亮度。对于白色起始点，第一步是转换和定义中间颜色，以便稍后可以饱和并旋转它。

让我们首先使白色图像变暗，并应用深棕色以获得可以使用的“基础”颜色：

filter: brightness(50%) sepia(1);

这将产生大约的RGB颜色值：

rgb(178,160,128)

第二步到convert that to HSL color-space给了我们：

hsl(38,24.5%,60%);

基色结果

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: brightness(50%) sepia(1);
  filter: brightness(50%) sepia(1);
}

<div></div>

将基色转换为目标颜色

这两个第一步是静态的，其结果将在每次需要找到目标调整时重复使用(实际值在SVG Filters specification中定义)。

现在我们需要计算我们需要应用到这个基色以获得目标颜色。首先将目标颜色转换为HSL中的例如#689d94;

hsl(170,21.3%,51.2%);

那么我们必须计算它们之间的差异。色调通过简单地从目标中减去基数来计算。对于饱和度和亮度相同，但是我们假设100％的基值，我们需要从100％中减去结果，得出累积值的差值：

H:  170 - 38             ->  132°
S:  100 + (24.5 - 21.3)  ->  103.2%  (relative to base 100% =  3.2%)
L:  100 + (51.2 - 60.0)  ->   91.2%  (relative to base 100% = -8.8%)

将这些值转换为过滤器字符串，将其附加到现有过滤器，然后将其设置在div上：

/*      ------ base color ------  -------  new target -------------------------------*/
filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);

要设置它，你可能会这样做，假设过滤器和divelement已经声明：

...
filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)";
divelement.style.filter = filter;
divelement.style.webkitFilter = filter;

注意，由于RGB表示为整数，HSL是浮点型，因此可能会出现舍入误差，因此实际结果可能不准确，但应该相当接近。

实例

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
  filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
}

<div></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>

可行的替代方案是：

>使用已设置的颜色预定义SVG。>直接在JavaScript中使用HSL / RGB，并直接使用颜色修改SVG树，而不是使用过滤器。过滤器是性价比很高的，特别是如果许多链接在这里，并且它们是页面的主要部分。所有浏览器都不支持它们。

原文地址：https://www.jb51.cc/css/218451.html

css – 如何计算所需的色相旋转以生成特定颜色？

解决方法

相关推荐