Color gradient function

[Jak-S]

function gradient($hexstart, $hexend, $steps) {

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

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

$step['r'] = ($start['r'] - $end['r']) / ($steps - 1);
$step['g'] = ($start['g'] - $end['g']) / ($steps - 1);
$step['b'] = ($start['b'] - $end['b']) / ($steps - 1);

$gradient = array();

for($i = 0; $i <= $steps; $i++) {

$rgb['r'] = floor($start['r'] - ($step['r'] * $i));
$rgb['g'] = floor($start['g'] - ($step['g'] * $i));
$rgb['b'] = floor($start['b'] - ($step['b'] * $i));

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

$gradient[] = implode(NULL, $hex);

}

return $gradient;

}

It hasn’t been thoroughly tested, but it seems to work fine for me. It takes three arguments, the start and end colours (in hex, without a hash) and the number of steps you want in the gradient. It will return an array of all the colours, enjoy!

Original page: http://www.reallyshiny.com/blog/php-colour-gradient-function/

[ralph l mayo]

I wrote an RGB to hex and vice versa thing that might be useful in concert with this. Sorry about the out of hand ternary operator. I think I had just gotten the hang of it at the time I wrote this and everything was looking like a nail for the ternary hammer.

edit: cleaned up the most egregious offense :]


function RGBToHex($rgb)
{
if (($rgb = validateRGB($rgb)) === false)
{
return false;
}

$hexcode = '';
foreach ($rgb as $value)
{
$hexcode .= (strlen(dechex($value)) == 1) ? '0' . dechex($value) : dechex($value);
}
return $hexcode;
}

function hexToRGB($hex)
{
if (($hex = validateHex($hex)) === false)
{
return false;
}
$offset = (strlen($hex)/3) - 1; // 0 for 3 length and 1 for 6
return array('r'=>hexdec($hex[0] . $hex[$offset]), 'g'=>hexdec($hex[1] . $hex[1 + $offset]), 'b'=>hexdec($hex[2] . $hex[2 + $offset]));
}

function validateHex($hex)
{
$hex = preg_replace('/[^a-f0-9]/', '', strtolower($hex));

return (strlen($hex) == 3 || strlen($hex) == 6) ? $hex : false;
}

function validateRGB($rgb)
{
if (!is_array($rgb) || count($rgb) != 3)
{
return false;
}

foreach (array('r', 'g', 'b') as $col)
{
if (!isset($rgb[$col]) || !is_numeric($rgb[$col]))
{
return false;
}
$rgb[$col] = ($rgb[$col] > 255) ? 255 : ($rgb[$col] < 0) ? 0 : (int) $rgb[$col];
}
return $rgb;
}

// example usages:
$col = RGBtoHex(array('r'=>255, 'g'=>0, 'b'=>200)); // ff00c8
$col2 = RGBtoHex(array('r'=>'nonumeric', 'g'=>0, 'b'=>200)); // (false)
$rgb = hexToRGB($col); // Array ( [r] => 255 [g] => 0 [b] => 200 )
$rgb2 = hexToRGB('3f3'); // CSS style abbreviated 3 char hex: Array ( [r] => 51 [g] => 255 [b] => 51 )
$rgb3 = hexToRGB('ffffgg'); // (false)
$rgb4 = hexToRGB('#fff'); // Array ( [r] => 255 [g] => 255 [b] => 255 )

[Jak-S]

Cool, looks usefull. This function is actually part of a larger class im working on at the moment. The class will be a collection of usefull color related tools, gradients, invert colours etc. The class allready has rgb to hex and hex to rgb functions, but the validate functions are a really good idea as well, nice one.

[R2-D2]

Hello, i'v just used this gradient on my website, but it was generating some wired colors, wich are not valid CSS.
I got some extra div with color like ffffffffcd101

So how do i fixed?
After looking at http://br2.php.net/hexdec
I decided to take away that -1 from $ColorSteps or $steps, and works fine.


<?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);
$StepRGB['g'] = ($FromRGB['g'] - $ToRGB['g']) / ($ColorSteps);
$StepRGB['b'] = ($FromRGB['b'] - $ToRGB['b']) / ($ColorSteps);

$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);
}

return $GradientColors;
}

$Gradients = Gradient("000000", "FFFFFF", 60 );
foreach($Gradients as $Gradient)
{
echo "<div style=\"background-color: #".$Gradient."; width: 100%; line-height: 0px; height: 1px;\"><!-- --></div>";
}

?>


That empty comment is to generatre trully 1px div on IE6. 100% W3C xHTML Valid and CSS 2.1 valid too :)

Thanks a lot :thumbsup: