HTML код цвета с PHP

Question

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

Мне нужен способ в PHP / html, чтобы создать список от 1 до 100 цветов (шестнадцатеричные коды).Ноль - красный, а 100 - зеленый, и каждый промежуточный - это тень, которая плавно течет между ними.(например, от красного к оранжевому, от желтого до зеленого).

Допустим, я могу бросить в него число, например, число 50, и оно возвращает шестнадцатеричный код из списка (50 будет желтым).

Является ли единственный способ вручную назначить каждый цвет в массиве?Или есть какой-то более простой способ?

Спасибо.

Answer 1

Самый простой и универсальный способ сделать это - две функции: одна для создания шестнадцатеричного значения HTML из массивов RGB, а другая для затухания массивов RGB ...

// Creates an HTML HEX color from an array of color integers array(r,g,b)...
function rgb($rgb) {
    $ret = '';
    foreach ($rgb as $x) {
        // Make sure the RGB values are 0-255...
        $x = max(0, min(255, $x));
        // create a 2 digit hex value for this color component...
        $ret .= ($x < 16 ? '0'.dechex($x) : dechex($x));
    }
    return '#'.$ret;
}

// Returns a fade of $from into $to by $amount ($from and $to are RGB arrays)...
function fade($from, $to, $amount) {
    $rgb = array();
    // Go through the RGB values and adjust the values by $amount...
    for ($i = 0; $i <= 2; $i++) {
        $rgb[$i] = (($to[$i] - $from[$i]) * $amount) + $from[$i];
    }
    return $rgb;
}

Тогда вы можете исчезнутьлюбой цвет к любому другому цвету на любую величину, как этот пример, который исчезает с красного на зеленый с 100 шагами ...

for ($fadeAmount = 0; $fadeAmount < 1; $fadeAmount += 0.01) {
    $color = rgb(fade(array(255,0,0), array(0,255,0), $fadeAmount));
    echo "<div style='color:$color'>$fadeAmount</div>";
}

Answer 2

Я не знаю много о php, но вы можете решить это без массивов, используя простую математику. допустим, x - это число от 0 до 100. Каждый цвет в нашем RGB должен быть между 0 и 0xFF (256 возможных значений), поэтому мы должны посмотреть на x / 100 и округлить его до дроби со знаменателем 256.

Другими словами, фракция: раунд ((х / 100) * 256) / 256

Это количество зеленого цвета (00FF00). Количество красного (FF0000) очевидно:

1 - раунд ((х / 100) * 256) / 256

Вместе мы получаем значение:

0xFF0000 + раунд ((x / 100) * 256) / 256 * (0x00FF00 - 0xFF0000)

и если x является целым числом и мы хотим избежать округления с целочисленным делением, мы должны оценить умножения перед делением:

0xFF0000 + (раунд ((x * 256) / 100) * (0x00FF00 - 0xFF0000)) / 256

и это самая круглая оценка.

Answer 3

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

Требуется линейный интерполятор между двумя кодами RGB, и вы должны иметь 1 карту для чистого красного и 100 для чистого зеленого. Может быть что-то вроде:

function interpolateRGB($from, $to, $at)
{
  $col = array(0.0, 0.0, 0.0);
  for ($i=0;$i<3;++$i)
    $col[$i] = $from[$i]*(1.0-$at) + $to[i]*$at;
  return $col;
}

function convertToHexCol($col)
{
  $ret = '#';
  foreach ($col as $comp)
    $ret .= dechex(max(255,round(255.0*$comp)));
  return $ret;
}

function getColor($index)
{
  $at = (float)($index-1)/99.0;
  $from = array(1.0, 0.0, 0.0); // red
  $to = array(0.0, 1.0, 0.0);  // green
  $color = interpolateRGB($from, $to, $at);
  return convertToHexCol($col);
}

Answer 4

Да, есть более простой способ.Его можно рассчитать напрямую путем нормализации по диапазону значений от 0 до 255. Поскольку вы можете выбрать число от 0 до 100, вы можете масштабировать его до диапазона от 0 до 255, используя формулу (n * 255) / 100.Сделав это, вы определяете подходящие значения для красного, зеленого, синего, конвертируете в гекс и объединяете результат в окончательный шестнадцатеричный цвет:

1. Введите от 0 до 100 от пользователя в n.
2. Рассчитать нормализованное значение norm = (n * 255) / 100.
3. Установить red на 255 - norm, поскольку оно уменьшается с n.
4. Установить green на norm, поскольку увеличивается с n.
5. . Установите blue в 0.
6. . Преобразуйте red, green, blue в шестнадцатеричное и объедините в одну строку.

Вот пример реализации в JavaScript, который показывает вывод шестнадцатеричного цвета, а также окрашивает текст в этот цвет для демонстрации: http://jsfiddle.net/zEB4J/

Образцы изображений:

Вот демонстрация создания градиента: http://jsfiddle.net/XMTcb/

Answer 5

попробуй:

function rgb($val){
  if($val<0 || $val>100)return;//error!

  $r=(100-$val)*255/50;
  if((100-$val)>50)$r=255;
  $rr=dechex($r);
  if($r<16)$rr='0'.$rr;

  $g=($val)*255/50;
  if((100-$val)<50)$g=255;
  $gg=dechex($g);
  if($g<16)$gg='0'.$gg;

  $bb='00';

  return $rr.$gg.$bb;

}

Вот выходные значения от 0 до 100 с точностью до 10:

ff0000
ff3300
ff6600
ff9900
ffcc00
ffff00
ccff00
99ff00
66ff00
33ff00
00ff00