生成平滑的十六进制梯度表答案

【问题标题】：generate smooth hex gradient table生成平滑的十六进制梯度表
【发布时间】：2011-05-19 13:21:56
【问题描述】：

生成十六进制颜色列表？

你好，

目前我正在尝试生成一个包含 50 种十六进制颜色的列表，这些颜色可以创建一个从白色到黑色的大致平滑渐变，所有颜色介于两者之间。

我将如何在 php 中执行此操作？

【问题讨论】：

线性从黑到白的渐变只能包含灰度颜色。
stackoverflow.com/questions/1211705/paint-me-a-rainbow

标签： php loops hex

【解决方案1】：

function rgb2hex($rgb) {
$hex = "#";
$hex .= str_pad(dechex($rgb[0]), 2, "0", STR_PAD_LEFT);
$hex .= str_pad(dechex($rgb[1]), 2, "0", STR_PAD_LEFT);
$hex .= str_pad(dechex($rgb[2]), 2, "0", STR_PAD_LEFT);

return $hex; // returns the hex value including the number sign (#)
}

function dif($c1, $c2, $percent) {
$array=array();
for($x=0;$x<3;$x++) {
$d=($c2[$x]-$c1[$x])*$percent+$c1[$x];
$array[]=(int)$d;
}
return $array;
}

for($x=0;$x<=255;$x++) {
echo rgb2hex( dif(array(255,255,255), array(0,0,0), $x/255 /*percent*/) );
echo "<br>";
}

【讨论】：

【解决方案2】：

查看我的回答 here 也可能会有所帮助。它具有将任何给定范围（例如 [0,20]）中的任何数字转换为特定颜色的代码，其中 0 是红色，10 是黄色，20 是绿色。您可以使用任何颜色，甚至可以使用 4 种颜色的组合，所以它是红 - 黄 - 绿 - 蓝。

【讨论】：

【解决方案3】：

这里是函数的一些定制，它也处理了只需要1或2个刻度的情况，并且在calculs之前删除了hexa上的#，并返回一个以#开头的颜色数组。以便可以直接应用于内容。

 public function gradient($from_color, $to_color, $graduations = 10) {
        $graduations--;
        $startcol = str_replace("#", "", $from_color);
        $endcol = str_replace("#", "", $to_color);
        $RedOrigin = hexdec(substr($startcol, 0, 2));
        $GrnOrigin = hexdec(substr($startcol, 2, 2));
        $BluOrigin = hexdec(substr($startcol, 4, 2));
        if ($graduations >= 2) { // for at least 3 colors
            $GradientSizeRed = (hexdec(substr($endcol, 0, 2)) - $RedOrigin) / $graduations; //Graduation Size Red
            $GradientSizeGrn = (hexdec(substr($endcol, 2, 2)) - $GrnOrigin) / $graduations;
            $GradientSizeBlu = (hexdec(substr($endcol, 4, 2)) - $BluOrigin) / $graduations;
            for ($i = 0; $i <= $graduations; $i++) {
                $RetVal[$i] = strtoupper("#" . str_pad(dechex($RedOrigin + ($GradientSizeRed * $i)), 2, '0', STR_PAD_LEFT) .
                        str_pad(dechex($GrnOrigin + ($GradientSizeGrn * $i)), 2, '0', STR_PAD_LEFT) .
                        str_pad(dechex($BluOrigin + ($GradientSizeBlu * $i)), 2, '0', STR_PAD_LEFT));
            }
        } elseif ($graduations == 1) { // exactlly 2 colors
            $RetVal[] = $from_color;
            $RetVal[] = $to_color;
        } else { // one color
            $RetVal[] = $from_color;
        }
        return $RetVal;
    }

【讨论】：

【解决方案4】：

嗯，

虽然颜色可能会更好，

这是我的工作。

<?php

function Gradient($HexFrom, $HexTo, $ColorSteps) {
  $FromRGB['r'] = hexdec(substr($HexFrom, 0, 2));
  $FromRGB['g'] = hexdec(substr($HexFrom, 2, 2));
  $FromRGB['b'] = hexdec(substr($HexFrom, 4, 2));

  $ToRGB['r'] = hexdec(substr($HexTo, 0, 2));
  $ToRGB['g'] = hexdec(substr($HexTo, 2, 2));
  $ToRGB['b'] = hexdec(substr($HexTo, 4, 2));

  $StepRGB['r'] = ($FromRGB['r'] - $ToRGB['r']) / ($ColorSteps - 1);
  $StepRGB['g'] = ($FromRGB['g'] - $ToRGB['g']) / ($ColorSteps - 1);
  $StepRGB['b'] = ($FromRGB['b'] - $ToRGB['b']) / ($ColorSteps - 1);

  $GradientColors = array();

  for($i = 0; $i <= $ColorSteps; $i++) {
    $RGB['r'] = floor($FromRGB['r'] - ($StepRGB['r'] * $i));
    $RGB['g'] = floor($FromRGB['g'] - ($StepRGB['g'] * $i));
    $RGB['b'] = floor($FromRGB['b'] - ($StepRGB['b'] * $i));

    $HexRGB['r'] = sprintf('%02x', ($RGB['r']));
    $HexRGB['g'] = sprintf('%02x', ($RGB['g']));
    $HexRGB['b'] = sprintf('%02x', ($RGB['b']));

    $GradientColors[] = implode(NULL, $HexRGB);
  }
  $GradientColors = array_filter($GradientColors, "len");
  return $GradientColors;
}

function len($val){
  return (strlen($val) == 6 ? true : false );
}

$count = 0;
$steps = 9;
$Gradients = Gradient("FFFFFF", "FF0000", $steps);
foreach($Gradients as $Gradient)
    echo '<div style="background-color: #' . strtoupper($Gradient) . '">' . htmlentities('<option value="' . strtoupper($Gradient) . '">' . strtoupper($Gradient) . '</option>') . '</div>';
$count += count($Gradients);

$Gradients = Gradient("df1f00", "00FF00", $steps);
foreach($Gradients as $Gradient)
    echo '<div style="background-color: #' . strtoupper($Gradient) . '">' . htmlentities('<option value="' . strtoupper($Gradient) . '">' . strtoupper($Gradient) . '</option>') . '</div>';
$count += count($Gradients);

$Gradients = Gradient("00df1f", "0000FF", $steps);
foreach($Gradients as $Gradient)
    echo '<div style="background-color: #' . strtoupper($Gradient) . '">' . htmlentities('<option value="' . strtoupper($Gradient) . '">' . strtoupper($Gradient) . '</option>') . '</div>';
$count += count($Gradients);

$Gradients = Gradient("0000df", "000000", $steps);
foreach($Gradients as $Gradient)
    echo '<div style="background-color: #' . $Gradient . '">' . htmlentities('<option value="' . $Gradient . '">' . $Gradient . '</option>') . '</div>';
$count += count($Gradients);

echo 'count: ' . $count;

【讨论】：

【解决方案5】：

中间有所有颜色

您可以找到一条从白色到黑色的路径，但您将很难包含所有颜色 - 颜色空间是 3 维的，而不是线性的。

你可以看看这个以获得一些想法： http://www.exorithm.com/algorithm/view/create_gradient

【讨论】：