如何使用颜色渐变推断颜色的相对百分比值答案

【问题标题】：How to deduce the relative percentage value of a color using a color gradient如何使用颜色渐变推断颜色的相对百分比值
【发布时间】：2018-12-05 11:12:16
【问题描述】：

我需要写一些会采用颜色的东西（通过任何格式、十六进制、rgb 等），并根据在特定颜色渐变上找到该颜色的位置，可以计算出百分比值。

色阶

% HEX R G B 色相饱和度值 0% #FFFFFF 255 255 255 0° 0.0% 100.0% 10% #FFE98E 255 233 142 48° 44.3% 100.0% 25% #FFD072 255 208 114 40° 55.3% 100.0% 50% #FCB119 252 177 25 40° 90.1% 98.8% 75% #FA7E21 250 126 33 26° 86.8% 98.0% 100% #E75800 231 88 0 23° 100.0% 90.6%

（颜色的实际图片可以在this gist找到）

例如，如果颜色最终为 #FFE8BA，那么它将落在 0% 到 10% 之间。

与其说是我寻求帮助的具体代码（我什至还没有决定使用哪种语言，但它可能是 JS 或 Python），更多的是关于如何分析颜色并将其与特定颜色渐变进行比较以返回颜色。

如果有人有任何类似的经验，任何建议都将不胜感激。

谢谢！

【问题讨论】：

#000000 会落在哪里？
我的问题是颜色保留了空间，而颜色渐变可以表示为该空间中的折线或曲线。该空间中的大多数 （几乎每个） 颜色都不会出现在渐变上，那么您想如何分配它呢？示例：您在哪里分配 #FF0000 梯度 [#00FF00, #00FFFF, #0000FF]？
@MoxieBall - 它不会真的掉到任何地方。这意味着采用#FFFFFF 和#E75800 之间的颜色范围内的颜色。对于我使用它的用途，没有办法选择黑色（#000000）

标签： javascript python colors hex rgb

【解决方案1】：

嗯，这比我想象的要容易得多。我能够找到处理困难部分的现有代码或工具。

如果有人想知道我是怎么做到的，首先我生成了从#FFFFFF 到#E75800 的51 种颜色渐变（使用this tool）。将这些存储在一个对象中，键为 0 到 100（表示百分比），每隔一个数字跳过，如下所示：

var colors = {
    0: "FFFFFF",  2: "FEFBF9",  4: "FEF8F4",  6: "FDF4EF",  8: "FDF1EA", 
   10: "FCEEE5", 12: "FCEAE0", 14: "FBE7DB" // Truncated...
}

注意：您不需要跳过每隔一个数字。我这样做是因为我链接到的镜头一次最多只能生成 63 种颜色（是的，我知道我可以多次运行它）

然后从this SO post 借用getSimilarColors 函数，通过将提供的颜色与之前创建的对象中的值进行比较来找到最接近的匹配。最接近匹配的元素的键是百分比。

谢谢。

【讨论】：