如何计算所需的色相旋转以生成特定颜色？ [英] How to calculate required hue-rotate to generate specific colour?

问题描述

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

 过滤器：sepia（）saturate（10000％）hue-rotate（30deg）; 
  

并循环浏览 hue-rotate 一种颜色，但是可以提前计算这个值吗？鉴于指定的十六进制值非常暗，我想我还需要包括 invert（％）过滤器。

给定十六进制值＃689d94 我需要做什么数学计算所需的 hue-rotate 和 invert 值将我的白色背景图片转换为相同的颜色？

编辑

这是一个 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>  

解决方案

p>在这种情况下，键是定义初始颜色。白色，黑色或任何灰度在技术上是一个实际的颜色 - 你不能饱和或旋转它。你必须以某种方式着色，并且棕褐色过滤器是进行某种形式的着色的唯一过滤器。

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

首先使白色图像变暗，然后应用棕褐色，以获得我们可以使用的基本颜色：

  ）棕褐色（1）; 
  

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

  rgb（178，160，128）
  

b $ b

第二步是将它转换为HSL颜色空间，它会提供给我们：

  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：亮度（50％）棕褐色（1）; filter：brightness（50％）sepia（1）;}  

 < div>< / div>  

到目标颜色

这两个第一步是静态的，每次我们需要找到目标调整时，它的结果将被重用（ sepia 在 SVG过滤器规范中定义）。

现在我们需要计算我们需要应用到这个基本颜色来获得目标颜色。首先将目标颜色（例如问题中给出的＃689d94）转换为HSL：

  hsl （170,21.3％，51.2％）; 
  

然后我们必须计算它们之间的差异。色相通过简单地从目标中减去基数计算。对饱和度和亮度也一样，但是我们假设100％的基值，我们需要从100％中减去结果，最终得到累积值的差：

< pre class =lang-none prettyprint-override> H：170 - 38 - > 132°
S：100 +（24.5 - 21.3） - > 103.2％（相对于基础100％= 3.2％）
L：100 +（51.2-60.0） - > 91.2％（相对于基本100％= -8.8％）


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

  ----基色------ -------新目标----------------------------- -  * / 
 filter：亮度（50％）棕褐色（1）色调旋转（132deg）饱和度（103.2％）亮度（91.2％）; 
  

并且设置它你可能会做这样假设filter和divElement已声明： p>

  ... 
 filter =亮度（132deg）饱和（103.2％）亮度（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; - 亮度（50％）棕褐色（1）色调旋转（132deg）饱和度（103.2％）亮度（91.2％）;过滤器：亮度（50％）棕褐色（1）色调旋转（132度）饱和度（103.2％）亮度（91.2％）;}    
 
 
 
 
 
 
选项是：
 
 
 
 
 
预先定义已设置颜色的SVG。
 
 
直接使用HSL / RGB并使用颜色直接为形状修改SVG树，而不是使用过滤器。过滤器是昂贵的性能明智，特别是如果许多链接在这里，他们是一个页面的主要部分。它们在所有浏览器中都不受支持。
 
 
 
I have a white image that I am using as a background for a div, and I would like to colour to match the themes main colour. I am aware I can do:
filter: sepia() saturate(10000%) hue-rotate(30deg);
and cycle through hue-rotate to find a colour, but is it possible to calculate this value in advance? Given that the specified hex value is quite dark, I imagine I will need to include the invert(%) filter as well.

Given a hex value of #689d94 what math do I need to do to calculate the desired hue-rotate and invert value to convert my white background image into the same colour?

Edit

Here's a snippet of a div with a white background image being filtered green. The trick here, is it is the whole of the div that is being filtered, not just the image. If I was to enter some text into the div the text colour would turn green as well.



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>



解决方案
The key in this case is to define an initial color. White nor black or any gray-scale is technically an actual color - you can't saturate or rotate it. You'll have to "colorize" it somehow, and the sepia filter is the only filter which do some form of colorizing.

It would be easier if your image was pure 100% red. Then you could just add the target degree directly and adjust saturation and lightness using HSL for target. For a white color start point the first step is to convert and define an intermediate color so we can saturate and rotate it later on.

Lets first darken the white image and apply sepia to get a "base" color we can work with:
filter: brightness(50%) sepia(1);
This will produce RGB color value of approximately:
rgb(178, 160, 128)
Step two is to convert that to HSL color-space which gives us:
hsl(38, 24.5%, 60%);


Base color result



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>





Converting base color to target color

These two first steps are static and its result will be reused every time we need to find a target adjustment (the actual value of sepia is defined in the SVG Filters specification).

Now we need to calculate what we need to apply to this base color to get target color. First convert target color, for example #689d94 as given in the question, to HSL:
hsl(170, 21.3%, 51.2%);
Then we have to calculate the difference between those. Hue is calculated by simply subtracting base from target. The same for Saturation and Lightness, but as we assume 100% of the base value we need to subtract the result from 100% to end up with a diff for the accumulated values:
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%)
Convert those values to a filter-string by appending it to the existing filter, then set it on the div:
/*      ------ base color ------  -------  new target -------------------------------*/
filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
And to set it you would probably do something like this assuming filter and divElement are already declared:
...
filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)";
divElement.style.filter = filter;
divElement.style.webkitFilter = filter;
Note that there is likely rounding errors as RGB is represented as integer, while HSL is floating point, so the actual result may not be exact, but it should get pretty close.

Live example



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>





Viable alternative options are:


Predefine SVGs with the color already set.
Work with HSL/RGB directly in JavaScript and modify the SVG tree with the color directly for the shape rather than using filters. Filters are expensive performance wise, especially if many are chained as here and they are in addition a dominant part of a page. They are neither supported in all browsers.


                        
这篇关于如何计算所需的色相旋转以生成特定颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！