How to Produce first-pair RGB, Hex Color value from a percent value

[dlite922]

I spent a couple hours on this and wanted to save someone else a few hours.

This function takes a percentage value and calculates the RGB color. This is useful for a graph or table in which you want the background or some other indicator to change based on the value.

The problem I spent most of my time on was the loss of yellow.

The code is documented and should be easy to understand. Post any questions or modifications to this post.

License: GPL Public

/**
* Example of use of percent2Color function
* @author Dan M 
* @date 06/24/2010
* 
* 
*/


/**
* This function takes a value and returns an RGB color between Red to Yellow to Green in a given spectrum. 
* 50% = FFFF00 
* 
* @param mixed $value required
* @param mixed $brightness value between 1 and 255
* @param mixed $max default 100
* @param mixed $min default 0
* @param mixed $thirdColorHex '00'
*/
function percent2Color($value,$brightness = 255, $max = 100,$min = 0, $thirdColorHex = '00')
{       
    // Calculate first and second color (Inverse relationship)
    $first = (1-($value/$max))*$brightness;
    $second = ($value/$max)*$brightness;
    
    // Find the influence of the middle color (yellow if 1st and 2nd are red and green)
    $diff = abs($first-$second);    
    $influence = ($brightness-$diff)/2;     
    $first = intval($first + $influence);
    $second = intval($second + $influence);
    
    // Convert to HEX, format and return
    $firstHex = str_pad(dechex($first),2,0,STR_PAD_LEFT);     
    $secondHex = str_pad(dechex($second),2,0,STR_PAD_LEFT); 
    
    return $firstHex . $secondHex . $thirdColor ; 

    // alternatives:
    // return $thirdColorHex . $firstHex . $secondHex; 
    // return $firstHex . $thirdColorHex . $secondHex;
    
}

The code is bloated to make it easier to understand for beginners. I know I could have cut corners. It also needs some error checking (e.g. brightness must be between 1 and 255).

If you would like to compact it or add to it, go ahead and post the new version back! You can also change the affecting pair from red-green to green-blue or blue-red with a red hue or green hue as alternative if you want.

Cheers,



Dan M.


Example of use:

<html>
<body>
<table width="300px">
<tr><td>Percent</td><td>Color</td></tr>
<?php

$example = array(10,40,28,69,100,0,50); 

foreach($example as $x)
{
    $color = percent2Color($x,$brightness = 200); 
    echo "<tr><td>$x</td><td style='background-color:#$color'>$color</td>";
}

?>
</table>

</body>
</html>
</html>

[Markus]

Cool stuff, D.