Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Location
    Brighton, UK
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Color gradient function

    PHP Code:
    function gradient($hexstart$hexend$steps) {

        
    $start['r'] = hexdec(substr($hexstart02));
        
    $start['g'] = hexdec(substr($hexstart22));
        
    $start['b'] = hexdec(substr($hexstart42));

        
    $end['r'] = hexdec(substr($hexend02));
        
    $end['g'] = hexdec(substr($hexend22));
        
    $end['b'] = hexdec(substr($hexend42));
        
        
    $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-...ient-function/

  • #2
    Regular Coder ralph l mayo's Avatar
    Join Date
    Nov 2005
    Posts
    951
    Thanks
    1
    Thanked 31 Times in 29 Posts
    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 :]

    PHP Code:
    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[$offset]), 'b'=>hexdec($hex[2] . $hex[$offset]));
    }

    function 
    validateHex($hex)
    {
        
    $hex preg_replace('/[^a-f0-9]/'''strtolower($hex));
        
        return (
    strlen($hex) == || 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) ? : (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 ) 
    Last edited by ralph l mayo; 02-12-2006 at 07:43 PM.

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Location
    Brighton, UK
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    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 Code:
    <?php
    function Gradient($HexFrom$HexTo$ColorSteps)
    {
            
    $FromRGB['r'] = hexdec(substr($HexFrom02));
            
    $FromRGB['g'] = hexdec(substr($HexFrom22));
            
    $FromRGB['b'] = hexdec(substr($HexFrom42));
            
            
    $ToRGB['r'] = hexdec(substr($HexTo02));
            
    $ToRGB['g'] = hexdec(substr($HexTo22));
            
    $ToRGB['b'] = hexdec(substr($HexTo42));
            
            
    $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
    Last edited by R2-D2; 11-30-2008 at 02:45 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •