相关疑难解决方法(0)

我的问题是:给定目标RGB颜色,#000使用CSS滤镜将黑色()重新着色为该颜色的公式是什么？

为了接受答案,它需要提供一个函数(以任何语言)接受目标颜色作为参数并返回相应的CSS filter字符串.

对此的上下文是需要在a内重新着色SVG background-image.在这种情况下,它是支持KaTeX中的某些TeX数学特性:https: //github.com/Khan/KaTeX/issues/587.

例

如果目标颜色为#ffff00(黄色),则一个正确的解决方案是:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg)

(演示)

非目标

• 动画.
• 非CSS过滤器解决方案.
• 从黑色以外的颜色开始.
• 关心黑色以外的颜色会发生什么.

结果到目前为止

• 强力搜索固定过滤器列表的参数:https
  ://stackoverflow.com/a/43959856/181228缺点:效率低下,只生成一些16,777,216种可能的颜色(676,248 hueRotateStep=1).

• 使用SPSA的更快的搜索解决方案:https : //stackoverflow.com/a/43960991/181228 Bounty奖励

• 一个drop-shadow解决方案: /sf/answers/3077189741/
  缺点:不上边缘运行.需要非filterCSS更改和次要HTML更改.

您仍然可以通过提交非暴力解决方案获得接受的答案!

资源

• 如何hue-rotate和sepia计算: /sf/answers/2066480321/ 例的Ruby实现:

  LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722
  HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = …

  Run Code Online (Sandbox Code Playgroud)

我有一个白色图像,我用作div的背景,我想颜色以匹配主题主色.我知道我能做到:

filter: 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>

我有一个平坦的红色.png图像,我希望通过使用CSS过滤器将其更改为特定的颜色.我认为这是最好的方法.

我正在使用SASS,通过使用它,我可以获得颜色的色调,饱和度和亮度.通过使用"红色"图像,这意味着色调的旋转度从0开始,因此通过使用hue-rotate我然后将其从0旋转到特定颜色的色调度.与饱和度和亮度相同.

filter: hue-rotate(hue(#50e3c2)) saturate(saturation(#50e3c2)) brightness(lightness(#50e3c2));

输出为:

filter: hue-rotate(166.53061deg) saturate(72.41379%) brightness(60.19608%); 如果我检查特定颜色的HSL是什么......

Hex: #50E3C2
HSL: 167° 72% 60%
RGB: 80 227 194

然而,当应用此图像时,图像是超暗的.看起来像正确的色调,但饱和度和亮度是错误的？

对我在哪里做错的任何想法？我看了一下这个例子:如何计算所需的色调旋转以生成特定的颜色？但似乎给了我同样的问题.

https://jsfiddle.net/gosj0ur2/

我正在尝试使用CSS过滤器模拟Photoshop的"颜色叠加",同时这样做,发现CSS过滤器对颜色的操作与癫痫发作一致.

考虑一下颜色#FF0000.如果我们旋转它的色调120deg,我们应该得到#00FF00,并且240deg我们应该得到#0000FF.这是理智的领域.现在让我们进入CSS过滤器:

body { font: bold 99px Arial }
span { color: #F00; }
.daltonics-wont-notice {
    -webkit-filter: hue-rotate(120deg);
    filter: hue-rotate(120deg);
}
.precision-is-overrated {
    -webkit-filter: hue-rotate(240deg);
    filter: hue-rotate(240deg);
}

<span class="red">?</span>
<span class="daltonics-wont-notice">?</span>
<span class="precision-is-overrated">?</span>

什么应该#00FF00是#007100,而且应该是什么#0000FF是#0132FF.通过使用hue-rotate,色调,饱和度和亮度已设置为无意义的级别,跨浏览器.

我需要赶上Cthulhu并找出他编码的逻辑,以便我可以解决它.

这是一个与HSV或HSL无关的奇怪色彩空间吗？是否有可能将HSV,HSL或RGB坐标转换为这种异想天开的维度？它有名字吗？一个标准？邪教跟随？

我需要一个 CSS 过滤器来应用于容器中的所有元素，特定元素除外。解释情况的快速示例：

<div class="container">
 <img class="one" src="blah" />
 <img class="two" src="blah" />
 <img class="three" src="blah" />
</div>

然后我像这样应用过滤器：

.container {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

因此容器应用了灰度过滤器，并且其中的所有 img 都变为灰色。但是，我希望其中一个 img 不会变成灰色：

.two {
 -webkit-filter: grayscale(0);
 filter: grayscale(0);
}

但是，这是行不通的。容器的过滤器似乎覆盖了所包含元素的过滤器。有什么想法可以解决这个问题吗？有没有简单的方法，或者我是否必须编写一些 jQuery 来查看所有不是“.two”的元素并将过滤器应用于它们，而不是容器？

更新：我忽略了一个重要的警告：容器必须是灰度的，因为它有一个背景图像属性也将变成灰色。这个小片段是更多容器的一部分，这些容器也都变成了灰度，我真的只是想弄清楚是否有办法对父级的规则进行压倒性的豁免，因为父级必须有规则作为好。

我需要帮助来为我的快速而肮脏的黑暗浏览 CSS 过滤器找到解决方法，该过滤器曾经很好地工作，但不再适用于大多数 google 页面，实际上是任何带有 div 的页面（我将其用作用户样式）。我绝不是一个程序员，只是一个患有严重的光致偏头痛的用户，绝对需要黑暗主题的网页来拯救我的眼睛，所以我对 CSS 的了解是可以理解的，抱歉：/这曾经是有效的：

html {filter: invert(100%) hue-rotate(180deg);}
img {filter: invert(100%) hue-rotate(180deg) !important;}
video {filter: invert(100%) hue-rotate(180deg) !important;}

它曾经反转页面上的所有颜色，然后将色调旋转 180 度以保持色调相同，因此结果是一个亮度反转的网页（蓝色仍然是蓝色，橙色仍然是橙色等等，只是更亮的文本和在较暗背景上的口音）。然后我反转了对图像和视频的影响，将它们从最终结果中的过滤器中排除。结果对我来说看起来足够优雅，并且比大多数深色浏览的 chrome 扩展的结果更好。它曾经完美地工作，但最近发生了一些变化，任何带有 div 的页面，包括大多数谷歌页面，都有很大一部分白色背景与过滤器仍然适用的黑色部分交织在一起。我怀疑过滤器在这些部分应用了两次，从而将其恢复为白色。

非常感谢您的帮助。我很确定使用 html 选择器将它应用于整个页面不再是这样做的方法，但我对如何使其工作一无所知，请原谅我的无知并提前致谢。

我注意到hue-rotateCSS 中的滤镜使我的图像变暗。

请参阅https://jsfiddle.net/m4xy3zrn/

请注意，带有滤镜的第二张图像明显比在 Photoshop 中旋转的第三张图像暗。

有办法防止这种情况吗？

再看一遍，这里发生了很多奇怪的事情。黄色似乎几乎全部消失，并且色调彩虹（右上角）中蓝色区域的饱和度大大降低。

我想知道是否可以使用 css/svg 滤镜执行色相/饱和度颜色转换，就像 Photoshop 色相/饱和度的工作方式一样。

本质上，根据我所读到的内容，Photoshop 在内部将所有像素从 RGB 表示转换为 HSL 表示，并根据用户使用定义的值基本上增加色调 (H)、饱和度 (S) 或亮度 (L) 值。滑块，如下图所示：

在这里，我选择了默认范围 ( Master)，这意味着将考虑所有色调值。

使用 CSShue-rotate过滤器，我们可以得到一个近似结果：

由于另一个问题的答案中指出的问题，某些颜色并不完全相同：/sf/answers/1352779221/。（这对我来说没关系，我不需要它像 Photoshop 一样准确。）

因此，本质上，这两种方法的内部程序似乎大致相同。

现在，Photoshop 还允许我定义要考虑调整的颜色范围，如下图所示：

本质上，这个值范围意味着任何值hue超出范围限制的颜色都将被忽略。因此，在我的示例中，颜色 #1、#2 和 #5 保持不变。

我正在尝试使用 CSS os SVG 过滤器做同样的事情，但我找不到方法。我正在阅读滤镜效果文档（https://drafts.fxtf.org/filter-effects/），看看是否有任何东西可以用来定义范围，但我找不到任何东西。

有谁知道是否有办法做我想做的事？也许有 CSS 过滤器的有效替代品吗？

编辑：此片段显示了我得到的内容filter: hue-rotate(45deg)以及我想要获得的结果。

.block-wrapper {
  width: 100%;
  height: 50px;
  display: flex;
  margin-bottom: 10px;
}


.block {
  width: 20%;
  height: 100%;
}


.b1 {
  background-color: rgb(29 85 34);
} …