Я хочу отображать цвет между красным, желтым, зеленым цветом в зависимости от числа от 1 до 100.
1 – зеленый, а 100 – красный, 50 – желтый. Я хочу в основном создать градиент между этим.
До сих пор я пытался:
$r = floor(255 * ($number / 100)); $g = 255 - $r; И он это делает, но дает мне коричневые и темные цвета, и вообще не желтый.
Это потому, что вы не должны менять оба канала одновременно, но поднимать 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;
Я обнаружил, что работа с цветовой моделью HSV проще, чем модель RGB . Это поможет вам легко выбрать цвет, с которым вы хотите работать; с RGB вам нужно понять, как различные значения R, G и B будут сочетаться, чтобы дать вам цвет, который вы хотите / не хотите.
Кроме того, этот вопрос SO может быть полезен: как я могу циклически перебирать шестнадцатеричные цветовые коды в PHP?
Я не знаю математической модели для «цветовой кривой», которая проходит через определенные значения цвета RGB (например, то, что вы называете зеленым / желтым / красным), что позволит вам рассчитать любой промежуточный цвет на этой кривой. Во всяком случае, модель функции (которая есть то, что было бы), настолько же хороша, как точки данных, которые она должна соответствовать, поэтому вам нужно быть более конкретным, чем зеленый / желтый / красный, чтобы получить достойные результаты даже если кто-то указывает на математику.
Помните, что здесь нас не интересует математическая интерполяция, а скорее «интерполяция цветового пространства» (термин, который я только что составил), другими словами, что бы выглядело как «естественная» интерполяция для человека .
Более легкое решение для тех из нас, у кого нет необходимого знания теории цвета, и которое я предлагаю, состоит в том, чтобы предварительно выбрать несколько цветов с помощью инструмента выбора цвета, разделите диапазон 0-100 на столько групп, сколько цвета, которые вы выбрали, и используйте простое целочисленное деление для перехода от 0-100 к цветовой полосе.
Пища для размышлений: Действительно, как SO определяет цвет подсчета очков для комментариев?
Обновление: я просто спросил выше, на мета. Посмотрим…
После небольшого поиска ни одно из решений не выглядело приятным. Как указано выше, 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; }