Color format

You define Color in several formats. You can use most of the formats only in the CSS style definitions. The following table describes the recognized Color formats for a style property:

Format

Description

hexadecimal

Hexadecimal colors are represented by a six-digit code preceded by either a zero and small x (0x) or a pound sign (#). The range of valid values is 0x000000 to 0xFFFFFF (or #000000 to #FFFFFF).

You use the 0x prefix when defining colors in calls to the setStyle() method and in MXML tags. You use the # prefix in CSS style sheets and in <mx:Style> tag blocks.

RGB

RGB colors are a mixture of the colors red, green, and blue, and are represented in percentages of the color's saturation. The format for setting RGB colors is color:rgb(x%, y%, z%), where the first value is the percentage of red saturation, the second value is the percentage of green saturation, and the third value is the percentage of blue saturation.

You can use the RGB format only in style sheet definitions.

VGA color names

VGA color names are a set of 16 basic colors supported by all browsers that support CSS. The available color names are Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow.

You can use the VGA color names format in style sheet definitions and inline style declarations.

VGA color names are not case-sensitive.

Color formats are of type Number. When you specify a format such as a VGA color name, Flex converts that String to a Number.

CSS style definitions and the <mx:Style> tag support the following color value formats:

<?xml version="1.0"?>
<!-- styles/ColorFormatCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myStyle { 
        themeColor: #6666CC;    /* CSS hexadecimal format */
        color: Blue;        /* VGA color name */
     }
  </mx:Style>
  <mx:Button id="myButton" styleName="myStyle" label="Click Here"/>
</mx:Application>

You can use the following color value formats when setting the styles inline or using the setStyle() method:

<?xml version="1.0"?>
<!-- styles/ColorFormatStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     public function initApp():void {
        StyleManager.getStyleDeclaration("Button").
            setStyle("themeColor",0x6666CC);
        StyleManager.getStyleDeclaration("Button").
            setStyle("color","Blue");
     }

     public function changeStyles(e:Event):void {
        e.currentTarget.setStyle("themeColor", 0xFF0099);
        e.currentTarget.setStyle("color", "Red");
     }
  ]]></mx:Script>
  <mx:Button id="myButton" 
        label="Click Here" 
        click="changeStyles(event)"
  />
</mx:Application>

Flex 2.01

Take a survey