时间戳

首页 > 解决方案 > 如何使用颜色渐变推断颜色的相对百分比值

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

问题描述

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

色标

   % HEX RGB 色相饱和度值
  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%

（可以在此要点中找到颜色的实际图像）

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

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

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

谢谢！

标签： javascriptpythoncolorshexrgb

解决方案

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

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

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

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

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

谢谢。

推荐阅读