Tutorials and Code

ActionScript (5)
ASP (7)
ASP.NET (28)
Assembly (1)
C (6)
C# (132)
C++ (33)
CSS (6)
General (4)
HTML (6)
Java (28)
JavaScript (38)
MySQL (2)
Objective C (1)
Pascal (1)
PHP (61)
Python (3)
Ruby (18)
Silverlight (1)
SQL (8)
VB.NET (5)
Visual Basic (3)

Syndication

My Account

Community Forums

Webmaster Tools

Tech Jobs

Geekpedia » PHP Code » Generate Gradient Within Hex Range In PHP

Generate Gradient Within Hex Range In PHP

A function that generates an array of hex colors that forms a gradient, starting from a hex color and ending with another hex color. The number of gradient steps can also be defined.

On Monday, September 29th 2008 at 03:12 AM

By Andrew Pociu (View Profile)

(Rated 5 with 1 votes)

Contextual Ads

More PHP Resources

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);
        }
        return $GradientColors;
}
 
$Gradients = Gradient("FF5B5B", "FFCA5B", 32);
foreach($Gradients as $Gradient)
{
        echo "<div style=\"background-color: #".$Gradient."; width: 100px; height: 25px;\"></div>";
}

Digg It!

Del.icio.us Reddit

StumbleIt

Newsvine

Furl

BlinkList

Rate this code snippet

Current Comments

by R2 on Monday, November 24th 2008 at 09:17 PM

This works perfect! Thanks a lot dude. it produces a valid html :)

by Sicle on Tuesday, July 14th 2009 at 06:31 PM

Hi,

I tryed this code but it didn't work quite well for me.

I tryed a couple of things but the height of every color would always be 25px.

So I deleted the div tag and replaced it with a table:

Replace:
#
foreach($Gradients as $Gradient)
#
{
#
echo "<div style=\"background-color: #".$Gradient."; width: 100px; height: 25px;\"></div>";
#
}

With:
echo '<table style="border-collapse:collapse;">';

foreach($Gradients as $Gradient)

{

echo "<tr><td style=\"background-color: #".$Gradient."; width: 100px; height: 1px; margin: 0px 0px;\"></td></tr>";

}

echo '</table>';

now the height of every gradient color can be et in the td tag, make sure the table tag has 'border-collapse:collapse;' in its style

by Will on Tuesday, April 27th 2010 at 02:12 AM

Cool beans!
minor bug:

- for($i = 0; $i <= $ColorSteps; $i )
for($i = 0; $i < $ColorSteps; $i )

the equals adds an extra value to the end that is beyond the value $HexTo.