<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/24/adjusting-a-colors-brightness-using-the-colorutil-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
		creationComplete="changeColorChip()" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.utils.ColorUtil;

            private function changeColorChip():void {
                /* ColorUtil.adjustBrightness() takes a bright parameter between -255 and +255. */
                brite1 = slider.value;
                /* ColorUtil.adjustBrightness2() takes a bright parameter between -100 and +100. */
                brite2 = int(slider.value / 255 * 100);
                
                var adjustedColor1:uint = ColorUtil.adjustBrightness(rgb, brite1);
                var adjustedColor2:uint = ColorUtil.adjustBrightness2(rgb, brite2);

                colorStr1 = rgbToHex(adjustedColor1);
                box1.setStyle("backgroundColor", adjustedColor1);
                
                colorStr2 = rgbToHex(adjustedColor2);
                box2.setStyle("backgroundColor", adjustedColor2);
            }

            private function rgbToHex(value:uint):String {
                var str:String = value.toString(16).toUpperCase();
                str = String("000000" + str).substr(-6);
                return str;
            }
            
            private function reset():void {
            	colorPicker.selectedIndex = 0;
            	slider.value = 0;
            	changeColorChip();
            }
        ]]>
    </mx:Script>
    
    <mx:Number id="rgb">{colorPicker.selectedColor}</mx:Number>
    <mx:Number id="brite1" />
    <mx:Number id="brite2" />
    <mx:String id="colorStr1" />
    <mx:String id="colorStr2" />
    <mx:String id="lbl1">adjustBrightness(0x{rgbToHex(rgb)}, {brite1}) = 0x{colorStr1}</mx:String>
    <mx:String id="lbl2">adjustBrightness2(0x{rgbToHex(rgb)}, {brite2}) = 0x{colorStr2}</mx:String>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="RGB:" />
        <mx:ColorPicker id="colorPicker"
                change="changeColorChip()" />

		<mx:Spacer width="20" />

        <mx:Label text="Brightness:" />
        <mx:HSlider id="slider"
                minimum="-255"
                maximum="255"
                value="0"
                liveDragging="true"
                snapInterval="1"
                tickInterval="5"
                dataTipPrecision="0"
                width="100%"
                change="changeColorChip()" />

		<mx:Spacer width="20" />
		
		<mx:Button label="Reset"
			click="reset()" />
    </mx:ApplicationControlBar>

	<mx:HBox width="100%" height="100%">
		<mx:VBox width="50%" height="100%">
			<mx:Label text="{lbl1}"
				selectable="true" />
		    <mx:Box id="box1"
		            width="100%"
		            height="100%" />
		</mx:VBox>

		<mx:VBox width="50%" height="100%">
			<mx:Label text="{lbl2}"
				selectable="true" />
		    <mx:Box id="box2"
		            width="100%"
		            height="100%" />
		</mx:VBox>
	</mx:HBox>

</mx:Application>