<?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()">
 
    <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>