Get RGB values from colorPicker in Flex

UPDATE: Gavin Lauchlan from croyinternational.com has commented his take on how to get RGB values from colorPicker much easyer, better and faster than the solution I provided below:

var color:uint = picker.selectedColor; //color from colorpicker
var red:Number = ( color >> 16 ) & 0xff; 
var green:Number = ( color >> 8 ) & 0xff;
var blue:Number = ( color & 0xff );

Can it be any easyer than that…thanx again to Gavin for pointing this out!


Last night I wanted to get RGB values from a colorPicker control in Flex. There is one problem though, colorPicker does not have an option to return it’s selected color in RGB format. So I had to get a way to do it myself.

After doing some research online I came up with a solution that is presented here. In the code below we will make a colorPicker that whenever a value changes it is going to show us three values, 1 – it’s selectedColor value, 2 – hexadecimal representation of that color and 3 – color in RGB mode.

Below we can see what the application will look like once we are done:

private function showColor():void{
			var color:String = picker.selectedColor.toString(16);
			if (color.length < 6){
				var razlika:int = 6-color.length;
				var temp_color:String = '';
				for (var i:int=0; i<razlika; i++){
					temp_color += '0';
				}
				temp_color += color;
				color = temp_color 
			}
			var R:Number = parseInt(color.substring(0,2), 16);
			var G:Number = parseInt(color.substring(2,4), 16);
			var B:Number = parseInt(color.substring(4,6), 16);
			value.htmlText = '<b>Picker color value:</b> ' + picker.selectedColor;
			hex.htmlText = '<b>Hexadecimal:</b> 0x' + color;
			rgb.htmlText = '<b>R:</b> ' + R.toString() + ' <b>G:</b> ' + G.toString() + ' <b>B:</b> ' + B.toString() + ' - <b>RGB:</b> '  + '(' + R.toString() + ',' + G.toString() + ',' + B.toString() + ')';
	}

Above is the code that shows us the selected color in different formats. First we assign the selected color of our colorPicker to the value color and we convert it to hexadecimal number with .toString(16). Next we check the size of our hexadecimal number, if it is smaller than 6, we have to add as many zeros in the front so that it will have a length of 6. For example color black, converted to hexadecimal will return 0, we have to make sure we get 000000, so that we will be able to get RGB values. The same goes for blue colors, for example 33, has to be converted to 000033.

Once we have our hexadecimal representation of selected color we can get RGB (red, green, blue) values from that number. We will use a function called parseInt, that returns a number and takes in 2 arguments, first one is a string that has to be converted to number, and second one (that is optional) is numeral system to be used. In our example we take first two characters in hexadecimal number format and parse it from hexadecimal number to a decimal number. The same goes for green (characters 2-4) and blue (characters 4-6).

The last thing we did was to show values to the user.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#FFFFFF">
<mx:Script>
	<![CDATA[
	private function showColor():void{
			var color:String = picker.selectedColor.toString(16);
			if (color.length < 6){
				var razlika:int = 6-color.length;
				var temp_color:String = '';
				for (var i:int=0; i<razlika; i++){
					temp_color += '0';
				}
				temp_color += color;
				color = temp_color 
			}
			var R:Number = parseInt(color.substring(0,2), 16);
			var G:Number = parseInt(color.substring(2,4), 16);
			var B:Number = parseInt(color.substring(4,6), 16);
			value.htmlText = '<b>Picker color value:</b> ' + picker.selectedColor;
			hex.htmlText = '<b>Hexadecimal:</b> 0x' + color;
			rgb.htmlText = '<b>R:</b> ' + R.toString() + ' <b>G:</b> ' + G.toString() + ' <b>B:</b> ' + B.toString() + ' - <b>RGB:</b> '  + '(' + R.toString() + ',' + G.toString() + ',' + B.toString() + ')';
	}
	]]>
</mx:Script>
	<mx:HBox>
		<mx:Text text="Select Color:" paddingRight="5"/><mx:ColorPicker id="picker" change="showColor()"/>
	</mx:HBox>
	<mx:Text id="value"/>
	<mx:Text id="hex"/>
	<mx:Text id="rgb"/>
</mx:Application>
Advertisements

, , , ,

  1. #1 by Gavin Lauchlan on March 8, 2010 - 1:41 pm

    Not tried this myself, just hacking out some pseudocode here, but couldn’t you get your RGB values by bit shifting? Something along the lines of:

    color = picker.selectedColor

    red = ( color >> 16 ) & 0xff
    green = ( color >> 8 ) & 0xff
    blue = ( color & 0xff )

  2. #2 by Ladislav Klinc on March 8, 2010 - 8:18 pm

    Hey Gavin,

    you are correct and your solution works perfect and it is much cleaner and nicer (and faster) than my own.

    If you do not mind I would like to publish your solution along with this one.

    Thanx for commenting
    Ladislav

  3. #3 by Gavin Lauchlan on March 8, 2010 - 8:30 pm

    No Problem!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: