Color

Table of Contents

Markup Tutorial

Interfacing with Java™

Web Services

Border

Button Group

Color

For any attribute type that expects a color specification, you may specify a color value using a color name from either of the following charts:


The colors shown in the System Color Chart on the right are only representative of what is possible — Actual colors may vary depending on the look and feel, and user preferences.

Try the following example in eNode Sandbox to see the actual colors for your run-time environment.

<?xml version="1.0"?>
<resource xmlns="http://www.enode.com/xalt" xmlns:xlink="http://www.w3.org/1999/xlink">
    <frame title="System Color Chart" visible="true">
        <scrollPane preferredSize="200 540">
            <table rowHeight="20" enabled="false">
                <reserve>
                    <label id="colorRenderer" class="com.enode.xalt.ColorTableCellRenderer"/>
                </reserve>
                <columnHeader>
                    <column title="Color Name" preferredWidth="150"/>
                    <column title="Color" renderer="#colorRenderer"/>
                </columnHeader>
                <row> <item title="activeCaption"/>         <color value="activeCaption"/> </row>
                <row> <item title="activeCaptionBorder"/>   <color value="activeCaptionBorder"/> </row>
                <row> <item title="activeCaptionText"/>     <color value="activeCaptionText"/> </row>
                <row> <item title="control"/>               <color value="control"/> </row>
                <row> <item title="controlDarkShadow"/>     <color value="controlDarkShadow"/> </row>
                <row> <item title="controlHighlight"/>      <color value="controlHighlight"/> </row>
                <row> <item title="controlLightHighlight"/> <color value="controlLightHighlight"/> </row>
                <row> <item title="controlShadow"/>         <color value="controlShadow"/> </row>
                <row> <item title="controlText"/>           <color value="controlText"/> </row>
                <row> <item title="desktop"/>               <color value="desktop"/> </row>
                <row> <item title="inactiveCaption"/>       <color value="inactiveCaption"/> </row>
                <row> <item title="inactiveCaptionBorder"/> <color value="inactiveCaptionBorder"/> </row>
                <row> <item title="inactiveCaptionText"/>   <color value="inactiveCaptionText"/> </row>
                <row> <item title="info"/>                  <color value="info"/> </row>
                <row> <item title="infoText"/>              <color value="infoText"/> </row>
                <row> <item title="menu"/>                  <color value="menu"/> </row>
                <row> <item title="menuText"/>              <color value="menuText"/> </row>
                <row> <item title="scrollbar"/>             <color value="scrollbar"/> </row>
                <row> <item title="text"/>                  <color value="text"/> </row>
                <row> <item title="textHighlight"/>         <color value="textHighlight"/> </row>
                <row> <item title="textHighlightText"/>     <color value="textHighlightText"/> </row>
                <row> <item title="textInactiveText"/>      <color value="textInactiveText"/> </row>
                <row> <item title="textText"/>              <color value="textText"/> </row>
                <row> <item title="window"/>                <color value="window"/> </row>
                <row> <item title="windowBorder"/>          <color value="windowBorder"/> </row>
                <row> <item title="windowText"/>            <color value="windowText"/> </row>
            </table>
        </scrollPane>
    </frame>
</resource>

For an explanation of this example, see the documentation for table.

Numeric Color Specifications

In addition to specifying colors by name, you may specify colors using numeric RGB values. Numeric color specifications must start with a single hash mark #, followed by pairs of hexadecimal digits for each of the red, green and blue channels. Thus, the value #FF0000 is equivalent to red, the value #000000 is equivalent to black, and the value #FFFFFF is equivalent to white.

If the hash mark is followed by four pairs of hexadecimal digits instead of three, the first pair is treated as the alpha channel value, where 00 indicates complete transparency, and FF indicates complete opacity. By changing the alpha channel value, varying degrees of translucency can be achieved.