Цветовое кодирование на основе числа

Question

Я хочу отобразить цвет между красным, желтым, зеленым в зависимости от числа от 1 до 100.

1 - зеленый, 100 - красный, 50 - желтый. Я хочу создать градиент между ними.

Пока что пробовал:

$r = floor(255 * ($number / 100));
$g = 255 - $r;

И в некоторой степени это делает, но дает мне коричневатые и темные цвета, и вообще никакого желтого.

Answer 1

Это потому, что вы не должны менять оба канала одновременно, а должны увеличивать R в первой половине и уменьшать G во второй.

Попробуйте использовать такую ​​функцию:

function GreenYellowRed($number) {
  $number--; // working with 0-99 will be easier

  if ($number < 50) {
    // green to yellow
    $r = floor(255 * ($number / 50));
    $g = 255;

  } else {
    // yellow to red
    $r = 255;
    $g = floor(255 * ((50-$number%50) / 50));
  }
  $b = 0;

  return "$r,$g,$b";
}

Дляпроверить это:

$output = "";
for ($i = 1; $i <= 100; $i++) {
  $rgb = GreenYellowRed($i);
  $output .= "<div style='background-color: rgb($rgb)'>$rgb</div>";
}
echo $output;

Answer 2

Я не знаю математической модели для «цветовой кривой», которая проходит через определенные значения цвета RGB (например, то, что вы описываете как зеленый / желтый / красный), которая позволила бы вам рассчитать любой промежуточный цвет в этой кривой,В любом случае, модель функции (которая именно такая и была бы) хороша только для точек данных, в которых она нуждается, поэтому вам нужно быть гораздо более конкретным, чем зеленый / желтый / красный, чтобы получить приличные результатыдаже если кто-то указывает на математику.

Помните, что нас здесь не интересует математическая интерполяция, а скорее "интерполяция цветового пространства" (термин, который я только что составил) -- другими словами, что выглядело бы как "естественная" интерполяция для человека .

Более простое решение для тех из нас, у кого нет необходимых знаний по теории цвета и которые я бы посоветовал, - это предварительно выбрать количество цветов с помощью инструмента выбора цвета, разделив 0-100.разбейте на столько полос, сколько цветов вы выбрали, и используйте простое целочисленное деление для проецирования от 0 до 100 на цветную полосу.

Пища для размышления: Действительно, как SO определяетЦвет подсчета голосов для комментариев?

Обновление: Я просто спросил выше по мета.Посмотрим ...

Answer 3

Я обнаружил, что работать с цветовой моделью HSV проще, чем RGB модель .Это поможет вам легко выбрать цвет, с которым вы хотите работать;с RGB вам нужно понять, как различные значения R, G и B будут комбинироваться, чтобы дать вам цвет, который вы хотите / не хотите.

Также этот вопрос SO может быть полезен: Как мне прокрутить шестнадцатеричные цветовые коды в PHP?

Answer 4

После небольшого взгляда ни одно из решений не выглядело приятным. Как указывалось выше, HSV, вероятно, является подходящим вариантом, поскольку современные браузеры могут отображать цвета с ним просто отлично.

Чтобы получить представление о цветах, с которыми вы работаете, проверьте цветовое колесо:

http://www.colorspire.com/rgb-color-wheel/

Я хочу начать с синего, поэтому для нормализации я использую 255.

function temp_color($temp){

    $start = 40;
    $end = 85;

    $normal = round(255-((($temp - $start)/($end-$start))*255));

    $color = "hsl($normal, 100%, 30%);";
    $span = "<span style=\"color: $color\">$temp</span>";

    return $span;
}