By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,913 Members | 1,384 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

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

dlite922
Expert 100+
P: 1,584
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

Expand|Select|Wrap|Line Numbers
  1.  
  2. /**
  3. * Example of use of percent2Color function
  4. * @author Dan M 
  5. * @date 06/24/2010
  6. */
  7.  
  8.  
  9. /**
  10. * This function takes a value and returns an RGB color between Red to Yellow to Green in a given spectrum. 
  11. * 50% = FFFF00 
  12. * @param mixed $value required
  13. * @param mixed $brightness value between 1 and 255
  14. * @param mixed $max default 100
  15. * @param mixed $min default 0
  16. * @param mixed $thirdColorHex '00'
  17. */
  18. function percent2Color($value,$brightness = 255, $max = 100,$min = 0, $thirdColorHex = '00')
  19. {       
  20.     // Calculate first and second color (Inverse relationship)
  21.     $first = (1-($value/$max))*$brightness;
  22.     $second = ($value/$max)*$brightness;
  23.  
  24.     // Find the influence of the middle color (yellow if 1st and 2nd are red and green)
  25.     $diff = abs($first-$second);    
  26.     $influence = ($brightness-$diff)/2;     
  27.     $first = intval($first + $influence);
  28.     $second = intval($second + $influence);
  29.  
  30.     // Convert to HEX, format and return
  31.     $firstHex = str_pad(dechex($first),2,0,STR_PAD_LEFT);     
  32.     $secondHex = str_pad(dechex($second),2,0,STR_PAD_LEFT); 
  33.  
  34.     return $firstHex . $secondHex . $thirdColor ; 
  35.  
  36.     // alternatives:
  37.     // return $thirdColorHex . $firstHex . $secondHex; 
  38.     // return $firstHex . $thirdColorHex . $secondHex;
  39.  
  40. }
  41.  
  42.  
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:
Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3. <body>
  4. <table width="300px">
  5. <tr><td>Percent</td><td>Color</td></tr>
  6. <?php
  7.  
  8. $example = array(10,40,28,69,100,0,50); 
  9.  
  10. foreach($example as $x)
  11. {
  12.     $color = percent2Color($x,$brightness = 200); 
  13.     echo "<tr><td>$x</td><td style='background-color:#$color'>$color</td>";
  14. }
  15.  
  16. ?>
  17. </table>
  18.  
  19. </body>
  20. </html>
  21. </html>
  22.  
  23.  
Jun 24 '10 #1
Share this Article
Share on Google+
1 Comment


Markus
Expert 5K+
P: 6,050
Cool stuff, D.
Nov 25 '10 #2