将十六进制或 rgb 颜色转换为 fecolormatrix 值答案

【问题标题】：Convert a hex or rgb color to fecolormatrix values将十六进制或 rgb 颜色转换为 fecolormatrix 值
【发布时间】：2013-10-08 03:06:18
【问题描述】：

我对 SVG 几乎一无所知，但我的网站上运行了一个脚本，该脚本通过应用 svg 滤色器然后在悬停时将其移除，在彩色和 B+W 之间切换图像。颜色的色调似乎是使用下面显示的值矩阵设置的......

 <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>

我的问题是我想更改滤镜的颜色，使其具有非常轻微的棕褐色调，而不是目前的纯黑白。我不敢相信没有人创建过 RGB 或十六进制颜色转换器，但谷歌似乎没有打开一个 - 也许我正在寻找错误的东西？我该怎么做呢？我曾经听说它是在插画家中完成的，但我不使用插画家。是否有在线转换器或可以在 Photoshop 中完成？

【问题讨论】：

取十六进制值，转换为 RGB，然后除以 255。简单示例 #FA0000（红色）是 250/255 是 0.98039215686 所以四舍五入到 2 dec 是 0.98

标签： css svg svg-filters

【解决方案1】：

我认为你误解了 feColorMatrix 的功能。您不会从颜色矩阵中获得单一的输出颜色，输出取决于 R 、 G 和 B 颜色的组合。

Read the web platform docs on feColorMatrix.

您可以使用我构建的this color matrix demo 来使用棕褐色设置。

【讨论】：

感谢您的回复，但棕褐色滤镜本身不只是一个“统一”的颜色块，而不是我的意思的详细图像吗？我知道它是 RGB 值的混合，那么为什么没有一种简单的方法可以将 RGB 颜色转换为矩阵值集呢？
在一般情况下，这是因为，给定一个已知的输入向量（您的输入 RGB 颜色）和一个已知的输出向量（您的输出 RGB 颜色），有无限数量的矩阵可以转换一个对另一个。您必须提供至少 2 个（也许是 3 个，我的线性代数生锈了）输入/输出对才能获得单一解决方案。棕褐色过滤器 - 只要它们只是有色灰度 - 更容易。如果您知道要将 RGB(127,127,127) 转换为什么颜色 - 您可以使用一些线性代数轻松得出正确的颜色矩阵值。

【解决方案2】：

有一个 webkit-filter，确切地说，是 sepia。它有一个参数来指定（棕褐色过滤的）量，相当于：

<filter id="sepia">
  <feColorMatrix type="matrix"
    values="(0.393 + 0.607 * [1 - amount]) (0.769 - 0.769 * [1 - amount]) (0.189 - 0.189 * [1 - amount]) 0 0
            (0.349 - 0.349 * [1 - amount]) (0.686 + 0.314 * [1 - amount]) (0.168 - 0.168 * [1 - amount]) 0 0
            (0.272 - 0.272 * [1 - amount]) (0.534 - 0.534 * [1 - amount]) (0.131 + 0.869 * [1 - amount]) 0 0
             0 0 0 1 0"/>
</filter>

信息取自here

【讨论】：

感谢您的回复，我的问题是我发现棕褐色滤镜的确切色调对我来说太过分了 - 我需要一个棕褐色，在他的混合中稍微多一点红色和稍微少一点黄色所以我想知道如何将 rgb 颜色转换为矩阵值集。