How To Calculate The Average Between 2 Colors In ActionScript 3.0

July 27th, 2010 Ntt.cc

  

Tweet

In some web apps or flash games, we probably need to calculate the average between 2 colors, for example. feed 0xAA0000 and 0xCC0000, and return 0xBB0000 ? Is there a simple way to calculate between two hex colors?

AverageColor is a open source(Licensed under the MIT License) util-class to calculate the average between 2 colors (Hex, RGB or HSB format).

There are only 2 classes in AverageColor library. Calculate the average color with AverageColor.as, and convert RGB/HSB/16 color with ConvertColor.as class. They were released by scratchbrain(Japanese).You can download AverageColor library here.

AverageColor.as

Function averageHex: average 2 hex colors.

Function averageRgb: average 2 RGB colors.

Function averageHsb: average 2 HSBcolors.

1. package net.scratchbrain.color
2. {
3.     import net.scratchbrain.color.AverageColor;
4.     public class AverageColor
5.     {
6.  
7.         public static function averageHex(_hex1:uint,_hex2:uint):uint
8.         {
9.             var rgb1:Object = ConvertColor.HexToRGB(_hex1);
10.             var rgb2:Object = ConvertColor.HexToRGB(_hex2);
11.             var hsb1:Object = ConvertColor.RGBToHSB(rgb1.r,rgb1.g,rgb1.b);
12.             var hsb2:Object = ConvertColor.RGBToHSB(rgb2.r,rgb2.g,rgb2.b);
13.             return averageHsb(hsb1.h,hsb1.s,hsb1.b,hsb2.h,hsb2.s,hsb2.b);
14.  
15.         }
16.         public static function averageRgb(_r1:int,_g1:int,_b1:int,_r2:int,_g2:int,_b2:int):uint
17.         {
18.             var hsb1:Object = ConvertColor.RGBToHSB(_r1,_g1,_b1);
19.             var hsb2:Object = ConvertColor.RGBToHSB(_r2,_g2,_b2);
20.             return averageHsb(hsb1.h,hsb1.s,hsb1.b,hsb2.h,hsb2.s,hsb2.b);
21.         }
22.         public static function averageHsb(_h1:int,_s1:int,_b1:int,_h2:int,_s2:int,_b2:int):uint
23.         {
24.             var _h:int;
25.             var _s:int;
26.             var _b:int;
27.  
28.             if(_h1 <= 18 && _s1 != 0 && _h2 >= 180){
29.                 _h1 = 360;
30.             }
31.             if(_h2 <= 18 && _s2 != 0 && _h1 >= 180){
32.                 _h2 = 360;
33.             }
34.  
35.             if(_s1 != 0 && _s2 != 0){
36.                 _h = (_h1 + _h2)/2;
37.                 _s = (_s1 + _s2)/2;
38.                 _b = (_b1 + _b2)/2;
39.             }else if(_s1 == 0 && _s2 == 0                _h = 0;
40.                 _s = 0;
41.                 _b = (_b1 + _b2)/2;
42.             }else
43.                 _h = (_h1 != 0) ? _h1 : _h2;
44.                 _s = (_s1 + _s2)/2;
45.                 _b = (_b1 + _b2)/2;
46.             }
47.  
48.             var rgb:Object = ConvertColor.HSBToRGB(_h,_s,_b);
49.             return ConvertColor.RGBToHex(rgb.r,rgb.g,rgb.b);
50.         }
51.     }
52. }

ConvertColor.as

Function RGBToHex: convert from RGB to Hex 

Function HexToRGB: convert from HEX to RGB 

Function RGBToHSB: convert RGB to HSB 

Function HSBToRGB: convert HSB to RGB 

1. package net.scratchbrain.color
2. {
3.     public class ConvertColor
4.     {
5.         // convert from RGB to Hex
6.         public static function RGBToHex(r:int,g:int,b:int):uint
7.         {
8.             var hex:uint = r&lt;&lt;16 | g&lt;&lt;8 | b;
9.             return hex;
10.         }
11.         // convert from HEX to RGB
12.         public static function HexToRGB(value:uint):Object{
13.             var rgb:Object = new Object();
14.             rgb.r = (value &gt;&gt; 16) &amp; 0xFF
15.             rgb.g = (value &gt;&gt; 8) &amp; 0xFF
16.             rgb.b = value &amp; 0xFF           
17.             return rgb;
18.         }
19.         // convert RGB to HSB
20.         public static function RGBToHSB(r:int,g:int,b:int):Object{
21.             var hsb:Object = new Object;
22.             var _max:Number = Math.max(r,g,b);
23.             var _min:Number = Math.min(r,g,b);
24.            
25.             hsb.s = (_max != 0) ? (_max - _min) / _max * 100: 0;
26.             hsb.b = _max / 255 * 100;
27.             if(hsb.s == 0){
28.                 hsb.h = 0;
29.             }else{
30.                 switch(_max)
31.                 {
32.                     case r:
33.                         hsb.h = (g - b)/(_max - _min)*60 + 0;
34.                         break;
35.                     case g:
36.                         hsb.h = (b - r)/(_max - _min)*60 + 120;
37.                         break;
38.                     case b:
39.                         hsb.h = (r - g)/(_max - _min)*60 + 240;
40.                         break;
41.                 }
42.             }
43.            
44.             hsb.h = Math.min(360, Math.max(0, Math.round(hsb.h)))
45.             hsb.s = Math.min(100, Math.max(0, Math.round(hsb.s)))
46.             hsb.b = Math.min(100, Math.max(0, Math.round(hsb.b)))
47.            
48.             return hsb;
49.         }
50.         // convert HSB to RGB
51.         public static function HSBToRGB(h:int,s:int,b:int):Object{
52.             var rgb:Object = new Object();
53.        
54.             var max:Number = (b*0.01)*255;
55.             var min:Number = max*(1-(s*0.01));
56.            
57.             if(h == 360){
58.                 h = 0;
59.             }
60.            
61.             if(s == 0){
62.                 rgb.r = rgb.g = rgb.b = b*(255*0.01) ;
63.             }else{
64.                 var _h:Number = Math.floor(h / 60);
65.                
66.                 switch(_h){
67.                     case 0:
68.                         rgb.r = max    ;                                                                                                                                                                                                                   
69.                         rgb.g = min+h * (max-min)/ 60;
70.                         rgb.b = min;
71.                         break;
72.                     case 1:
73.                         rgb.r = max-(h-60) * (max-min)/60;
74.                         rgb.g = max;
75.                         rgb.b = min;
76.                         break;
77.                     case 2:
78.                         rgb.r = min ;
79.                         rgb.g = max;
80.                         rgb.b = min+(h-120) * (max-min)/60;
81.                         break;
82.                     case 3:
83.                         rgb.r = min;
84.                         rgb.g = max-(h-180) * (max-min)/60;
85.                         rgb.b =max;
86.                         break;
87.                     case 4:
88.                         rgb.r = min+(h-240) * (max-min)/60;
89.                         rgb.g = min;
90.                         rgb.b = max;
91.                         break;
92.                     case 5:
93.                         rgb.r = max;
94.                         rgb.g = min;
95.                         rgb.b = max-(h-300) * (max-min)/60;
96.                         break;
97.                     case 6:
98.                         rgb.r = max;
99.                         rgb.g = min+h  * (max-min)/ 60;
100.                         rgb.b = min;
101.                         break;
102.                 }
103.        
104.                 rgb.r = Math.min(255, Math.max(0, Math.round(rgb.r)))
105.                 rgb.g = Math.min(255, Math.max(0, Math.round(rgb.g)))
106.                 rgb.b = Math.min(255, Math.max(0, Math.round(rgb.b)))
107.             }
108.             return rgb;
109.         }
110.     }
111. }

Useage

1. import

1. import net.scratchbrain.color.AverageColor;

2. call function

Calculate the average between 2 HEX colors:

1. var _color:uint = AverageColor.averageHex(_color1.selectedColor,_color2.selectedColor);

Calculate the average between 2 RGB colors:

1. var _color:uint = AverageColor.averageRgb(_r1.value,_g1.value,_b1.value,_r2.value,_g2.value,_b2.value);

Calculate the average between 2 HSB colors:

1. var _color:uint = AverageColor.averageHsb(_h1.value,_s1.value,_v1.value,_h2.value,_s2.value,_v2.value);

Author URL

http://www.scratchbrain.net/blog/ver2/entries/000445.html (Japanese)

Share and Enjoy:

---

• 
• 
• 
• 
• 
• 
• 
• 
• 

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Posted in ActionScript Tags: ActionScript, AS3, color, Howto, open source 1,632 views

Enjoy this Post? Subscribe to Ntt.cc   RSS Feed      Email Feed Follow us

You might also want to read...

• The Candle Flame Fluttered In The Breeze With Actionscript 3.0 Open Source Library TeraFire (0)
• 30+ useful as3 open source projects (22)
• Some String Utils Examples & Functions in ActionScript 3.0 (0)
• 11 Powerful Open Source Tweening Engine For ActionScript (0)
• Read QR Code With QRCodeReader Open-Source AS3 Library (3)

« The Fresh GoDaddy Promo Code And Coupon List For 2010

Adobe Will Create New Business Unit To Handle Its Most High-profile Products »

You can leave a response, or trackback from your own site.

4 Responses to “How To Calculate The Average Between 2 Colors In ActionScript 3.0”

1. Nathan says:

   July 27, 2010 at 1:51 pm

   Wouldn’t it be easier to convert to a number and find the average directly.

   I mean
   Number((Number(0xAA0000) + Number(0xCC0000)) / 2).toString(16) = bb0000

   Reply
   • Mr. LieR says:

     July 27, 2010 at 2:04 pm

     I think that’s OK
     but not friendly to read source code.
     probably also maintain

     Reply
   • senocular says:

     July 27, 2010 at 11:42 pm

     The direct average of numbers case doesn’t always work. Consider averaging:
     0×000100 and 0×000000

     Finding the numeric average gives you 0×000080 – which is a lot of blue when you started off without any on either side. The actual color average is half a point of green, 00 or 01, depending on how you round it. And this is what you would get after separating the value into its individual color components, though round tripping through HSB is an unnecessary step.

     Reply
2. Mr. LieR says:

   July 27, 2010 at 2:07 pm

   the same with:
   we can write all source in one function
   but in fact we will not.
   right?

   Reply