Converting and formatting colors

Here’s a quick post on converting some colors from strings to integers, and splitting colors into separate red/green/blue values, and formatting colors using Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/13/converting-and-formatting-colors/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function fixedInt(value:int, mask:String):String {
                return String(mask + value.toString(16)).substr(-mask.length).toUpperCase();
            }

            private function rChannel(value:int):int {
                return value >> 16 & 0xFF;
            }

            private function gChannel(value:int):int {
                return value >> 8 & 0xFF;
            }

            private function bChannel(value:int):int {
                return value >> 0 & 0xFF;
            }

            private function rgbToInt(r:int, g:int, b:int):int {
                return r << 16 | g << 8 | b << 0;
            }
        ]]>
    </mx:Script>

    <mx:Model id="colorObj">
        <root>
            <color>{colorPicker.selectedColor}</color>
            <red>{rChannel(colorObj.color)}</red>
            <green>{gChannel(colorObj.color)}</green>
            <blue>{bChannel(colorObj.color)}</blue>
        </root>
    </mx:Model>

    <mx:Form>
        <mx:FormItem label="Color:" direction="horizontal">
            <mx:ColorPicker id="colorPicker" />
            <mx:Label text="0x{fixedInt(colorPicker.selectedColor, '000000')}" width="100" />
        </mx:FormItem>
        <mx:FormItem label="Red:" direction="horizontal">
            <mx:Label text="{colorObj.red}" />
            <mx:Label text="(0x{fixedInt(colorObj.red, '00')})" />
        </mx:FormItem>
        <mx:FormItem label="Green:" direction="horizontal">
            <mx:Label text="{colorObj.green}" />
            <mx:Label text="(0x{fixedInt(colorObj.green, '00')})" />
        </mx:FormItem>
        <mx:FormItem label="Blue:" direction="horizontal">
            <mx:Label text="{colorObj.blue}" />
            <mx:Label text="(0x{fixedInt(colorObj.blue, '00')})" />
        </mx:FormItem>
        <mx:FormItem label="Color:" direction="horizontal">
            <mx:Label text="{colorObj.color}" />
            <mx:Label text="(0x{fixedInt(rgbToInt(colorObj.red, colorObj.green, colorObj.blue), '000000')})" />
        </mx:FormItem>
    </mx:Form>

    <mx:Label text="{int(0xFF00FF)}" />

</mx:Application>

View source is enabled in the following example.

0 thoughts on “Converting and formatting colors

  1. Here are a few more methods:

    /* Convert r/g/b values (255,0,255) to a fixed string ('FF00FF'). */
    private function rgbToStr(r:int, g:int, b:int):String {
        return fixedInt(rgbToInt(r, g, b), "000000");
    }
    
    /* Convert a string ('0xFF00FF') to an integer (16711935). */
    private function strToInt(value:String):int {
        return int(value);
    }
    
    /* Convert a string ('0xFF00FF') to an object containing an 'r', 'g', and 'b' property. */
    private function strToRGB(value:String):Object {
        var temp:int = strToInt(value);
        return {r:rChannel(temp), g:gChannel(temp), b:bChannel(temp)};
    }
    
  2. Hi,

    is there any way to set the selectedColor-property from a value fed in from an XML (=HTTPservice)? Tried with this,

    and

    but this just keeps me giving an error.

    Thanks for your help!

    Christoph