为图标/精灵着色的最佳自然方式答案

【问题标题】：Best natural way of coloring an icon/sprite为图标/精灵着色的最佳自然方式
【发布时间】：2013-10-19 08:03:31
【问题描述】：

我想用透明背景和阴影为精灵/图标着色。我尝试将色调转移到所有像素，但它看起来不太自然，并且图像中的黑色和白色存在问题。如果图像趋于黑色，则色调不会将黑色变为红色或其他颜色，即使是 360 度也不会改变。试图使颜色上瘾和减少颜色，即使在这种情况下，黑色和白色也往往会被着色或完全消失。

也许我应该在图标上放一张图片来达到着色效果？关于如何进行的任何建议。我输了。

【问题讨论】：

显然色相变化不会影响黑白。（顺便说一句，360 度偏移是 same 色调）。我会打开一些图像编辑软件（例如 GIMP），看看你需要用“着色”做什么......从 100% 黑色图像开始，你显然需要增加亮度，也许是饱和度，然后选择色调。
增加亮度和饱和度并不能解决图像主色为黑色或白色时的问题。

标签： algorithm graphics colors

【解决方案1】：

你一直在问很多关于这个色相变化的问题，所以我想我会试着举一个例子：http://jsfiddle.net/EMujN/3/

这是另一个使用实际图标的：http://jsfiddle.net/EMujN/4/

里面有很多东西。除非您想replace it，否则您可以忽略一个巨大的数据 URL。这是我们修改 HSL 的相关部分。

    //SHIFT H HERE
    var hMod = .3;
    hsl[0]=(hsl[0]+hMod)%1;

    //MODIFY S HERE
    var sMod = .6;
    hsl[1]=Math.max(0,Math.min(1,
        hsl[1]+sMod
    ));

    //MODIFY L HERE
    var lMod = 0;
    hsl[2]=Math.max(0,Math.min(1,
        hsl[2]+lMod
    ));

我已转换为 HSL，因为它比 RGB 更容易在该颜色空间中完成您想要的。

无需变得更复杂，您可以调整三个变量：向色相、饱和度或亮度添加多少。我将亮度变量设置为 0，因为再高一些，您会看到一些令人讨厌的 JPEG 伪影（如果您能找到一个像样的 .png 会更好，但我选择了我能找到的第一张 CC 夜间图像）。

我认为色调变化（从黄色到绿色）看起来相当不错，而且我已经将饱和度最大化，所以即使是正常的白光也会呈现出明亮的紫色。就像我在评论中所说的那样，如果你想给黑白片上色，你需要增加亮度和饱和度。希望您能从这个示例中弄清楚您需要什么。

使用的图片：http://commons.wikimedia.org/wiki/File:Amman_(Jordan)_at_night.jpg

【讨论】：

基本上方法很清楚，但我不是在考虑 photis，而是在考虑图标精灵。黑色还不是最差的。问题是我想要一个通用算法来自动调节 hsv，这样它看起来很自然，并且应该独立于输入。另一个输入是主要颜色。
我在我的回答中发布了一个图标示例。 “一种自动调节hsv的通用算法，使其看起来很自然”你说得很含糊。我认为您还没有弄清楚您的实际问题是什么……我以为您对色相变化感到困惑。一些你认为不“自然”的颜色示例，更多细节会有所帮助。 “黑色还不是最差的。” ....你说的第一件事是你遇到了黑色问题。
是的，这是相关的。我想为主要颜色可能是黑色或 rgb 中的任何其他颜色的图像着色。你告诉我我也应该调节亮度和饱和度，但我希望 cpu 为我做这件事

【解决方案2】：

我自己找到了一个更好的解决方案，可以解决黑白问题。

所以基本上解决方案可以分多个步骤解决。在这里，我将定义步骤。稍后我会提供一些工作代码：

获取图像

计算主要颜色，平均图像像素或简单地提供一个输入 RGB 值，这是您的眼睛可以捕捉到的主要颜色。

如果主要倾向于黑色或白色，或两者兼而有之，则必须使用上瘾或减色方法重新着色图像，如果黑色上瘾，如果白色则减色。所以基本上所有的 RGB 像素都应该被衰减或锐化直到 RED。我认为最好的解决方案应该是 RED，因为 RED 在 HUE 比例中是第一位的，这在我们对像素进行色相偏移时会有所帮助。

为了有一个独特的算法可以处理不同类型的图像，不仅是黑色为主或白色，理想情况下，非黑色和非白色为主的图像的输入应该手动预色相，使用 Photoshop 或以某种方式使用另一种算法新的主色结果也是红色

在那之后，色相变化的颜色是直截了当的。我们知道所有图像的主要颜色都是红色，我们将使用所需颜色的 HSV 值和主要颜色 (RED) 的 HSV 之间的差异来移动 HUE 值。

游戏结束。我们有一种非常通用的方法，可以通过自然的色调变化为不同的图像着色。

另一个问题可能是如何自动预移位主要颜色不是黑色或白色的输入图像。但这是另一个问题。

为什么这种着色方法可以被认为是自然的。简单地考虑一件事。通常，非主要的黑色或白色是阴影和光线的一部分，为图像提供 3D 感觉。另一方面，如果我的鞋子是 100% 黑色的，并且我会给它们染色一些颜色，它们就不再是黑色的了。简单地改变 HSV 参数不能实现以黑色为主的颜色，但应执行其他步骤。步骤如上。

【讨论】：