Как вывести относительное процентное значение цвета, используя градиент цвета - PullRequest
Новая
       68

Как вывести относительное процентное значение цвета, используя градиент цвета

0 голосов
/ 26 июня 2018

Мне нужно написать что-нибудь, что будет принимать цвет (через любой формат, hex, rgb и т. Д.), И в зависимости от того, где этот цвет будет найден для определенного цветового градиента, можно рассчитать процентное значение.

Цветовая шкала 

   %  HEX       R   G   B     HUE   SATURATION  VALUE
  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), это больше о специфике анализа того, как цвет и сравнить его с конкретным градиентом цвета, чтобы вернуть цвет.

Если у кого-то есть опыт, чтобы сделать что-то подобное, любой совет будет оценен.

Спасибо!

1 Ответ

0 голосов
/ 26 июня 2018

Ну, это было намного проще, чем я думал. Мне удалось найти существующий код или инструменты, которые позаботились о сложных деталях.

Если кто-то захочет узнать, как я это сделал, сначала я сгенерировал градиент цвета из 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 цветов одновременно (да, я знаю, что мог бы просто запустить его несколько раз)

Затем, заимствуя функцию getSimilarColors из этого поста SO , найдите наиболее близкое совпадение, сравнив предоставленный цвет со значениями внутри объекта, созданного ранее. Ключевым элементом наиболее близкого совпадения будет процент.

Спасибо.

...