Определение правила: связать целочисленное значение с цветом #RGB

Я хотел бы определить цвет фона C в зависимости от целого числа X (количество положительных голосов)

Хорошо, я мог сделать

if(x==0) c = '#000';
else if(x > 0 && x < 5 ) c = '#001'
else if(X<=5 <= 20) c = '#002';
//and so on...

Но как я могу сделать это, чтобы сделать это постепенно? Я имею в виду от 0 до 500 голосов -> 500 тонов синего цвета? (если я не ошибаюсь, его возможные две цифры для HEX (если нет, 15*15 xD))

Есть идеи?

Источник

3 ответа

Решение

Так как вы просто ищете идеи, вот тот, который никто не предложит. Для начала поищите формулы "Сплайна Катмулла-Рома". Это сводится к очень простому трюку умножения матриц, который дает вам формулу для вычисления кривых с учетом набора контрольных точек.

Итак, теперь, когда вы знаете все о сплайнах Катмулла-Рома, вы можете написать некоторый код для построения кривой в трехмерном пространстве. Ну, что такое RGB, если не трехмерное пространство? Таким образом, вы выбираете несколько хороших контрольных точек цвета (цвета RGB), а затем используете удобную реализацию Catmull-Rom, чтобы сгенерировать параметрическую кривую для всех этих цветов с таким количеством цветов вдоль кривой, как вы хотите.

Крутая вещь в цветовых прогрессиях будет то, что они действительно "гладкие" при переходах.

Источник

Включите Raphaeljs на своей странице и вставьте функции estimateColorForValue() а также toHex() где-то в вашем коде. estimateColorForValue(hue, value, darkestValue, brightestValue) вычисляет цвет для некоторого значения, интерполируя цвет, видя, где в диапазоне [darkestValue-brightestValue]value является. hue находится в диапазоне [0-1]: 0.1 для оранжево-коричневого цвета, 0.4 для зеленого, 0.8 для розоватых и многих других цветов между ними. Небольшие изменения оттенка резко меняют визуальный цвет.

Например: estimateColorForValue(.1, 15, 1, 20), может быть объяснено как, для данных в диапазоне от 1 до 20, вычислить цвет для значения 15 в оранжевом пространстве.

toHex(estimateColorForValue(.1, 15, 1, 20)) ==> "#cf8415"

Код:

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>

<script>

function toHex(hsb) {
  return Raphael.hsb2rgb(hsb.h, hsb.s, hsb.b).hex;
}

function estimateColorForValue(hue, value, darkestValue, brightestValue) {
  // Constants to determine saturation and brightness
  var darkBrightness = 0.6;
  var brightBrightness = 1;
  var darkSaturation = 0.3;
  var brightSaturation = 1;

  // Compute saturation and brightness:
  var gradient = (value - darkestValue) / (brightestValue - darkestValue);
  var saturation = darkSaturation + gradient * (brightSaturation - darkSaturation);
  var brightness = darkBrightness + gradient * (brightBrightness - darkBrightness);

  return {h: hue, s:saturation, b:brightness};
}
</script>
Источник

Я бы, вероятно, использовал что-то вроде:

var blueness = x / 2;
if (blueness > 255) blueness = 255;
rgb(0, 0, blueness);

но вы можете использовать эту реализацию sprintf и использовать ее так же, как и на любом другом языке, для преобразования в hex.

Источник
Другие вопросы по тегам